不使用＜audio＞原格式，播放、暂停音频

最新推荐文章于 2023-03-29 15:24:47 发布

Fabricant

最新推荐文章于 2023-03-29 15:24:47 发布

阅读量425

点赞数

分类专栏：小笔记

本文链接：https://blog.csdn.net/Fabricant/article/details/116239894

版权

小笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天写页面的时候，遇到了一个类似微信语音样式的音频播放，身为小白的我，还是觉得用H5的比较简单，但是自带的格式（controls ）并不符合要求，其实是一个很简单的盒子就行，单击播放，再单击停止。但是生疏的手卡了半天，我决定记录一下...

首先，分析一下这个标签，它的几个属性
audio属性
只有在controls属性出现时才会展示出audio默认的样式，其余属性看需求添加

 <audio src="./" controls="controls"></audio>

audio默认的播放样式
一开始没添加的时候啥也没有，我以为是浏览器不支持H5，但是测试了一下并没有问题，最后找到了controls这个属性，但是我并不需要它的样式，所以还是要去掉…

然后，有段时间没碰JS的后果就是一个点击事件还废了半天劲，要的效果是，在一个盒子里添加音频，单机盒子，音频播放，再次单击，音频暂停。

btn.onclick = function  {
        if (audio.paused) {
          audio.play();
        } else if (audio.play) {
          audio.pause();
        }
      }

由于需要多出用到，就给函数起个名，最终的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>播放/暂停音频</title>
    <style>
      #btn {
        width: 300px;
        height: 60px;
        margin: 100px auto;
        border-radius: 20px;
        background-color: pink;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="btn" onclick="click01()">
      <audio src="./天涯客.mp3" class="audio"></audio>
    </div>

    <script>
      var btn = document.getElementById("btn");
      var audio = document.querySelector(".audio");
      function click01() {
        if (audio.paused) {
          audio.play();
        } else if (audio.play) {
          audio.pause();
        }
      }
    </script>
  </body>
</html>

Fabricant

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不使用＜audio＞原格式，播放、暂停音频

今天写页面的时候，遇到了一个类似微信语音样式的音频播放，身为小白的我，还是觉得用H5的比较简单，但是自带的格式（controls ）并不符合要求，其实是一个很简单的盒子就行，单击播放，再单击停止。但是生疏的手卡了半天，我决定记录一下...首先，分析一下这个标签，它的几个属性只有在controls属性出现时才会展示出audio默认的样式，其余属性看需求添加 <audio src="./" controls="controls"></audio>一开始没添加的时候啥也没有
复制链接

扫一扫