React - 完全加載時播放音頻

Question

我只想在完全加載時播放音頻。所以如果有人網絡連接速度慢，它不會結結巴巴。我的組件看起來是這樣的：

class MusicLoop extends Component { 
    state = { 
     isLoaded: false 
    } 

    componentWillReceiveProps(nextProps) { 
     if (nextProps.song !== this.props.song) { 
      this.setState({ 
       isLoaded: false 
      }); 
     } 
    } 

    playSong =() => { 
     this.setState({ 
      isLoaded: true, 
     }); 
    } 

    render() { 
     const { song } = this.props; 
     const { isLoaded } = this.state; 

     return (
      <div> 
       { isLoaded ? 'Playing' : 'Loading' } 
       <audio 
        preload="auto" 
        src={require(`../static/songs/${song}.mp3`)} 
        loop="true" 
        autoPlay={false} 
        onLoadedData={() => this.playSong()} 
       /> 
      </div> 
     ); 
    } 
}; 

如果我要在Chrome DevTools網絡選項卡，GPRS（50 kb/s的），就開始播放由部分音頻部分，這是可怕的設置節流：/。

如何僅在完全加載時播放音頻？

Answer 1

您可以使用sound manager - 這裏是usage example