（React js）音頻src在setState上更新，但音頻播放不變

我正嘗試用React構建一個迷你雙音軌音頻播放器。音頻由一個html音頻元素集中控制，並在一個子組件內包含一個音軌列表。（尚未被稱呼）的球員可以看到here。（React js）音頻src在setState上更新，但音頻播放不變

我可以告訴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') 
);

來源

2017-04-23 theseboys

你可以試試'onChange = {this.onTrackChange.bind（this）}'？ –

不幸的是，不幸的是，不過謝謝。 – theseboys

在您的示例中，出現此錯誤：「未捕獲的錯誤：Bootstrap的JavaScript需要jQuery」。你注意到了嗎？ –

音頻文件無法通過僅僅改變src等的圖像作爲有緩存被改變。你將需要load it和play它。

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>

來源

2017-04-24 00:40:40 mrinalmech

太好了，謝謝。解決了！ – theseboys

（React js）音頻src在setState上更新，但音頻播放不變

回答

相關問題