devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）_css切换歌曲

作者：我家自动化 | 2024-03-16 06:03:34

赞

踩

css切换歌曲

学了前端小半个月了，今天自己动手写一个音乐播放器实现的功能有 播放列表 ，随机单曲循环播放，上下一首，暂停和开始，静音，音量增加减少，进度条（收藏功能暂未实现，为了排版好看添加的，后续补充收藏等功能）。

话不多说，下面进入到h5页面的代码

 h5页面：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" type="text/css" href="./css/audioCSS.css">
  7. </head>
  8.  
  9. <body id="body" background="./img/bandaotiehe.jpg">
  10.  
  11. <!--音乐播放图片-->
  12. <img id="musicImg" src="" title="" width="400px" height="400px">
  13.  
  14. <!--音乐播放名字-->
  15. <div id="musicName" class="name" id="musicName"></div>
  16.  
  17. <div class="item">
  18.     <ul id="listALL">
  19.     </ul>
  20. </div>
  21.  
  22. <div class="main" id="main" >
  23.  
  24.     <audio id="audio" src=""></audio>
  25.     <div id="collect" title="收藏"></div>
  26.     <div id="list" title="列表"></div>
  27.     <div id="selection" title="循环播放"></div>
  28.     <div id="prev" title="上一首"></div>
  29.     <div id="play" title="播放"></div>
  30.     <div id="next" title="下一首"></div>
  31.     <div id="slince" title="静音"></div>
  32.     <div id="rise" title="加音量"></div>
  33.     <div id="minus" title="减音量"></div>
  34.  
  35. </div>
  36. <br>
  37.  
  38. <div class="progress" id="progress">
  39.     <span class="cTime time" id="cTime">00:00</span> <!-- 当前时间 -->
  40.     <meter value="0" max="100" id="meter" ></meter><!-- 进度条 -->
  41.     <span class="tTime time" id="tTime">00:00</span> <!-- 总的时间 -->
  42. </div>
  43.  
  44. <script src="./js/audio01.js"></script>
  45. </body>
  46. </html>

 下面CSS的页面

2023.3.25更新 #listALL   .firstMusic 样式 

  1. {
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. html,body{
  8.     height: 100%;
  9.     background-size:cover;
  10.     backdrop-filter: blur(100px);
  11. }
  12.  
  13. @keyframes totate {
  14.     0% {
  15.         transform: rotateZ(0);
  16.     }
  17.  
  18.     50% {
  19.         transform: rotateZ(180deg);
  20.     }
  21.     100% {
  22.         transform: rotateZ(360deg);
  23.     }
  24. }
  25. .main {
  26.     justify-content: space-between;
  27.     display: flex;
  28.     overflow: hidden;
  29.  
  30. }
  31.  
  32. #musicImg {
  33.     margin: 20px 650px;
  34.     animation: totate 30s linear infinite;
  35.     border-radius: 50%;
  36.     background-image: url("../img/bandaotiehe.jpg");
  37.     margin-bottom: 100px;
  38.     animation-play-state: paused;
  39.  
  40. }
  41. /*#musicImg:hover {
  42.     animation-play-state: paused;
  43. }*/
  44.  
  45. .item{
  46.  
  47. }
  48.  
  49.  
  50. .firstMusic{
  51.  
  52.     color: red;
  53. }
  54.  
  55.  
  56. #listALL{
  57.     position: absolute;
  58.     width: 350px;
  59.     display:none;
  60.     background-color: #363636;
  61.     top: 200px;
  62.     opacity: 0.6;
  63. }
  64.  
  65. .li{
  66.     color: whitesmoke;
  67.     height: 35px;
  68.     font-size: 25px;
  69. }
  70.  
  71.  
  72. div {
  73.     cursor: pointer;
  74.     /* float: left; */
  75.     margin: 10px auto;
  76.     text-align: center;
  77.  
  78. }
  79.  
  80. #musicName{
  81.     font-size: 40px;
  82.     margin-bottom: 80px;
  83. }
  84.  
  85.  
  86. #collect{
  87.     background: url("../img/icon_collect.png");
  88.     width: 40px;
  89.     height: 40px;
  90.     background-size: 100% 100%;
  91. }
  92.  
  93. #selection{
  94.     background: url("../img/xunhuanbofang.png");
  95.     width: 40px;
  96.     height: 40px;
  97.     background-size: 100% 100%;
  98. }
  99.  
  100. #list{
  101.     background: url("../img/24gl-playlistMusic.png");
  102.     width: 40px;
  103.     height: 40px;
  104.     background-size: 100% 100%;
  105. }
  106.  
  107. #play{
  108.     background: url(../img/bofang.png);
  109.     width: 40px;
  110.     height: 40px;
  111.     background-size: 100% 100%;
  112. }
  113.  
  114. #prev{
  115.     background: url("../img/shangyishoushangyige.png");
  116.     width: 40px;
  117.     height: 40px;
  118.     background-size: 100% 100%;
  119. }
  120.  
  121. #next{
  122.     background: url("../img/xiayigexiayishou.png");
  123.     width: 40px;
  124.     height: 40px;
  125.     background-size: 100% 100%;
  126. }
  127.  
  128. #slince{
  129.     background: url("../img/24gl-volumeMiddle.png");
  130.     width: 40px;
  131.     height: 40px;
  132.     background-size: 100% 100%;
  133. }
  134.  
  135. #rise{
  136.     background: url("../img/24gl-volumeHigh.png");
  137.     width: 40px;
  138.     height: 40px;
  139.     background-size: 100% 100%;
  140. }
  141. #minus{
  142.     background: url("../img/24gl-volumeLow.png");
  143.     width: 40px;
  144.     height: 40px;
  145.     background-size: 100% 100%;
  146. }
  147.  
  148.  
  149. #cTime {
  150.     /*float: left;*/
  151.     -webkit-touch-callout: none;
  152.     -webkit-user-select: none;
  153.     -khtml-user-select: none;
  154.     -moz-user-select: none;
  155.     -ms-user-select: none;
  156.     user-select: none;
  157.     font-size: 18px;
  158.  
  159.     width: 20px;
  160. }
  161.  
  162. #tTime {
  163.     /*float: right;*/
  164.     -webkit-touch-callout: none;
  165.     -webkit-user-select: none;
  166.     -khtml-user-select: none;
  167.     -moz-user-select: none;
  168.     -ms-user-select: none;
  169.     user-select: none;
  170.     font-size: 18px;
  171.     width:300px;
  172. }
  173.  
  174. #progress {
  175.     margin-left: 10px;
  176.     margin-right: 10px;
  177.     /*background-color: cyan;*/
  178. }
  179.  
  180.  
  181. #meter {
  182.     width: 720px;
  183.     height: 18px;
  184.     /*background: azure;
  185.     margin-bottom: ;*/
  186.  
  187. }

JS的DOM创建

  1. var audioDOM = document.getElementById("audio");
  2. var collectDOM = document.getElementById("collect");
  3. var selectionDOM = document.getElementById("selection");
  4. var prevDOM = document.getElementById("prev");
  5. var playDOM = document.getElementById("play");
  6. var nextDOM = document.getElementById("next");
  7. var slinceDOM = document.getElementById("slince");
  8. var listDOM = document.getElementById("list");
  9. var listALLDOM = document.getElementById("listALL");
  10. var musicNameDOM = document.getElementById("musicName")
  11. var musicImgDOM = document.getElementById("musicImg")
  12. var tTimeDOM = document.getElementById("tTime")
  13. var cTimeDOM = document.getElementById("cTime")
  14. var meterDOM = document.getElementById("meter")
  15. var bodyDOM = document.getElementById("body")
  16. var riseDOM = document.getElementById("rise")
  17. var minusDOM = document.getElementById("minus")

音乐列表

  1. var songs = [
  2.  
  3.     {
  4.         name: "周杰伦 - 半岛铁盒",
  5.         photo: "../img/bandaotiehe.jpg"
  6.     },
  7.     {
  8.         name: "周杰伦 - 外婆",
  9.         photo: "../img/waipo.jpg"
  10.     },
  11.     {
  12.         name: "周杰伦 - 完美主义",
  13.         photo: "../img/wanmeizhuyi.jpg"
  14.     },
  15.     {
  16.         name: "周杰伦 - 威廉古堡",
  17.         photo: "../img/weiliangubao.jpg"
  18.     },
  19.     {
  20.         name: "周杰伦 - 蜗牛",
  21.         photo: "../img/woniu.jpg"
  22.     },
  23.     {
  24.         name: "wake",
  25.         photo: "../img/wake.jpg"
  26.     },
  27.     {
  28.         name: "ceshi",
  29.         photo: "../img/ceshi.png"
  30.     }
  31. ]
  32. musicNameDOM.innerText = songs[0].name
  33. musicImgDOM.src = songs[0].photo

切换歌曲（上一首下一首）

首先创建两个变量记录当前歌曲的索引和歌曲的数量，给nextDOM创建事件监听，当点击触发 next()，因为我写了一个随机播放的功能，所以要考虑如果当前是随机播放的模式，，点击下一首也要随机播放，所以要给userChangeSong传一个随机数，用Math方法。

2023.3.25更新 添加每一次手动切换歌曲时重置进度条已加载的长度。

2023.3.28更新 将next方法里的给changeSong传值改为1.1 因为这样的话在点击列表播放里的索引位置为1的歌曲就不会冲突。

Math.floor(Math.random() * songs.length)
  1. var currentSongIndex = 0;
  2. var songsListLength = songs.length;
  3. audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3'
  4.  
  5. nextDOM.addEventListener('click', next)
  6.  
  7. function next() {
  8.     meterDOM.setAttribute('value',0)
  9.     if (selectionDOM.title == "随机播放") {
  10.         changeSong(Math.floor(Math.random() * songs.length))
  11.     
  12.     } else {
  13.         changeSong(1.1)
  14.     }
  15. }
  16.  
  17. prevDOM.addEventListener('click', prev)
  18.  
  19. function prev() {
  20.     meterDOM.setAttribute('value',0)
  21.     if (selectionDOM.title == "随机播放") {
  22.         changeSong(Math.floor(Math.random() * songs.length))
  23.     
  24.     } else {
  25.         changeSong(-1.1)
  26.     }
  27. }

方法userChangeSong的代码 2023.3.28废除 因为跟changeSong方法重复

  1. function userChangeSong(userNum) {
  2.     currentSongIndex = userNum;
  3.     audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3';
  4.     audioDOM.play()
  5.  
  6.     for (let j = 0; j < selectDOM.children.length; j++) {
  7.         selectDOM.children[j].classList.remove('firstMusic');
  8.     }
  9.  
  10.     selectDOM.children[currentSongIndex].classList.add('firstMusic');
  11.  
  12.     playDOM.style.backgroundImage = 'url("./img/zanting.png")';
  13.     musicNameDOM.innerText = songs[currentSongIndex].name;
  14.     musicImgDOM.src = songs[currentSongIndex].photo;
  15.     bodyDOM.background = ".img/" + songs[currentSongIndex].photo;
  16.     musicImgDOM.style.animationPlayState = "running"
  17.  
  18. }

changeSong的方法 

2023.3.28 更新现在全局使用changSong方法 上面的userChangeSong废弃。

将从next和prev得到1.1和-1.1转换为整数类型，以防出错。

  1. function changeSong(num) {
  2.  
  3.     if (num == 1.1 || num == -1.1){
  4.         num = parseInt(num);
  5.         currentSongIndex = (currentSongIndex + num + songsListLength) % songsListLength;
  6.     }else {
  7.         currentSongIndex = num;
  8.     }
  9.  
  10.     audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3';
  11.  
  12.     for (let j = 0; j < selectDOM.children.length; j++) {
  13.         selectDOM.children[j].classList.remove('nowMusic');
  14.     }
  15.  
  16.     selectDOM.children[currentSongIndex].classList.add('nowMusic');
  17.  
  18.     audioDOM.play()
  19.     playDOM.style.backgroundImage = 'url("./img/zanting.png")';
  20.     musicNameDOM.innerText = songs[currentSongIndex].name;
  21.     musicImgDOM.src = songs[currentSongIndex].photo;
  22.     bodyDOM.background = ".img/" + songs[currentSongIndex].photo;
  23.     musicImgDOM.style.animationPlayState = "running"
  24.  
  25. }

切换播放方式（单曲循环随机播放）,具体实现下文我会通过进度条的判断来实现音乐循环随机播放。

  1.  
  2. selectionDOM.addEventListener('click', playModeSelection)
  3.  
  4. function playModeSelection() {
  5.  
  6.     if (selectionDOM.title == "循环播放") {
  7.         selectionDOM.style.backgroundImage = 'url("../img/danquxunhuan.png")'
  8.         selectionDOM.title = "单曲播放"
  9.         audioDOM.loop = true;
  10.  
  11.     } else if (selectionDOM.title == "单曲播放") {
  12.         selectionDOM.style.backgroundImage = 'url("../img/suijibofang.png")'
  13.         selectionDOM.title = "随机播放";
  14.         audioDOM.loop = false;
  15.  
  16.     } else if (selectionDOM.title == "随机播放") {
  17.         selectionDOM.style.backgroundImage = 'url("../img/xunhuanbofang.png")'
  18.         selectionDOM.title = "循环播放";
  19.         audioDOM.loop = false;
  20.  
  21.     }
  22. }

进度条的实现，点击进度条会跳转到指定的时间。给进度条一个计时器放到function play()里（在下文播放暂停的代码区），每隔一秒判断一次当前歌曲是否播放结束。

  1. meterDOM.onclick = setProgress;
  2.  
  3. function setProgress(e) {
  4.     var offsetLeft = (e.clientX - meterDOM.offsetLeft) / meterDOM.offsetWidth;
  5.     audioDOM.currentTime = offsetLeft * audioDOM.duration;
  6.     meterDOM.setAttribute('value', offsetLeft * 100)
  7. }
  8.  
  9.  
  10. function showProgress() {
  11.  
  12.     if (audioDOM.ended && selectionDOM.title == "随机播放") {
  13.         console.log(Math.floor(Math.random() * songs.length))
  14.         changeSong(Math.floor(Math.random() * songs.length))
  15.     
  16.     } else if (audioDOM.ended && selectionDOM.title == "循环播放") {
  17.         changeSong(1)
  18.     }
  19.  
  20.     meterDOM.setAttribute('value', audioDOM.currentTime / audioDOM.duration * 100);
  21. }
  22.

音乐的时间。

  1. /*歌曲时间
  2. loadedmetadata:
  3. 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
  4. 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。
  6. timeupdate :
  7. 事件在音频/视频（audio/video）的播放位置发生改变时触发。
  10. duration:
  11. 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s
  12. */
  13.  
  14.  
  15. audioDOM.addEventListener("loadedmetadata", function (event) {
  16.  
  17.     if (audioDOM.duration % 60 < 10) {
  18.         tTimeDOM.innerHTML = parseInt(audioDOM.duration / 60) + ":0" + parseInt(audioDOM.duration % 60)
  19.  
  20.     } else {
  21.         tTimeDOM.innerHTML = parseInt(audioDOM.duration / 60) + ":" + parseInt(audioDOM.duration % 60)
  22.     }
  23.  
  24. });
  25.  
  26. audioDOM.addEventListener("timeupdate", function (event) {
  27.  
  28.     if (audioDOM.currentTime < 10) {
  29.         cTimeDOM.innerHTML = "0:0" + Math.floor(audioDOM.currentTime);
  30.  
  31.     } else if (audioDOM.currentTime < 60) {
  32.         cTimeDOM.innerHTML = "0:" + Math.floor(audioDOM.currentTime);
  33.  
  34.     } else {
  35.         var minet = parseInt(audioDOM.currentTime / 60);
  36.         var sec = audioDOM.currentTime - minet * 60;
  37.  
  38.         if (sec < 10) {
  39.             cTimeDOM.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
  40.         
  41.         } else {
  42.             cTimeDOM.innerHTML = "0" + minet + ":" + parseInt(sec);
  43.         }
  44.     }
  45. });

音乐暂停和播放，里面添加了一个计时器用来实现进度实时变化。

  1. /* 暂停 开始*/
  2.  
  3. var timer = null;
  4. playDOM.addEventListener('click', play)
  5.  
  6. function play() {
  7.  
  8.     if (audioDOM.paused) {
  9.         audioDOM.play()
  10.         timer = setInterval(showProgress, 1000);
  11.         playDOM.style.backgroundImage = 'url("./img/zanting.png")'
  12.         playDOM.setAttribute("title", "暂停")
  13.         musicImgDOM.style.animationPlayState = "running"
  14.  
  15.     } else {
  16.         audioDOM.pause()
  17.         playDOM.title = "播放"
  18.         playDOM.style.backgroundImage = 'url("./img/bofang.png")'
  19.         musicImgDOM.style.animationPlayState = "paused"
  20.  
  21.         clearInterval(timer)
  22.     }
  23. }

音乐音量的控制

  1. /* 控制音量大小 */
  2. slinceDOM.addEventListener("click", slince)
  3.  
  4. function slince() {
  5.  
  6.     if (slinceDOM.title == "静音") {
  7.         audioDOM.muted = true
  8.         slinceDOM.title = "非静音"
  9.         slinceDOM.style.backgroundImage = 'url("../img/24gl-volumeDisable.png")'
  10.  
  11.     } else {
  12.         audioDOM.muted = false
  13.         slinceDOM.title = '静音'
  14.         slinceDOM.style.backgroundImage = 'url("../img/24gl-volumeMiddle.png")'
  15.     }
  16. }
  17.  
  18. /*每点击一下，增加10%，如果超过最大就为1，超过最小就为0*/
  19. riseDOM.addEventListener('click', function () {
  20.     changeVol(0.1)
  21. })
  22. minusDOM.addEventListener('click', function () {
  23.     changeVol(-0.1)
  24. })
  25.  
  26. function changeVol(n) {
  27.  
  28.     if (audioDOM.volume + n < 0) {
  29.         audioDOM.volume = 0;
  30.  
  31.     } else if (audioDOM.volume + n <= 1.0) {
  32.         audioDOM.volume = audioDOM.volume + n;
  33.  
  34.     } else {
  35.         audioDOM.volume = 1.0
  36.     }
  37. }

播放列表的动态实现

2023.3.25更新 添加每一次手动点击列表切换歌曲时重置进度条已加载的长度，添加一些li的样式。

  1. /*播放列表*/
  2. listDOM.addEventListener('click', showList)
  3.  
  4. function showList() {
  5.  
  6.     if (listDOM.title === "列表") {
  7.         listALLDOM.style.display = "block";
  8.         listDOM.title = "关闭播放列表";
  9.  
  10.     } else {
  11.         listALLDOM.style.display = "none";
  12.         listDOM.title = "列表";
  13.     }
  14. }
  15.  
  16.  
  17. /*
  18. querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。
  19. insertBefore() 方法在现有子节点之前插入子节点。
  21. */
  22.  
  23. var selectDOM = document.querySelector('.item').querySelector('ul');
  24.  
  25. for (var i = 0; i < songs.length; i++) {
  26.     var li = document.createElement('li');
  27.     li.innerHTML = songs[i].name;
  28.     li.title = songs[i].name;
  29.     li.style.height = "50px"
  30.     li.style.fontSize = "32px"
  31.     selectDOM.insertBefore(li, selectDOM.children[i]);
  32. }
  33.  
  34. selectDOM.children[0].classList.add('firstMusic');
  35.  
  36. for (var i = 0; i < selectDOM.children.length; i++) {
  37.  
  38.     selectDOM.children[i].index = i;
  39.     selectDOM.children[i].addEventListener('click', function (e) {
  40.  
  41.         for (var j = 0; j < selectDOM.children.length; j++) {
  42.             selectDOM.children[j].classList.remove('firstMusic');
  43.         }
  44.  
  45.         this.classList.add('firstMusic');
  46.  
  47.         meterDOM.setAttribute('value',0)
  48.         changeSong(e.target.index);
  49.     })
  50. }

到这里就结束了，后续添加更多内容。

（第一次写博客，写的不好请谅解）。

完整JS代码

  1. var audioDOM = document.getElementById("audio");
  2. var collectDOM = document.getElementById("collect");
  3. var selectionDOM = document.getElementById("selection");
  4. var prevDOM = document.getElementById("prev");
  5. var playDOM = document.getElementById("play");
  6. var nextDOM = document.getElementById("next");
  7. var slinceDOM = document.getElementById("slince");
  8. var listDOM = document.getElementById("list");
  9. var listALLDOM = document.getElementById("listALL");
  10. var musicNameDOM = document.getElementById("musicName")
  11. var musicImgDOM = document.getElementById("musicImg")
  12. var tTimeDOM = document.getElementById("tTime")
  13. var cTimeDOM = document.getElementById("cTime")
  14. var meterDOM = document.getElementById("meter")
  15. var bodyDOM = document.getElementById("body")
  16. var riseDOM = document.getElementById("rise")
  17. var minusDOM = document.getElementById("minus")
  18.  
  19.  
  20. /*音乐*/
  21. var songs = [
  22.  
  23.     {
  24.         name: "周杰伦 - 半岛铁盒",
  25.         photo: "../img/bandaotiehe.jpg"
  26.     },
  27.     {
  28.         name: "周杰伦 - 外婆",
  29.         photo: "../img/waipo.jpg"
  30.     },
  31.     {
  32.         name: "周杰伦 - 完美主义",
  33.         photo: "../img/wanmeizhuyi.jpg"
  34.     },
  35.     {
  36.         name: "周杰伦 - 威廉古堡",
  37.         photo: "../img/weiliangubao.jpg"
  38.     },
  39.     {
  40.         name: "周杰伦 - 蜗牛",
  41.         photo: "../img/woniu.jpg"
  42.     },
  43.     {
  44.         name: "wake",
  45.         photo: "../img/wake.jpg"
  46.     },
  47.     {
  48.         name: "ceshi",
  49.         photo: "../img/ceshi.png"
  50.     }
  51. ]
  52. musicNameDOM.innerText = songs[0].name
  53. musicImgDOM.src = songs[0].photo
  54.  
  55.  
  56.  
  57.  
  58. /*收藏*/
  59. collectDOM.addEventListener('click', changeCollect)
  60.  
  61. function changeCollect() {
  62.     if (collectDOM.title == "收藏") {
  63.         collectDOM.style.backgroundImage = 'url("../img/shoucang.png")';
  64.         collectDOM.setAttribute("title", "取消收藏");
  65.  
  66.     } else {
  67.         collectDOM.style.backgroundImage = 'url("../img/icon_collect.png")';
  68.         collectDOM.title = "收藏"
  69.  
  70.     }
  71. }
  72.  
  73.  
  74. /*播放方式*/
  75.  
  76.  
  77.  
  78.  
  79. selectionDOM.addEventListener('click', playModeSelection)
  80.  
  81. function playModeSelection() {
  82.  
  83.     if (selectionDOM.title == "循环播放") {
  84.         selectionDOM.style.backgroundImage = 'url("../img/danquxunhuan.png")'
  85.         selectionDOM.title = "单曲播放"
  86.         audioDOM.loop = true;
  87.  
  88.     } else if (selectionDOM.title == "单曲播放") {
  89.         selectionDOM.style.backgroundImage = 'url("../img/suijibofang.png")'
  90.         selectionDOM.title = "随机播放";
  91.         audioDOM.loop = false;
  92.  
  93.     } else if (selectionDOM.title == "随机播放") {
  94.         selectionDOM.style.backgroundImage = 'url("../img/xunhuanbofang.png")'
  95.         selectionDOM.title = "循环播放";
  96.         audioDOM.loop = false;
  97.  
  98.     }
  99. }
  100.  
  101.  
  102. /*播放 上一首播放 下一首播放*/
  103. var currentSongIndex = 0;
  104. var songsListLength = songs.length;
  105. audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3'
  106.  
  107. nextDOM.addEventListener('click', next)
  108.  
  109. function next() {
  110.     meterDOM.setAttribute('value',0)
  111.     if (selectionDOM.title == "随机播放") {
  112.         changeSong(Math.floor(Math.random() * songs.length))
  113.     } else {
  114.         changeSong(1.1)
  115.     }
  116. }
  117.  
  118. prevDOM.addEventListener('click', prev)
  119.  
  120. function prev() {
  121.     meterDOM.setAttribute('value',0)
  122.     if (selectionDOM.title == "随机播放") {
  123.         changeSong(Math.floor(Math.random() * songs.length))
  124.     } else {
  125.         changeSong(-1.1)
  126.     }
  127. }
  128.  
  129.  
  130. /* 暂停 开始*/
  131.  
  132. var timer = null;
  133.  
  134. playDOM.addEventListener('click', play)
  135.  
  136. function play() {
  137.  
  138.     if (audioDOM.paused) {
  139.         audioDOM.play()
  140.  
  141.         timer = setInterval(showProgress, 1000);
  142.         playDOM.style.backgroundImage = 'url("./img/zanting.png")'
  143.         playDOM.setAttribute("title", "暂停")
  144.         musicImgDOM.style.animationPlayState = "running"
  145.  
  146.     } else {
  147.         audioDOM.pause()
  148.         playDOM.title = "播放"
  149.         playDOM.style.backgroundImage = 'url("./img/bofang.png")'
  150.         musicImgDOM.style.animationPlayState = "paused"
  151.  
  152.         clearInterval(timers)
  153.  
  154.     }
  155. }
  156.  
  157. meterDOM.onclick = setProgress;
  158.  
  159.  
  160. function setProgress(e) {
  161.     var offsetLeft = (e.clientX - meterDOM.offsetLeft) / meterDOM.offsetWidth;
  162.     audioDOM.currentTime = offsetLeft * audioDOM.duration;
  163.     meterDOM.setAttribute('value', offsetLeft * 100)
  164.  
  165. }
  166.  
  167. /*function changeModeMusic() {
  169.     if (audioDOM.ended && selectionDOM.title == "随机播放") {
  170.         console.log(Math.floor(Math.random() * songs.length))
  171.         changeSong(Math.floor(Math.random() * songs.length))
  172.     } else if (audioDOM.ended && selectionDOM.title == "循环播放") {
  173.         changeSong(1)
  174.     }
  176. }*/
  177.  
  178.  
  179. function showProgress() {
  180.  
  181.     if (audioDOM.ended && selectionDOM.title == "随机播放") {
  182.         console.log(Math.floor(Math.random() * songs.length))
  183.         changeSong(Math.floor(Math.random() * songs.length))
  184.     } else if (audioDOM.ended && selectionDOM.title == "循环播放") {
  185.         changeSong(1)
  186.     }
  187.  
  188.     meterDOM.setAttribute('value', audioDOM.currentTime / audioDOM.duration * 100);
  189. }
  190.  
  191.  
  192. /*歌曲时间
  193. loadedmetadata:
  194. 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。
  195. 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。
  197. timeupdate :
  198. 事件在音频/视频（audio/video）的播放位置发生改变时触发。
  201. duration:
  202. 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s
  203. */
  204.  
  205.  
  206. audioDOM.addEventListener("loadedmetadata", function (event) {
  207.     if (audioDOM.duration % 60 < 10) {
  208.         tTimeDOM.innerHTML = parseInt(audioDOM.duration / 60) + ":0" + parseInt(audioDOM.duration % 60)
  209.  
  210.     } else {
  211.         tTimeDOM.innerHTML = parseInt(audioDOM.duration / 60) + ":" + parseInt(audioDOM.duration % 60)
  212.     }
  213. });
  214.  
  215. audioDOM.addEventListener("timeupdate", function (event) {
  216.  
  217.  
  218.     if (audioDOM.currentTime < 10) {
  219.         cTimeDOM.innerHTML = "0:0" + Math.floor(audioDOM.currentTime);
  220.  
  221.     } else if (audioDOM.currentTime < 60) {
  222.         cTimeDOM.innerHTML = "0:" + Math.floor(audioDOM.currentTime);
  223.  
  224.     } else {
  225.         var minet = parseInt(audioDOM.currentTime / 60);
  226.         var sec = audioDOM.currentTime - minet * 60;
  227.  
  228.         if (sec < 10) {
  229.             cTimeDOM.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
  230.  
  231.         } else {
  232.  
  233.             cTimeDOM.innerHTML = "0" + minet + ":" + parseInt(sec);
  234.         }
  235.     }
  236. });
  237.  
  238.  
  239. /*进度条*/
  240.  
  241.  
  242. /* 控制音量大小 */
  243. slinceDOM.addEventListener("click", slince)
  244.  
  245. function slince() {
  246.     if (slinceDOM.title == "静音") {
  247.         audioDOM.muted = true
  248.         slinceDOM.title = "非静音"
  249.         slinceDOM.style.backgroundImage = 'url("../img/24gl-volumeDisable.png")'
  250.  
  251.  
  252.     } else {
  253.         audioDOM.muted = false
  254.         slinceDOM.title = '静音'
  255.         slinceDOM.style.backgroundImage = 'url("../img/24gl-volumeMiddle.png")'
  256.     }
  257. }
  258.  
  259. riseDOM.addEventListener('click', function () {
  260.     changeVol(0.1)
  261. })
  262. minusDOM.addEventListener('click', function () {
  263.     changeVol(-0.1)
  264. })
  265.  
  266. function changeVol(n) {
  267.     if (audioDOM.volume + n < 0) {
  268.         audioDOM.volume = 0;
  269.     } else if (audioDOM.volume + n <= 1.0) {
  270.         audioDOM.volume = audioDOM.volume + n;
  271.     } else {
  272.         audioDOM.volume = 1.0
  273.     }
  274. }
  275.  
  276.  
  277. /*播放列表*/
  278. listDOM.addEventListener('click', showList)
  279.  
  280. function showList() {
  281.     if (listDOM.title === "列表") {
  282.         listALLDOM.style.display = "block";
  283.         listDOM.title = "关闭播放列表";
  284.  
  285.  
  286.     } else {
  287.         listALLDOM.style.display = "none";
  288.         listDOM.title = "列表";
  289.     }
  290.  
  291. }
  292.  
  293.  
  294. /*
  295. querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。
  296. insertBefore() 方法在现有子节点之前插入子节点。
  298. */
  299.  
  300. var selectDOM = document.querySelector('.item').querySelector('ul');
  301. var li1 = document.createElement('li');
  302.  
  303. for (var i = 0; i < songs.length; i++) {
  304.     var li = document.createElement('li');
  305.     li.innerHTML = songs[i].name;
  306.     li.title = songs[i].name;
  307.     li.style.height = "50px"
  308.     li.style.fontSize = "32px"
  309.     selectDOM.insertBefore(li, selectDOM.children[i]);
  310. }
  311.  
  312. selectDOM.children[0].classList.add('nowMusic');
  313.  
  314. for (var i = 0; i < selectDOM.children.length; i++) {
  315.  
  316.     selectDOM.children[i].index = i;
  317.     selectDOM.children[i].addEventListener('click', function (e) {
  318.  
  319.         /*可写可不写？？？*/
  320. /*        for (var j = 0; j < selectDOM.children.length; j++) {
  321.             selectDOM.children[j].classList.remove('nowMusic');
  322.         }*/
  323.  
  324.         this.classList.add('nowMusic');
  325.  
  326.         meterDOM.setAttribute('value',0)
  327.         console.log(e.target.index)
  328.         changeSong(e.target.index);
  329.         playDOM.title = "暂停";
  330.  
  331.     })
  332. }
  333.  
  334.  
  335.  
  336. /*切换歌曲*/
  337. function changeSong(num) {
  338.  
  339.     if (num == 1.1 || num == -1.1){
  340.         num = parseInt(num);
  341.         currentSongIndex = (currentSongIndex + num + songsListLength) % songsListLength;
  342.     }else {
  343.         currentSongIndex = num;
  344.     }
  345.  
  346.     audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3';
  347.  
  348.     for (let j = 0; j < selectDOM.children.length; j++) {
  349.         selectDOM.children[j].classList.remove('nowMusic');
  350.     }
  351.  
  352.     selectDOM.children[currentSongIndex].classList.add('nowMusic');
  353.  
  354.     audioDOM.play()
  355.     playDOM.style.backgroundImage = 'url("./img/zanting.png")';
  356.     musicNameDOM.innerText = songs[currentSongIndex].name;
  357.     musicImgDOM.src = songs[currentSongIndex].photo;
  358.     bodyDOM.background = ".img/" + songs[currentSongIndex].photo;
  359.     musicImgDOM.style.animationPlayState = "running"
  360.  
  361. }
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375.  
  376.  
  377.  
  378.  
  379.  
  380.  
  381.  
  382.  
  383.  
  384. /*
  385. function changeSong(userNum) {
  388.     if (userNum == 1.0 || userNum == -1.0){
  389.         currentSongIndex = (currentSongIndex + num + songsListLength) % songsListLength;
  390.     }else {
  391.         currentSongIndex = userNum;
  392.     }
  396.     audioDOM.src = './mp3/' + songs[currentSongIndex].name + '.mp3';
  397.     audioDOM.play()
  399.     for (let j = 0; j < selectDOM.children.length; j++) {
  400.         selectDOM.children[j].classList.remove('nowMusic');
  401.     }
  403.     selectDOM.children[currentSongIndex].classList.add('nowMusic');
  405.     playDOM.style.backgroundImage = 'url("./img/zanting.png")';
  406.     musicNameDOM.innerText = songs[currentSongIndex].name;
  407.     musicImgDOM.src = songs[currentSongIndex].photo;
  408.     bodyDOM.background = ".img/" + songs[currentSongIndex].photo;
  409.     musicImgDOM.style.animationPlayState = "running"
  411. }*/

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/247553
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号