<audio>で音楽を再生する方法はありますか？

Question

私は与えられたURLで音楽を再生する必要がある単純な反応アプリを作成しています。 ハードコーディングされた音楽URLでテストし、<audio>タグを使用して、HTMLと同じように音楽を再生しようとしました。

class Music extends React.Component { 
    render() { 

    return (
     <span> 

     <audio src="URL"> 
    </span> 

    ) 
    } 
} 

しかし、これはコンパイルされません。反応アプリで音楽を演奏する最も簡単な方法は何ですか？

Answer 1

溶液の1つは、HTML5 Audioであることができる。 new Audioオブジェクトを作成し、カスタムPlay/Pauseボタンで制御します。

Basicの例：

class Music extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     play: false, 
 
     pause: true, 
 
    } 
 
    this.url = "http://streaming.tdiradio.com:8000/house.mp3"; 
 
    this.audio = new Audio(this.url); 
 
    } 
 

 
    play =() => { 
 
    this.setState({ play: true, pause: false }) 
 
    this.audio.play(); 
 
    } 
 
    
 
    pause =() => { 
 
    this.setState({ play: false, pause: true }) 
 
    this.audio.pause(); 
 
    } 
 
    
 
    render() { 
 
    
 
    return (
 
    <div> 
 
     <button onClick={this.play}>Play</button> 
 
     <button onClick={this.pause}>Pause</button> 
 
    </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Music />, 
 
    document.getElementById('container') 
 
);

<div id="container"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

また、あなたがPlay/Pauseを制御し、処理するためにaddEventListenerを使用することができます。

プレイ：

this.audio.addEventListener('play',() => { 
    this.setState({ 
    play: true, 
    pause: false, 
    }) 
}); 

一時停止：

this.audio.addEventListener('pause',() => { 
    this.setState({ 
    play: false, 
    pause: true, 
    }) 
}); 

ドキュメントと例：

Audio/Video Event Listener

MDN HTML5 Audio

重要な注意：

HTML5 Audio要素がstop()機能を持っていないので、一時停止後の音声は、（）まだ（バックグラウンドでのバッファリング）をロードされます。

これが解決策です： HTML5 Video: Force abort of buffering

JSFIddle： https://jsfiddle.net/y2j0vzbe/

これが役立つことを願って。