audio进度条（改进）

最新推荐文章于 2024-06-03 13:34:36 发布

ヽ(￣▽￣)ﾉ

最新推荐文章于 2024-06-03 13:34:36 发布

阅读量2.9k

点赞数 4

分类专栏： H5C3 文章标签： html5

本文链接：https://blog.csdn.net/qq_38563342/article/details/108225204

版权

H5C3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5 audio标签自定义控制器

参照之前的修改下进度条，使进度条更美观

效果如下
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-size: 50px;
      }
      body {
        margin: 0;
        padding: 0;
      }
      .mp3Box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* width: 100%; */
        height: 1.08rem;
        border: 1px solid black;
        padding: 0 0.4rem;
      }
      .radioBox {
        width: 0.6rem;
        height: 0.6rem;
        /* border: 1px solid red; */
        border-radius: 50%;
        background: url(./bofan.jpg) no-repeat center center;
        background-size: 0.6rem 0.6rem;
      }

      .voice {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: url(./voiceon.jpg) no-repeat center center;
        background-size: 0.5rem 0.5rem;
      }
      #yinliang {
        display: none;
        position: relative;
        top: 0.2rem;
        left: -2.14rem;
      }
      .time {
        font-size: 0.2rem;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }
      .progress {
        position: relative;
        width: 50%;
        height: 0.08rem;
        background-color: #ccc;
      }
      .slide {
        position: absolute;
        top: -0.1rem;
        width: 0.3rem;
        height: 0.3rem;
        border-radius: 50%;
        background-color: #3299cc;
        z-index: 9;
      }
      .fill{
        position: absolute;
        top: 0;
        height: 0.08rem;
        background-color: #3299cc;
      }
    </style>
  </head>
  <body>
    <div class="mp3Box">
      <!-- 播放开关 -->
      <div class="radioBox" onclick="bofan()">
        <audio id="ado"></audio>
      </div>
      <!-- 进度条 -->
      <div class="progress">
        <div class="slide"></div>
        <div class="fill"></div>
      </div>
      <!-- 时间 -->
      <div class="time">
        <span class="currentTime">00:00</span> /
        <span class="duraTime">00:00</span>
      </div>
      <!-- 是否静音 -->
      <div class="voice"></div>
    </div>
    <script>
      var audio = document.querySelector("#ado");
      // 音频地址
      audio.src =
        "http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_96409423&response=res&type=convert_url&";
      audio.controls = false;
      audio.loop = true;
      audio.volume = 0.3;
      var rBox = document.querySelector(".radioBox");
      rBox.appendChild(audio);
      //   调整声音是否静音
      var voice = document.querySelector(".voice");
      voice.addEventListener("click", function () {
        if (audio.muted) {
          audio.muted = false;
          voice.style.backgroundImage = "url(./voiceon.jpg)";
        } else {
          audio.muted = true;
          voice.style.backgroundImage = "url(./voiceoff.jpg)";
        }
      });
      //   播放暂停
      function bofan() {
        if (audio.paused) {
          audio.play();
          rBox.style.backgroundImage = "url(./zanting.jpg)";
        } else {
          audio.pause();
          rBox.style.backgroundImage = "url(./bofan.jpg)";
        }
      }

      //   获取音频总时长
      if (audio != null) {
        var duration;
        audio.load();
        audio.oncanplay = function () {
          var duraTime = document.querySelector(".duraTime");
          duraTime.innerHTML = transTime(audio.duration);
        };
      }
      //   格式化时间格式
      function transTime(time) {
        let duration = parseInt(time);
        let minute = parseInt(duration / 60);
        let sec = (duration % 60) + "";
        let isM0 = ":";
        if (minute == 0) {
          minute = "00";
        } else if (minute < 10) {
          minute = "0" + minute;
        }
        if (sec.length == 1) {
          sec = "0" + sec;
        }
        return minute + isM0 + sec;
      }
      // 时长进度条
      var progress = document.querySelector(".progress");
      var slide = document.querySelector(".slide");
      var fill = document.querySelector(".fill")
      audio.ontimeupdate = function () {
        var l = (audio.currentTime / audio.duration) * 100;
        slide.style.left = l + "%";
        fill.style.width = l + "%";
        if (audio.currentTime == 0) {
          slide.style.left = "0%";
        }
        var currentTime = document.querySelector(".currentTime");
        currentTime.innerHTML = transTime(parseInt(audio.currentTime));
        var duraTime = document.querySelector(".duraTime");
        duraTime.innerHTML = transTime(audio.duration);
      };
      // 点击进度条
      progress.onmousedown = function (e) {
        var rate = (e.clientX - progress.offsetLeft) / this.clientWidth*audio.duration
        audio.currentTime = rate-(progress.clientWidth*0.005)
      };
      //进度条拖动
      slide.onmousedown = function (e) {
        var x = e.clientX - this.offsetLeft; //240
        document.onmousemove = function (e) {
          var jlx = ((e.clientX - x) / progress.clientWidth) * 100;
          if (jlx <= 100 && jlx >= 0) {
            slide.style.left = jlx + "%";
          }
          audio.currentTime = (jlx / 100) * audio.duration;
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
      slide.ontouchstart = function (e) {
        var x = e.targetTouches[0].clientX - this.offsetLeft; //240
        document.ontouchmove = function (e) {
          var jlx = ((e.targetTouches[0].clientX - x) / progress.clientWidth) * 100;
          if (jlx <= 100 && jlx >= 0) {
            slide.style.left = jlx + "%";
          }
          audio.currentTime = (jlx / 100) * audio.duration;
        };
        document.ontouchend = function (e) {
          document.ontouchmove = null;
          document.ontouchend = null;
        };
      };
    </script>
  </body>
</html>

图片素材：
在这里插入图片描述

ヽ(￣▽￣)ﾉ

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
audio进度条（改进）

HTML5 audio标签自定义控制器参照之前的修改下进度条，使进度条更美观效果如下代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&lt
复制链接

扫一扫