devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

纯HTML+CSS+JS制作音乐播放器（附源码）_音乐播放器页面代码

作者：凡人多烦事01 | 2024-03-16 06:14:56

赞

踩

音乐播放器页面代码

由于课程要求，不使用任何框架（诸如jquery之类的）来实现一个音乐播放器，我查找了半天没能找到自己心仪的，索性便自己写了。写好之后发出来分享一下。

效果截图

话不多说，首先放图。

 

 

 播放列表做的属实难看了点，但是我想不到什么优化的好点子，又嫌麻烦不想给他加上编曲人之类的信息，索性就这样放着了。如果有什么优化的点子可以私信一起探讨一下。

页面布局灵感来自于qq音乐。

实现功能

  1. 进度条功能

  2. 时间功能

  3. 播放/暂停功能

  4. 上一首/下一首

  5. 切换播放模式功能

  6. 音量调节功能

  7. 播放MV功能

  8. 倍速功能

  9. 音乐列表功能

实现逻辑

  • 进度条功能。

进度条会随着音乐的播放逐渐向后移动，这是通过audio的timeupdate事件来实现的，每时每刻都会重新计算进度条长度。

  1. // 更新进度条
  2. audio.addEventListener('timeupdate', updateProgress); // 监听音频播放时间并更新进度条
  3. function updateProgress() {
  4.     var value = audio.currentTime / audio.duration;
  5.     progress.style.width = value * 100 + '%';
  6.     playedTime.innerText = transTime(audio.currentTime);
  7. }

点击进度条可以跳转至指定地方播放，这是通过所有DOM元素都有的事件mousedown来实现的。

  1. // 点击进度条跳到指定点播放
  2. progressTotal.addEventListener('mousedown', function (event) {
  3.     // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
  4.     if (!audio.paused || audio.currentTime != 0) {
  5.         var pgsWidth = parseFloat(window.getComputedStyle(progressTotal, null).width.replace('px', ''));
  6.         var rate = event.offsetX / pgsWidth;
  7.         audio.currentTime = audio.duration * rate;
  8.         updateProgress(audio);
  9.     }
  10. });
  • 时间功能

更新进度条的同时左下角时间会更新，这是通过这一行代码来实现的：

playedTime.innerText = transTime(audio.currentTime);
  • 播放/暂停功能

这个功能实现起来很简单，检测当前音频播放状态并作出相应反应即可。

  1. // 暂停/播放功能实现
  2. pause.onclick = function (e) {
  3.     if (audio.paused) {
  4.         audio.play();
  5.         rotateRecord();
  6.         pause.classList.remove('icon-play');
  7.         pause.classList.add('icon-pause');
  8.     } else {
  9.         audio.pause();
  10.         rotateRecordStop();
  11.         pause.classList.remove('icon-pause');
  12.         pause.classList.add('icon-play');
  13.     }
  14. }
  • 上一首/下一首

对相应按钮添加点击事件，点击上一首按钮时改变当前播放音乐的序号，并且重新载入该音乐。下一首功能也是如此实现。

  1. // 上一首
  2. skipForward.addEventListener('click', function (event) {
  3.     musicId = musicId - 1;
  4.     if (musicId < 0) {
  5.         musicId = 3;
  6.     }
  7.     initAndPlay();
  8. });
  9.  
  10. // 下一首
  11. skipBackward.addEventListener('click', function (event) {
  12.     musicId = musicId + 1;
  13.     if (musicId > 3) {
  14.         musicId = 0;
  15.     }
  16.     initAndPlay();
  17. });
  • 切换播放模式功能

有三种内置的播放模式：单曲循环，随机播放，列表循环。每次点击播放模式按钮后切换至下一种播放模式。

  1. // 播放模式设置
  2. var modeId = 1;
  3. mode.addEventListener('click', function (event) {
  4.     modeId = modeId + 1;
  5.     if (modeId > 3) {
  6.         modeId = 1;
  7.     }
  8.     mode.style.backgroundImage = "url('img/mode" + modeId.toString() + ".png')";
  9. });
  10.  
  11. audio.onended = function () {
  12.     if (modeId == 2) {
  13.         // 跳转至下一首歌
  14.         musicId = (musicId + 1) % 4;
  15.     }
  16.     else if (modeId == 3) {
  17.         // 随机生成下一首歌的序号
  18.         var oldId = musicId;
  19.         while (true) {
  20.             musicId = Math.floor(Math.random() * 3) + 0;
  21.             if (musicId != oldId) { break; }
  22.         }
  23.     }
  24.     initAndPlay();
  25. }
  • 音量调节功能

实时获取滑块当前的长度并且更新音频音量，用到的还是audio的timeupdate函数。同时点击音量调节按钮之后可以设置静音，使用click事件即可实现。

  1. // 滑块调节音量
  2. audio.addEventListener('timeupdate', updateVolumn);
  3. function updateVolumn() {
  4.     audio.volume = volumeTogger.value / 70;
  5. }
  6.  
  7. // 点击音量调节设置静音
  8. volume.addEventListener('click', setNoVolumn);
  9. function setNoVolumn() {
  10.     if (volumeTogger.value == 0) {
  11.         if (lastVolumn == 0) {
  12.             lastVolumn = 70;
  13.         }
  14.         volumeTogger.value = lastVolumn;
  15.         volume.style.backgroundImage = "url('img/音量.png')";
  16.     }
  17.     else {
  18.         lastVolumn = volumeTogger.value;
  19.         volumeTogger.value = 0;
  20.         volume.style.backgroundImage = "url('img/静音.png')";
  21.     }
  22. }
  • 播放MV功能

此处我考虑了要将MV放置在新窗口还是旧的窗口，最终还是决定新开一个窗口来播放MV。那么这就涉及到窗口之间的传值。使用window.sessionStorage来实现。

  1. // MV功能
  2. MV.addEventListener('click', function (event) {
  3.     // 向新窗口传值
  4.     var storage_list = window.sessionStorage;
  5.     storage_list['musicId'] = musicId;
  6.     window.open("video.html");
  7. });

此处放上新窗口的body部分代码：

  1. <body>
  2.     <video controls width="250">
  3.         <source id="source" src="mp4/video0.mp4" type="video/mp4">
  4.     </video>
  5.     </video>
  6.     <script>
  7.         //获取前面的存储的musicId值
  8.         var storage = window.sessionStorage;
  9.         var cur_str = storage.musicId;
  10.         document.getElementById('source').src = "mp4/video" + cur_str.toString() + ".mp4";
  11.     </script>
  12. </body>

由于该部分代码量很小，并且不是项目主体部分，因此css和javascript均使用内嵌式来实现。

最终效果：点击不同音乐的MV按钮，可以打开相应的MV视频界面。

  • 倍速功能

一共内置了四种倍速：1.0X，1.5X，2.0X，0.5X。每次点击按钮后会切换到下一种倍速，并改变其UI。由于此处的倍速种类较少，直接使用if else来实现这一功能。如果倍速种类较多，则需要使用int 变量与string变量之间的相互转化来实现。

  1. // 倍速功能（这里直接暴力解决了）
  2. speed.addEventListener('click', function (event) {
  3.     var speedText = speed.innerText;
  4.     if (speedText == "1.0X") {
  5.         speed.innerText = "1.5X";
  6.         audio.playbackRate = 1.5;
  7.     }
  8.     else if (speedText == "1.5X") {
  9.         speed.innerText = "2.0X";
  10.         audio.playbackRate = 2.0;
  11.     }
  12.     else if (speedText == "2.0X") {
  13.         speed.innerText = "0.5X";
  14.         audio.playbackRate = 0.5;
  15.     }
  16.     else if (speedText == "0.5X") {
  17.         speed.innerText = "1.0X";
  18.         audio.playbackRate = 1.0;
  19.     }
  20. });
  • 音乐列表功能

首先需要在界面右方固定音乐列表面板：

  1. <div class="music-list" id="music-list">
  2.         <div class="music-list-container">
  3.             <div class="music-list-title">播放队列</div>
  4.             <hr class="line">
  5.             <div class="all-list">
  6.                 <div id="music0">洛春赋</div>
  7.                 <div id="music1">Yesterday</div>
  8.                 <div id="music2">江南烟雨色</div>
  9.                 <div id="music3">Vision pt.II</div>
  10.             </div>
  11.         </div>
  12.     </div>

实现的效果如下图：

效果实在不算好看，但我也没想到什么能够让他变得美观的优化方法。

对其加上css滑动动画：

  1. @keyframes hideAni {
  2.     from {
  3.         transform: translateX(0%);
  4.     }
  5.  
  6.     to {
  7.         transform: translateX(100%);
  8.     }
  9. }
  10.  
  11. @keyframes showAni {
  12.     from {
  13.         transform: translateX(100%);
  14.     }
  15.  
  16.     to {
  17.         transform: translateX(0%);
  18.     }
  19. }

最后在js中加入打开面板和关闭面板的逻辑，实现起来很简单，使用click事件即可。

  1. // 点击列表展开音乐列表
  2. list.addEventListener('click', function (event) {
  3.     musicList.classList.remove("list-card-hide");
  4.     musicList.classList.add("list-card-show");
  5.     musicList.style.display = "flex";
  6.     closeList.style.display = "flex";
  7.     closeList.addEventListener('click', closeListBoard);
  8. });
  9.  
  10. // 点击关闭面板关闭音乐列表
  11. function closeListBoard() {
  12.     musicList.classList.remove("list-card-show");
  13.     musicList.classList.add("list-card-hide");
  14.     closeList.style.display = "none";
  15. }

打开列表面板时，左侧实际上覆盖了一个透明的面板，由此来实现点击空白部分关闭面板的功能。需要注意的是关闭面板后需要将该透明面板的display设置为none，否则会遮蔽下层按钮的点击事件。

 写在最后

代码中使用到的包括图片、视频、音频等所有素材仅为展示使用，相互之间没有任何关联，如有需要可自行更改。

github地址：GitHub - falysha/musicPlayer: 原生HTML+CSS+JS，未使用任何框架

 

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

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

  

闽ICP备14008679号