是否有一种方法来改变audioplayer的url一旦状态改变了它存在的组件?

Question

我正在开发一个使用文本到语音API服务的应用程序。在前端，我有一个接受输入值的textarea元素和一个随后进行post调用的按钮，以便我以URL的形式返回脚本的语音。这些是组件

的状态变量

state = {
textVal: "",
audioUrl: "",
}

这是handleChange方法、textarea和按钮HTML。

handleChange() {
this.setState({ textVal: event.target.value });
}

<textarea
placeholder="Insert script here"
rows="4"
cols="50"
value={this.state.textVal}
onChange={this.handleChange}
/>

<button onClick={this.audioRequest}>
Listen
</button>

这是我如何进行post调用，尽管我已经删除了不必要的东西

audioRequest() {
const data = {
textScript: this.state.textVal,
};
axios.post(
"...", data)
.then(({ data }) => {
this.setState({
audioUrl: data.audioUrl,
});
});
}

之后，我将URL传递给音频播放器元素，如所示，只有一个条件来检查我的URL是否为空

<audio controls>
{(this.state.audioUrl === "") ? 
"Nothing to play yet" : 
<source src={this.state.audioUrl} type="audio/wav" />}
</audio>

当我输入一个新的脚本并点击listen按钮时，问题开始了，我确实在控制台上得到了新的URL，但音频播放器不播放新的脚本，而是播放到第一个。

如果你能帮我的话，我会很感激的。

Answer 1

您还必须制作音频回放，像这样:

onClick={() => {
setSource("/file_example_OOG_1MG.ogg");
ref.current.pause();
ref.current.load();
ref.current.play();
}}

工作示例:https://codesandbox.io/s/react-audio-player-forked-wx225?file=/src/Player/Player.js