如何製作音頻播放/暫停按鈕？

我最近學會了如下嵌入音頻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>

該款顯示器類似，上面有各種選項，如暫停/播放，下載，設置音量等

但是矩形我不是這個「音頻播放矩形」怎麼能有一個按鈕，當點擊播放音頻一次，並在播放音頻時單擊它並暫停播放，然後再次單擊連續播放。

來源

2017-06-04 Asif Ali

至少給予好評有用的答案，如果你不喜歡接受他們...只需要爲每次點擊顯示「謝謝」各去一次。 –

您可以使用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; 
};

只需更換參數到你。

來源

2017-06-04 20:36:55 user6875529

是否將mp3鏈接添加到鏈接按鈕的href或什麼？會感謝一個js小提琴！ –

@AsifAli這是javascript代碼，您將需要在標記之前包含它，。您還需要爲您的音頻標籤設置myAudio ID。 – AMH

下面是純JS的一個簡單例子。我在按鈕上使用一個類來知道音頻是否播放，當按鈕處於播放/暫停狀態時，您可以針對不同的用戶界面使用相同的類。

鏈接：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>

來源

2017-06-05 04:06:49

如何製作音頻播放/暫停按鈕？

回答

相關問題