js控制audio标签音频播放暂停

想自己制作好看点的audio播放暂停按钮怎么实现?这里你需要用js来控制audio播放,然后隐藏audio面版,自己用css来制作一个美化的播放面板即可。这里来介绍下怎么用js来控制audio播放暂停。具体看下面代码:

<!-- audio标签位置 -->
<p style="text-align: center;">
<audio controls="" preload="none" src="/upload/1616382683569438.mp3" id="myaudio"></audio>
</p>

<!-- 播放暂停按钮 -->
<a href="#" onclick="control()">播放 / 暂停</a>
<a href="#" onclick="repeat()">重新开始</a>


<!-- 播放控制 -->
<script language="javascript" type="text/javascript">
function repeat() {
    var audio = document.getElementById('myaudio');
    audio.currentTime = 0; //重新播放
}
function control() {
    var audio = document.getElementById('myaudio');
    if (audio !== null) {
        if (audio.paused) {
            audio.play(); // 播放
        } else {
            audio.pause(); // 暂停
        }
    }
}
</script>

最终效果:

js控制audio播放

通过以上代码就可以实现js控制audio音频播放了。

如果内容有帮助,就点个赞吧!

转载注明出处:http://www.12564.cn/show-192.html

如有疑问请联系 QQ:644233191   微信:zw1688k