H5 audio使用js方式实现播放与暂停,只用一个按钮

最新推荐文章于 2024-05-20 20:02:37 发布

原创最新推荐文章于 2024-05-20 20:02:37 发布 · 6.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #web #audio

web 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在H5页面中使用图片作为播放按钮来控制音频播放和暂停的方法。通过简单的JavaScript代码实现音乐播放器的基本功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司准备做一个安卓端的邀请函,这段时间就在研究h5方面的东西,今天看一下音频播放.

我是用了一个小图片代替按钮,绑定点击事件,实现了播放与暂停.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="img/音乐.png" width="30px" id="btn">
        <audio src="111.mp3" id="myaudio" controls="controls" loop="false" hidden="true">
        </audio>
    </body>
    <script type="text/javascript">
        var btn=document.getElementById('btn');
        var audio=document.getElementById('myaudio');
        var tag = true;
        btn.onclick = function(){
            if(tag){
                alert('关闭');
                audio.pause();
                tag = false;
            }else{
                alert('播放');
                audio.play();
                tag = true;
            }
        }
    </script>
</html>

此代码只需要复制到本地,修改音乐文件路径和图片就可以使用了.