用js写一个英语播放器-CSDN博客

本文链接：https://blog.csdn.net/m0_51354601/article/details/130001999

<!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>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      .main {
        width: 300px;
        height: 300px;
        background-color: #f1f3f4;
        border-radius: 6px;
        /* 居中 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .img {
        width: 150px;
        height: 150px;
        border-radius: 100%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 10px;
      }
      audio {
        margin-top: 40px;
        width: 100%;
        /* 去除默认样式 */
        margin: 0.25rem 0;

        border-radius: 0% !important;

        z-index: 9999;
      }
      .btn {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      img {
        width: 100%;
        height: 100%;
      }
      /* 图片旋转 */
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .img {
        animation: rotate 10s linear infinite;
      }
    </style>
  </head>
  <body>
    <!-- 音乐播放器 -->
    <div class="main">
      <div class="img">
        <img src="../static/logo.jpg" alt="" id="img" />
      </div>
      <audio src="./music/阿冗山风.mp3" controls autoplay></audio>
      <div class="btn">
        <button class="shang">上一首</button>
        <button class="tingzhi">停止</button>
        <button class="xia">下一首</button>
      </div>
    </div>
  </body>
  <script>
    //  1.获取元素
    let shang = document.querySelector(".shang");
    let tingzhi = document.querySelector(".tingzhi");
    let xia = document.querySelector(".xia");
    let audio = document.querySelector("audio");
    let img = document.getElementById("img");

    // 封装函数 点击事件 axios
    function getMusic(url) {
      axios.get(url).then((res) => {
        console.log(res);
        // 歌曲列表数组
        let list = [];
        // 遍历数组
        res.data.data.forEach((item) => {
          // 将歌曲列表的mid值存入数组
          list.push(item.mid);
        });
      });
    }

    getMusic();

    shang.onclick = function () {
      audio.src = "./music/可不可以.mp3";
      // 可以替换成通过axios 获取的list列表里面的链接

      audio.play();
    };
    xia.onclick = function () {
      audio.src = "./music/暖一杯茶.mp3";
      audio.play();
    };

    // 判断是否停止或是播放，并修改button的value停止或是播放
    let flag = true;
    tingzhi.onclick = function () {
      if (flag) {
        audio.pause();
        flag = false;
        // 修改button的值
        tingzhi.innerHTML = "停止";
        // 图片停止旋转
        document.querySelector(".img").style.animationPlayState = "paused";
      } else {
        audio.play();
        flag = true;
        tingzhi.innerHTML = "播放";
        document.querySelector(".img").style.animationPlayState = "running";
      }
    };
  </script>
</html>