时间戳

首页 > 解决方案 > 有没有办法在它所在的组件上更改状态后更改音频播放器的 url？

javascript - 有没有办法在它所在的组件上更改状态后更改音频播放器的 url？

问题描述

我正在开发一个使用文本到语音 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>

这就是我打电话的方式，尽管我删除了不必要的东西

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>

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

我真的很感激这里的一些帮助。

标签： javascripthtmlreactjs

解决方案

您还必须进行音频重播，如下所示：

        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

推荐阅读