完全にロードされたときに反応する - オーディオを再生する

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

私はGPRS（/秒50キロバイト）にクロームデベロッパーツールの[ネットワーク]タブでスロットリング設定されている場合、それはひどいされており、一部で音声部分の再生を開始します：/。

完全に読み込まれている場合にのみオーディオを再生する方法はありますか？

Answer 1

sound manager - ここではusage example

です