(React JS)音频src正在setState上更新，但音频播放不会改变 [英] (React js) Audio src is updating on setState but the audio playing doesn't change

问题描述

我正在尝试使用React构建一个迷你的2轨音频播放器.音频由html音频元素集中控制，而html音频元素在子组件中具有曲目列表.(尚未样式化)播放器可以在此处看到.

I am trying to build a mini 2-track audio player with React. The audio is centrally controlled by a html audio element with a track-list inside a child component. The (yet to be styled) player can be seen here.

我可以在React开发工具中告诉我们，单击单个音轨选择按钮确实会更新音频元素的src(由于这里的成员的帮助)，但是播放的音频不会改变.我已经在下面发布了应用程序代码.

I can tell in the React dev tools that clicking the individual track select buttons does update the src of the audio element (thanks to the help of a member on here), however, the playing audio doesn't change. I've posted the Application code below.

是否可以通过以这种方式更新状态来更改播放音频?帮助将不胜感激.

Is it even possible to change the playing audio by updating the state in this way? Help would be hugely appreciated.

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')
);

推荐答案

仅通过像更改图像一样更改 src 即可更改音频文件，因为存在缓存.您需要加载它，然后再次播放它.

Audio files cannot be changed by just changing the src like an image as there is caching. You will need to load it and play it again.

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

状态更改后，回调将处理暂停，加载和播放.请记住在音频标签中添加 ref .

The callback handles the pausing, loading and playing after the state has been changed. Remember to add a ref to the audio tag.

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

这篇关于(React JS)音频src正在setState上更新，但音频播放不会改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！