页面插入自制的audio播放器，上一篇错误已找到，这是修正后结果-CSDN博客

本文链接：https://blog.csdn.net/weixin_46061526/article/details/105592444

本文详细介绍了一个基于HTML5的音乐播放器制作过程，包括如何使用JavaScript控制音乐播放、暂停，以及实现上一首、下一首的功能。同时，还介绍了如何通过CSS进行样式设计，以及如何在网页中嵌入音频文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        DOM事件练习
    </title>
</head>    
<body>
<audio id="myMusic"  controls></audio>
    <div class="music">
        <div class="pic_div" >
            <img src="images/a_1.gif" alt="选择图" class="disc">
            <span class="dot"></span>
            <div class="music_proGrass">
                <div id="proGrass"></div>
            </div>
            <div class="time">
                <p>
                    <span id="currentTime">00:00</span>
                    <span>/</span>
                    <span id="duration"></span>
                </p>
            </div>
            <div class="music_menu">
                <span  id="backMusic"></span>
                <span  id="playBtn"></span>
                <span  id="nextMusic"></span>
            </div>
        </div>
    </div>
</body>
</html>

在播放暂停事件，上一首事件，下一首事件。在html内不应直接使用onclick事件点击。而应使用js获取事件ID的onclick并定义到函数function。这只是个人修正后结果，不是最佳答案。
本身这样写audio就不是最佳方法，

.music{
            width:500px;
            height:250px;
            background:#3b3b3b url(images/1-1F510151015W9.jpg) no-repeat;
            background-size:100% 100%;
        }
        .pic_div{
            position:relative;
        }
        .dot{
            width:15px;
            height:15px;
            background-color:#676767;
            border:1px solid #fff;
            border-radius:50%;
            position:absolute;
            top:110px;
            left:235px;
        }
        .disc{
            width:50px;
            position:absolute;
            left:230px;
            top:62px;
            transform:rotate(30deg);
        }
        .music_proGrass{
            width:480px;
            height:10px;
            background-color:#aea9a6;
            border:1px solid #3b3b3b;
            border-radius:10px;
            position:relative;
            top:185px;
            left:10px;
        }
        .music_proGrass div{
            width:0;
            height:100%;
            background-color:#ff0000;
        }
        .time {
            width:200px;
            height:20px;
            position:relative;
            top:170px;
            left:150px;
        }
        .time p{
            padding-left:40px;
        }
        .time p span:nth-child(2){
            padding:0 5px;
        }
        .music_menu{
            width:300px;
            height:20px;
           /* background-color:#ff0000;*/
            position:relative;
            top:170px;
            left:100px;
        }
        .music_menu span{
            width:30px;
            height:25px;
            display:inline-block;
            cursor:pointer;
        }
        .music_menu span:nth-child(1){
            margin:0 37px;
            background:url(images/后退.png) no-repeat 7px;
            background-size:100% 90%;
        }
        .music_menu span:nth-child(2){
            margin:0 15px;
            background:url(images/开始.jpg) no-repeat 7px;
            background-size:90% 90%;
        }
        .music_menu span:nth-child(3){
            margin:0 28px;
            background:url(images/前进.jpeg) no-repeat 7px;
            background-size:90% 90%;
        }

样式没有更改，

window.onload=function() {
     var music = document.getElementById('myMusic');
     var musics = new Array('星辰大海.mp3', '风景.mp3', '闷.mp3');
     var duration = document.getElementById('duration');
     var musicIndex = 0;//音乐索引
     var deg = 0;//旋转角度
     var btn = document.getElementById('playBtn');
     var discTimer, proGrassTimer;//碟片计时器，进度条计时器
     var disc = document.getElementsByClassName('disc');//旋转碟片
     var curTxt = document.getElementById('currentTime');
     var proGrass = document.getElementById('proGrass');

     //播放的音乐时长的显示
     function curTime(txt, music) {
         if (music.currentTime < 10) {
             txt.innerHTML = '0:0' + Math.floor(music.currentTime);
         }
         if (music.currentTime < 60) {
             txt.innerHTML = '0:' + Math.floor(music.currentTime);
         } else {
             var miNet = parseInt(music.currentTime / 60);
             var sec = music.currentTime - miNet * 60;
             if (sec < 10) {
                 txt.innerHTML = '0' + miNet + ':' + '0' + parseInt(sec);
             } else {
                 txt.innerHTML = '0' + miNet + ':' + parseInt(sec);
             }
         }

     }

     //播放暂停
     document.getElementById('playBtn').onclick = function playPause(){

          if (music.paused) {
              music.play();
              clearInterval(discTimer);//清除碟片的计时
              btn.style.background = 'url(images/暂停.jpg) no-repeat 10px';//改变播放暂停按钮的图片，此时歌曲播放状态，图片变为暂停图片
              discTimer = setInterval(function () {
                  disc[0].style.transform = 'rotate(' + deg + 'deg)';
                  deg += 5;
              }, 100);//设置每秒旋转角度
              proGrassTimer = setInterval(function () {
                  proGrass.style.width = (music.currentTime) * 100 / (music.duration) + '%';//无法理解处
                  curTime(curTxt, music);
                  if (music.currentTime >= music.duration - 1) {//当音乐时长大于等于总时长的倒数1秒时
                      musicIndex++;//音乐索引加一，跳转到下一首
                      if (musicIndex >= musics.length) {//当音乐索引大于等于音乐数组的长度时，索引归0
                          musicIndex = 0;
                      }
                      getMusic();
                      music.play();
                  }//重载音乐后播放
              }, 1000);
          }


          else {
              music.pause();
              btn.style.background = 'url(images/开始.jpg) no-repeat 10px';//改变播放暂停按钮的图片，此时歌曲停止状态，图片变为播放图片
              clearInterval(discTimer);//清除碟片的进度
              clearInterval(proGrassTimer);//清除进度条的进度
          }
      };

     //下一曲
     document.getElementById('nextMusic').onclick = function nextMusic() {
         musicIndex++;
         if (musicIndex >= musics.length) {
             musicIndex = 0;
         }
         getMusic();
         music.play();
     }

     //上一曲
     document.getElementById('backMusic').onclick = function backMusic() {
         musicIndex--;
         if (musicIndex < 0) {
             musicIndex = musics.length - 1;
         }
         getMusic();
         music.play();
     }

     //加载本地音乐
     function getMusic() {
         music.src = 'music/' + musics[musicIndex];//改变音乐的SRC
         //读取对应的音乐时长
         if (music.readyState = 'complete') {
             setTimeout(function () {
                 duration.innerHTML = parseInt(music.duration / 60) + ':' + parseInt(music.duration % 60);
             }, 200);//一秒后读取音乐的总时长
         }
     }
     getMusic();
 };