javascript – (React js)音频src正在setState上更新,但音频播放不会改变

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – (React js)音频src正在setState上更新,但音频播放不会改变，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1759字，纯文字阅读大概需要3分钟。

内容图文

我正在尝试使用React构建一个迷你双轨音频播放器.音频由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')
);

解决方法:

只有像缓存一样更改src就不能改变音频文件.您需要加载它并再次播放它.

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

回调处理状态更改后的暂停,加载和播放.请记住在音频标签中添加引用.

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

内容总结

以上是互联网集市为您收集整理的javascript – (React js)音频src正在setState上更新,但音频播放不会改变全部内容，希望文章能够帮你解决javascript – (React js)音频src正在setState上更新,但音频播放不会改变所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---