html网页版音乐播放器

利用html+css+js 实现网页版音乐播放,支持歌词预览,歌曲上一曲下一曲暂停顺序播放循环播放等功能

先上效果图:

歌曲部分:

音乐路径为拼接指定路径下的音乐文件url,无需用户手动选取文件路径

歌词部分:

通过ajax获取歌词lyric文本,js解析每句歌词的播放时间和内容

html代码:

    <div id="main-section">
            <div id="main-section-1">
              <div class="title-style-1">音乐专区</div>
              <div id="articleContent">
                <div id="typeA" class="animateBorder">
                  <div id="titleA" class="titleType">流行音乐</div>
                  <ul class="ulSection">
                    <li class="liSection">
                      <span class="musicTitle">1.爱在日出前</span>
                      <div id="favMusic" class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">2.醉千年</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">3.晚风作酒</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">4.醒不来的梦</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">5.她的眼睛会唱歌</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">6.秋殇别恋</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">7.半壶纱</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">8.连借口都没有</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">9.百花香</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">10.很任性</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                  </ul>
                </div>
     
                <div id="typeB" class="animateBorder">
                  <div id="titleB" class="titleType">经典老歌</div>
                  <ul class="ulSection">
                    <li class="liSection">
                      <span class="musicTitle">1.星月神话</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">2.风度</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">3.暗涌</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">4.爱的故事上集</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">5.吴哥窟</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">6.谁在意我留下的泪</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">7.恋人心</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">8.夜曲</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">9.十一年</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">10.断桥残雪</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                  </ul>
                </div>
     
                <div id="typeC" class="animateBorder">
                  <div id="titleC" class="titleType">其它歌曲</div>
                  <ul class="ulSection">
                    <li class="liSection">
                      <span class="musicTitle">1.想起</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">2.你是风</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">3.乌兰巴托的夜</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">4.The Tower</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">5.家乡</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">6.情非虚构</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">7.我是不是该安静的走开</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">8.曾经心痛</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">9.潮湿的心</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                    <li class="liSection">
                      <span class="musicTitle">10.余情未了</span>
                      <div class="musicStatus" onclick="change(this)"></div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

JS代码:

      let sectionD1 = document.getElementById("main-section-1");
          let lyricTip = document.getElementById("lyricTip");
          let lyricDisplay = document.getElementById("lyricDisplay");
          let lyricTitle = document.getElementById("lyricTitle");
          let favMusic = document.getElementById("favMusic");
          let progressDiv = document.getElementById("progressDiv");
          let lyricUl = document.getElementById("lyricUl");
          let rollTDiv = document.getElementById("rollTime"); // 实时播放时间Div
          let totalTDiv = document.getElementById("totalTime"); // 总时长时间Div
          let progressBar = document.getElementById("progressBar"); // 歌曲实时进度条
          let progressAni = document.getElementById("progressAni");
          let totalProgress = document.getElementById("totalProgress"); // 歌曲总进度条
          let playType = document.getElementById("playType"); // 播放方式
     
          let isPlay = false,
            lyricF,
            lines;
          let playTypeNum = 1,
            songID,
            typeNum,
            nowMusic; //控制列表和单曲循环
          let patternType1 = /\[(\d{2}:\d{2}).\d{2}\](.+)/,
            patternType2 = /\[(\d{2}:\d{2}).\d{2}\](.+)/g;
          let linesFadeArr = [],
            linesArr = [],
            timeArr = [],
            lyricArr = []; //歌词处理数字
     
          //进度条宽度自动布局
          totalProgress.style.width = progressDiv.clientWidth + "px";
          window.addEventListener("resize", function () {
            sectionD1.style.width = "600px";
            totalProgress.style.width = progressDiv.clientWidth + "px";
          });
     
          let audio = new Audio();
          audio.volume = 0.8;
          change(favMusic);
     
          function change(t) {
            nowMusic = t;
            linesFadeArr = [];
            linesArr = [];
            timeArr = [];
            lyricArr = [];
     
            let musicNum = document.querySelectorAll(".musicStatus");
     
            typeNum = t.parentNode.parentNode.parentNode.children[1].getElementsByTagName("li").length;
     
            for (i = 0; i < musicNum.length; i++) {
              musicNum[i].style.backgroundImage = "url(./music/play.png)";
            }
     
            let context = t.parentNode.children[0].innerHTML.replace(/\n/g, "");
            songID = context.replace(/\D/g, "");
     
            let type = t.parentNode.parentNode.parentNode.id.substr(4, 4);
            let musicSrc = "./music/music" + type + "/" + type + "_" + songID + ".mp3";
     
            let lyricSrc = "./music/music" + type + "/" + type + "_" + songID + ".lrc";
     
            audio.src = musicSrc;
            lyricTitle.innerHTML = context.replace(songID, "").replace(".", "");
            t.style.backgroundImage = "url(./music/pause.png)";
            startStop.className = "buttons start";
     
            //上一曲
            pre.onclick = function () {
              let currentMusicID = songID - 2;
              if (currentMusicID < 0) {
                currentMusicID = typeNum - 1;
              }
              change(t.parentNode.parentNode.children[currentMusicID].children[1]);
            };
     
            //下一曲
            next.onclick = function () {
              let currentMusicID = songID;
              if (currentMusicID > typeNum - 1) {
                currentMusicID = 0;
              }
              change(t.parentNode.parentNode.children[currentMusicID].children[1]);
            };
     
            //播放或暂停
            startStop.onclick = function () {
              if (audio.paused) {
                // 如果当前音乐是暂停状态，点击按钮，则改为播放状态
                startStop.className = "buttons start"; // 设置播放的class
                audio.play();
                nowMusic.parentNode.parentNode.children[songID - 1].children[1].style.backgroundImage = "url(./music/pause.png)";
              } else {
                // 如果当前音乐是播放状态，点击按钮，则改为暂停状态
                startStop.className = "buttons stop"; // 设置暂停的class
                audio.pause();
                nowMusic.parentNode.parentNode.children[songID - 1].children[1].style.backgroundImage = "url(./music/play.png)";
              }
            };
     
            lyricF = fetchItem(lyricSrc);
            if (lyricF == void 0) {
              lyricF = "抱歉,该歌曲暂未找到歌词";
              lyricTip.innerHTML = "抱歉,该歌曲暂未找到歌词";
              lyricTip.style.color = "rgb(9, 226, 161)";
            } else {
              lyricTip.innerHTML = "";
            }
            lines = lyricF.split("\n");
            lyricUl.style.top = 0 + "px";
     
            //去掉空白行
            for (var i = 0; i < lines.length; i++) {
              if (lines[i].trim() !== "") {
                linesFadeArr.push(lines[i].trim());
              }
            }
     
            //去掉不含时间行或只包含时间行
            for (var i = 0; i < linesFadeArr.length; i++) {
              if (!patternType1.test(linesFadeArr[i]) || (patternType1.test(linesFadeArr[i]) && linesFadeArr[i].length == 10)) {
                linesFadeArr.splice(i, 1);
              }
            }
     
            //歌词格式化后最终歌词数组
            for (var i = 0; i < linesFadeArr.length; i++) {
              if (patternType1.test(linesFadeArr[i])) {
                linesArr.push(linesFadeArr[i]);
              }
            }
     
            //加载歌词
            var lyricText = linesArr.join("\n");
            let tmp = patternType2.exec(lyricText);
     
            while (tmp) {
              timeArr.push(tmp[1]);
              lyricArr.push(tmp[2]);
              tmp = patternType2.exec(lyricText);
            }
     
            let str = "";
     
            lyricArr.forEach((item, index) => {
              str += `<li id="lyricLI" class="${index === 0 ? "active" : ""}" >${item}</li>`;
            });
     
            lyricUl.innerHTML = str;
     
            if (isPlay) {
              audio.play();
            } else {
              audio.pause();
              isPlay = true;
              t.style.backgroundImage = "url(./music/play.png)";
              startStop.className = "buttons stop";
            }
          }
     
          //播放状态处理
          audio.addEventListener("timeupdate", function () {
            var totalTime = audio.duration;
            var currentTime = audio.currentTime;
            if (!isNaN(totalTime)) {
              rollTDiv.textContent = getFormatterDate(currentTime);
              totalTDiv.textContent = getFormatterDate(totalTime);
              var width = Math.floor((currentTime / totalTime) * progressDiv.clientWidth);
              progressBar.setAttribute("style", "width:" + width + "px");
              progressAni.setAttribute("style", "left:" + (width - 2) + "px");
              //当前歌曲播放完毕处理
              if (currentTime == totalTime) {
                let musicStatus = document.querySelectorAll(".musicStatus");
     
                for (i = 0; i < musicStatus.length; i++) {
                  musicStatus[i].style.backgroundImage = "url(./music/play.png)";
                }
                rollTDiv.textContent = "00:00";
                progressBar.setAttribute("style", "width:" + 0 + "px");
                progressAni.setAttribute("style", "left:-2px");
                lyricUl.style.top = 0 + "px";
                startStop.className = "buttons stop";
                if (lyricUl.children[0] != void 0) {
                  lyricUl.children[0].className = "active";
                }
                if (playTypeNum == 1) {
                  let currentMusicID = songID;
                  if (currentMusicID > typeNum - 1) {
                    currentMusicID = 0;
                  }
                  change(nowMusic.parentNode.parentNode.children[currentMusicID].children[1]);
                } else if (playTypeNum == 2) {
                  let currentMusicID = songID - 1;
                  if (currentMusicID > typeNum - 1) {
                    currentMusicID = 0;
                  }
                  change(nowMusic.parentNode.parentNode.children[currentMusicID].children[1]);
                }
              }
            }
     
            //歌词渲染
            const minute = parseInt(currentTime / 60);
            const second = parseInt(currentTime % 60);
            const timeStr = (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second);
     
            const index = timeArr.findIndex((item) => item === timeStr);
     
            if (index !== -1) {
              //从第7句开始向上移动歌词位置
              if (index > 6) {
                lyricUl.style.top = -(index - 5) * 20 + "px";
                lIndex = index;
              }
     
              [...lyricUl.children].forEach((item) => (item.className = ""));
              lyricUl.children[index].className = "active";
            }
          });
     
          //监听进度条点击事件
          totalProgress.addEventListener("click", function (event) {
            updateTime(event.offsetX);
          });
          progressBar.addEventListener("click", function (event) {
            updateTime(event.offsetX);
          });
     
          function updateTime(x) {
            var totalTime = audio.duration;
            var currentTime = audio.currentTime;
            let actualWidt = progressDiv.clientWidth;
            var selectProgress = x / actualWidt;
     
            audio.currentTime = totalTime * selectProgress;
     
            var LWidth = Math.floor(selectProgress * actualWidt);
            progressBar.setAttribute("style", "width:" + LWidth + "px");
            audio.play();
          }
     
          //ajax获取文本对象
          function fetchItem(url) {
            var item;
            $.ajax({
              type: "get",
              url,
              async: false,
              success: function (data) {
                item = data;
              },
            });
            return item;
          }
     
          //时间格式化
          function getFormatterDate(time) {
            var m = parseInt(time / 60); // 分
            var s = parseInt(time % 60); // 秒
            // 补零
            m = m > 9 ? m : "0" + m;
            s = s > 9 ? s : "0" + s;
            return m + ":" + s;
          }
     
          //手动调节音量
          let volumeChange = document.getElementById("volumeChange");
          volumeChange.value = audio.volume * 10;
          volumeChange.onchange = function () {
            var volumeVal = volumeChange.value * 0.1;
            audio.volume = volumeVal;
          };
          let voicIcon = document.getElementById("voicIcon");
          let flag = true;
          volumeChange.style.display = "none";
          voicIcon.onmouseover = function () {
            if (flag) {
              volumeChange.style.display = "";
              flag = false;
            }
          };
          voicIcon.onmouseout = function () {
            setTimeout(function () {
              volumeChange.style.display = "none";
              flag = true;
            }, 3000);
          };
     
          //鼠标放在进度条显示时间
          var insTime = $("#insTime");
          function showTime(x) {
            var totalTime = audio.duration;
            let actualWidt = progressDiv.clientWidth;
            let nowTime = getFormatterDate((x / actualWidt) * totalTime);
            if (nowTime == "0NaN:0NaN") {
              insTime.text("");
            } else {
              insTime.text(nowTime);
              insTime.css({ left: x - 20 }).fadeIn(0);
            }
          }
     
          totalProgress.onmouseover = function (event) {
            showTime(event.offsetX);
          };
          progressBar.onmouseover = function (event) {
            showTime(event.offsetX);
          };
          totalProgress.onmouseout = function (event) {
            insTime.text("");
          };
          progressBar.onmouseout = function (event) {
            insTime.text("");
          };
     
          //播放方式按钮点击事件
          playType.onclick = function () {
            if (playTypeNum == 1) {
              // 当前播放为列表循环，点击切换播放方式时，改为单曲循环
              playTypeNum = 2;
              playType.className = "buttons_dqxh"; // 设置单曲循环的class
            } else {
              // 当前播放为单曲循环，点击切换播放方式时，改为列表循环
              playTypeNum = 1;
              playType.className = "buttons_lbxh"; // 设置列表循环的class
            }
          };

完整代码路径:
https://gitee.com/yueluo9527/web-music-play

主页样例:
http://www.lsummer.cn