javascript - (React js) 音频 src 在 setState 上更新，但音频播放没有改变

Question

我正在尝试使用 React 构建一个迷你 2 轨音频播放器。音频由一个 html 音频元素集中控制，该元素在子组件内有一个轨道列表。可以看到(尚未设置样式的)播放器 here .

我可以在 React 开发工具中得知，单击各个音轨选择按钮确实会更新音频元素的 src(感谢此处成员的帮助)，但是，播放的音频不会改变。我已经在下面发布了应用程序代码。

是否可以通过这种方式更新状态来改变正在播放的音频？非常感谢您的帮助。

var TRACKLIST = [
    {
        id: 1,
        name: "song a",
        source: "./audio/test.m4a"
    },
    {
        id: 2,
        name: "song b",
        source: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
    }
]

function Track(props) {
    return (
        <div className="track">
            <div className="meta">
                <div className="name">
                    <h2>{props.name}</h2>
                </div>
                <audio>
                    <source src={props.source} />
                </audio>
            </div>
            <button className="select" onClick={function() {props.onChange(props.source);}} >
            </button>
        </div>
    )
}

var Application = React.createClass({

    getInitialState: function() {
        return {
            isPlaying: "./audio/test.m4a"
        };
    },

    onTrackChange: function(source) {
        this.setState({ isPlaying: source })
    },

    render: function() {
        return (
            <div className="player">
                <div className="tracklist">
                    {this.props.tracklist.map(function(track){
                        return <Track
                                    key={track.id}
                                    name={track.name}
                                    source={track.source}
                                    onChange={this.onTrackChange} />
                    }.bind(this))}
                </div>
                <div className="controls">
                    <audio controls>
                        <source src={this.state.isPlaying} />
                    </audio>
                </div>
            </div>
        )
    }
});

// Render the UI
ReactDOM.render(
    <Application tracklist={TRACKLIST} />,
    document.getElementById('Player')
);

Answer 1

音频文件不能像改变图片一样改变 src 因为有缓存。您将需要加载并再次播放。

onTrackChange: function(source) {
       this.setState({ isPlaying: source },function(){
            this.refs.audio.pause();
            this.refs.audio.load();
            this.refs.audio.play();
       })
}

回调处理状态改变后的暂停、加载和播放。请记住将 ref 添加到音频标签。

<audio controls ref="audio">
   <source src={this.state.isPlaying} />
</audio>