js自定义音乐播放器

最新推荐文章于 2023-06-23 12:56:33 发布

JQ...

最新推荐文章于 2023-06-23 12:56:33 发布

阅读量397

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42201272/article/details/106268735

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .player {
      position: relative;
    }
    .content {
      position: relative;
      width: 600px;
      height: 30px;
      background-color: rgb(19, 151, 168);
      margin: 100px auto;
      overflow: hidden;
    }
    .control {
      width: 150px;
      margin: 0 auto;
    }
    .show {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      line-height: 30px;
    }
    .tag {
      position: relative;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      width: 0%;
      border-right: 1px solid rgba(0, 0, 0, 0.3);
    }
    .tag::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: -5px;
      background-color: green;
      height: 100%;
      width: 5px;
    }
  </style>
  <body>
    <div class="content">
      <div class="show"></div>
      <div class="tag"></div>
    </div>
    <div class="control">
      <button id="start">开始播放</button>
    </div>
    <audio
      id="audio"
      autoplay="autoplay"
      src="https://al-qn-echo-cp-cdn.app-echo.com/c2/4a86e987667a05e7f11615b49d8f88d421badee2ce8b71102c5204f106eecd231b4e36c3.mp3?1448676158"
    ></audio>
    <script>
      var show = document.querySelector(".show");
      var tag = document.querySelector(".tag");
      var content = document.querySelector(".content");
      var start = document.querySelector("#start");
      var end = document.querySelector("#stop");
      var audio = document.querySelector("#audio");
      var t = 165;
      var current = 0;
      var timer = null;
      console.log(audio.duration);

      show.innerHTML = "00:00" + "/" + filter(t);
      // 时间显示格式化
      function filter(t) {
        if (t >= 0) {
          var tt = Math.round(t);
          var m = Math.floor(t / 60);

          var s = tt % 60;
          m = m >= 10 ? m : "0" + m;
          s = s >= 10 ? s : "0" + s;

          return m + ":" + s;
        } else {
          return t;
        }
      }
      // 定时器方法
      function fn1() {
        console.log(current);

        if (current >= t) {
          start.innerHTML = "开始播放";
          current = 0;
          show.innerHTML = filter(current) + "/" + filter(t);
          tag.style.width = (current / t) * 100 + "%";
          return clearInterval(timer);
        }
        current++;
        show.innerHTML = filter(current) + "/" + filter(t);
        tag.style.width = (current / t) * 100 + "%";
      }
      // 点击进度条可以跳转播放进度
      content.onclick = function (e) {
        clearInterval(timer);
        start.innerHTML = "暂停播放";
        if (current < t) {
          timer = setInterval(fn1, 1000);
        }

        var currentWidth = e.pageX - content.offsetLeft + 1;
        current = Math.floor(
          (((currentWidth / content.clientWidth) * 100) / 100) * t
        );
        audio.currentTime = current;
        tag.style.width = (current / t) * 100 + "%";
        show.innerHTML = filter(current) + "/" + filter(t);
      };
      // 点击开始按钮开始播放
      start.onclick = function () {
        if (this.innerHTML === "开始播放") {
          console.log(audio.play);

          audio.play();
          this.innerHTML = "暂停播放";
          return (timer = setInterval(fn1, 1000));
        }
        this.innerHTML = "开始播放";
        audio.pause();
        clearInterval(timer);
      };
    </script>
  </body>
</html>