オーディオの再生/一時停止ボタンの作成方法は？

Question

私は最近、以下のようにhtmlにオーディオを埋め込むことについて学びました。

一時停止/再生のようなその上に様々なオプションを備えた長方形のようなものを表示する

<audio controls> 
    <source src="sample.ogg" type="audio/ogg"> 
    <source src="sample.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

、ダウンロード、設定した音量など

しかし、どのように、私の代わりに、この「オーディオ再生矩形は、」そのボタンを持つことができますクリックするとオーディオが一度再生され、オーディオの再生中にそのオーディオをクリックすると、オーディオが一時停止し、再び連続して再生されます。

Answer 1

Javascriptを使用すると、このような操作を実行できます。

はちょうどあなたにパラメータを置き換える次

var myAudio = document.getElementById("myAudio"); 
var isPlaying = false; 

function togglePlay() { 
    if (isPlaying) { 
    myAudio.pause() 
    } else { 
    myAudio.play(); 
    } 
}; 
myAudio.onplaying = function() { 
    isPlaying = true; 
}; 
myAudio.onpause = function() { 
    isPlaying = false; 
}; 

を試してみてください。

Answer 2

純粋なJSの簡単な例です。オーディオが再生されているかどうかを知るためにボタン上のクラスを使用していますが、再生/一時停止状態のボタンがある場合は、別のUIに同じクラスを使用できます。

リンク：https://jsfiddle.net/p4mksfm1/

<audio id="testAudio" hidden src="https://api.twilio.com/cowbell.mp3" type="audio/mpeg"> 
</audio> 

<button id="playAudio">Play</button> 

<script type="text/javascript"> 
document.getElementById("playAudio").addEventListener("click", function(){ 
    var audio = document.getElementById('testAudio'); 
    if(this.className == 'is-playing'){ 
    this.className = ""; 
    this.innerHTML = "Play" 
    audio.pause(); 
    }else{ 
    this.className = "is-playing"; 
    this.innerHTML = "Pause"; 
    audio.play(); 
    } 

}); 
<script>