如何制作音频播放/暂停按钮？

我最近学会了如下嵌入音频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

如何制作音频播放/暂停按钮？

回答

相关问题