audio - 更改音频元素的src属性不起作用

Question

更改音频元素的src属性无效:

var Audio = React.createClass({
    render : function() {
        return (
            <audio src={this.props.data.songUrl}/>
        );
    }   
});

var Music = React.createClass({
    render : function() {
        return (
            <article className="music">
                <article className="musicContent">
                    <MusicButton data={Data} />
                    <List />
                    <Footer />
                </article>
            </article>
        );
    }
});

var MusicButton = React.createClass({
    getInitialState : function() {
        return {
            isPlay : true,
            count : 0
        }
    },
    musicPlay : function () {
        var audio = React.findDOMNode(this.refs.audio);
        if(this.state.isPlay) {
            audio.play();
            this.setState({isPlay: false});
        } else {
            audio.pause();
            this.setState({isPlay: true});
        }
    },
    getBackWardMusic : function() {
        this.setState({count: ++this.state.count});
        var audio = React.findDOMNode(this.refs.audio);
        audio.play();
    },
    getForwardMusic : function() {
        this.setState({count: --this.state.count});
        var audio = React.findDOMNode(this.refs.audio);
        audio.play();
    },

    render : function() {
        var classString = 'iconMusic icon-pause';
        if(this.state.isPlay) {
            classString = 'iconMusic icon-pause';
        } else {
            classString += ' rotate';
        }

        return (
            <header className="musicHeader">
                <Audio ref="audio" data={this.props.data[this.state.count]} />
                <span onClick={this.getBackWardMusic} className="iconMusic icon-backward"></span>
                <span onClick={this.musicPlay} className={classString}></span>
                <span onClick={this.getForwardMusic} className="iconMusic icon-forward"></span>
            </header>
        );
    }
});

Answer 1

更改音频源后，您需要首先.load()，然后play()播放新的源。
您可能想使用.oncanplaythroug = .play()