html简单实现音乐播放

链接全是线上的直接在vs里运行即可用，使用es6语法书写的。
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Music Player with Image Spin Control</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>        
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 90vh;
    }
    
    button{
      /* 清除默认边框 */
      border:0;
      outline:none;
      /*清除默认背景 */
      background-color: transparent;
      padding: 25px;
    }

    .music-player {
      text-align: center;
      position: relative;
      bottom: 0;
    }

    audio {
      width: 300px;
    }

    .disc-container {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .disc {
      width: 20vw;
      height: 20vw;
      border-radius: 50%;
      background-size: cover;
      animation: spin 20s linear infinite;
      border: 20px solid rgba(30, 29, 29, 0.5); /* 添加边框 */
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="music-player">
      <audio ref="audioPlayer" controls @play="startImageSpin" @pause="stopImageSpin" @ended="stopImageSpin">
        <source :src="currentSong.url" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
      <h2>{{ currentSong.title }}</h2>
      <button @click="playPrevious">
        <svg t="1730998212948" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1026" width="30" height="30"><path d="M256 224a32 32 0 0 1 32 32v512a32 32 0 0 1-64 0V256a32 32 0 0 1 32-32z m385.952 30.624a96 96 0 0 1 157.44 73.76v366.72a96 96 0 0 1-157.44 73.76l-220.032-183.36a96 96 0 0 1 0-147.52z m86.048 53.28a32 32 0 0 0-45.056-4.096l-220.032 183.36a32 32 0 0 0-4.096 4.096l-2.4 3.232a32 32 0 0 0 6.496 41.824l220.032 183.36a32 32 0 0 0 52.48-24.576v-366.72a32 32 0 0 0-7.424-20.48z" fill="#000000" p-id="1027"></path></svg>
      </button>
      <button @click="togglePlayPause">
        <svg t="1730998261628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1330" width="30" height="30"><path d="M608.352 442.176a64 64 0 0 1 33.92 9.728l163.648 102.272a64 64 0 0 1 0 108.544l-163.648 102.272a64 64 0 0 1-97.92-54.272v-204.544a64 64 0 0 1 64-64zM448 704a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h224z m160.352-197.824v204.544l163.648-102.272-163.648-102.272zM448 448a32 32 0 0 1 0 64H224a32 32 0 0 1 0-64h224z m352-256a32 32 0 0 1 0 64H224a32 32 0 1 1 0-64h576z" fill="#000000" p-id="1331"></path></svg>
      </button>
      <button @click="playNext">
        <svg t="1730998244067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1177" width="30" height="30"><path d="M768 224a32 32 0 0 1 32 32v512a32 32 0 0 1-64 0V256a32 32 0 0 1 32-32z m-386.336 31.36l220.032 183.36a96 96 0 0 1 0 147.52l-220.032 183.36a96 96 0 0 1-157.44-73.76v-366.72a96 96 0 0 1 157.44-73.76zM295.616 308.64a32 32 0 0 0-7.424 20.48v366.72a32 32 0 0 0 52.48 24.576l220.032-183.36a32 32 0 0 0 6.496-41.824l-2.4-3.264a32 32 0 0 0-4.096-4.096l-220.032-183.36a32 32 0 0 0-45.056 4.128z" fill="#000000" p-id="1178"></path></svg>
      </button>
    </div>
    <div class="disc-container">
        <div class="disc" :style="`background-image: url(${currentImage})`" ref="disc"></div>
    </div>
  </div>

  <script>
    const { createApp, ref, computed, onMounted } = Vue;

    createApp({
      setup() {
        const audioPlayer = ref(null);
        const discElement = ref(null);
        const currentSongIndex = ref(0);
        const songs = ref([
          { title: 'love my life', url: 'https://dlink.host/sharepoint/aHR0cHM6Ly9vbmVkcnYtbXkuc2hhcmVwb2ludC5jb20vOnU6L2cvcGVyc29uYWwvc3Rvcl9vbmVkcnZfb25taWNyb3NvZnRfY29tL0VabnZ0azhrRTI5TW5OdVR6WjRqWDB3Qm5jbnZTRHhYODAxM3RkbDBTZEszb1E.mp3', image: 'https://ts1.cn.mm.bing.net/th/id/R-C.287b85fd021e852cb71838589ee8c2ee?rik=45qFAASOHsQsUg&riu=http%3a%2f%2fwww.bing.yiyuen.com%2fapi%2fbing%2fwallpaper%2fgetSource%3fid%3d2492&ehk=haEuZL0kY%2fYBg22TnqK1rBVgNfl23ZpT%2f3YhQL6xUps%3d&risl=&pid=ImgRaw&r=0' },
          { title: '老街', url: 'https://dlink.host/musics/aHR0cHM6Ly9vbmVkcnYtbXkuc2hhcmVwb2ludC5jb20vOnU6L2cvcGVyc29uYWwvc3Rvcl9vbmVkcnZfb25taWNyb3NvZnRfY29tL0VkcjU3elIxemcxQ2pxOWFXY2FGMG1rQkszQUF5VXlqNTNxRWlfMl9BdWRwRHc.mp3', image: 'https://n.sinaimg.cn/sinakd20116/580/w690h690/20200418/f087-iskepxt3819684.jpg' },
          { title: '流沙', url: 'https://dlink.host/musics/aHR0cHM6Ly9vbmVkcnYtbXkuc2hhcmVwb2ludC5jb20vOnU6L2cvcGVyc29uYWwvc3Rvcl9vbmVkcnZfb25taWNyb3NvZnRfY29tL0VYSldHSzUwZmRGUHRHdVdUYVlVT21NQjlhM012UnR6OHFMakR4NWlHU2xsZGc.mp3', image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Oy3BxwSSlARWVcca0IFCcAEsDv?rs=1&pid=ImgDetMain' }
        ]);
        const currentImage = ref(songs.value[0].image);
        const currentSong = computed(() => songs.value[currentSongIndex.value]);

        function playPrevious() {
          if (currentSongIndex.value > 0) {
            currentSongIndex.value--;
          } else {
            currentSongIndex.value = songs.value.length - 1;
          }
          updateImage();
          audioPlayer.value.load();
          audioPlayer.value.play();
        }

        function playNext() {
          if (currentSongIndex.value < songs.value.length - 1) {
            currentSongIndex.value++;
          } else {
            currentSongIndex.value = 0;
          }
          updateImage();
          audioPlayer.value.load();
          audioPlayer.value.play();
        }

        function togglePlayPause() {
          if (audioPlayer.value.paused) {
            audioPlayer.value.play();
          } else {
            audioPlayer.value.pause();
          }
        }

        function startImageSpin() {
          discElement.value.style.animationPlayState = 'running';
        }

        function stopImageSpin() {
          discElement.value.style.animationPlayState = 'paused';
        }

        function updateImage() {
          // Reset the rotation to 0 degrees
          discElement.value.style.transform = 'rotate(0deg)';
          currentImage.value = currentSong.value.image;
        }

        onMounted(() => {
          discElement.value = document.querySelector('.disc');
          updateImage();
          stopImageSpin();
        });

        return {
          currentSong,
          playPrevious,
          playNext,
          togglePlayPause,
          startImageSpin,
          stopImageSpin,
          currentImage,
          audioPlayer
        };
      }
    }).mount('#app');
  </script>
</body>

</html>