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

网站音乐播放器源码_网页音乐播放器源码

作者：我家小花儿 | 2024-03-16 06:24:49

赞

踩

网页音乐播放器源码

一起白嫖，简要快速的建立一个网站音乐播放器，在我研究一番之后直接给大家总结出结果

还未完全美化好的案例图

一共四个文件

index.html 用于写页面

data.js  音乐地址声明

app.js 主要js操作，事件绑定等

style.css  样式表

上述的四个文件名可随意更改 看自己喜好

以及对应音乐和图片等放在对应路径下，也可以自己改，琢磨下就能看懂

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>psh</title>
  7.     <link rel="stylesheet" type="text/css" href="../static/css/vide.css">
  8. <body>
  9. <audio src="" id="audio-source"></audio>
  10. <section class="home-section">
  11.     <div class="carousel">
  12.         <img src="../static/img/xx1.jpg" class="active" alt="">
  13.         <img src="../static/img/xx2.jpg" alt="">
  14.         <img src="../static/img/xx3.jpg" alt="">
  15.         <img src="../static/img/xx4.jpg" alt="">
  16.         <img src="../static/img/xx5.jpg" alt="">
  17.     </div>
  18.     <h1 class="heading">最近播放</h1>
  19.     <div class="playlists-group">
  20.         <div class="playlist-card">
  21.             <img src="../static/img/xx2.jpg" class="playlist-card-img" alt="">
  22.             <p class="playlist-card-name">华语热歌</p>
  23.         </div>
  24.         <div class="playlist-card">
  25.             <img src="../static/img/xx2.jpg" class="playlist-card-img" alt="">
  26.             <p class="playlist-card-name">古风戏腔</p>
  27.         </div>
  28.         //+3
  29.     </div>
  30.     <h1 class="heading">根据你的喜好</h1>
  31.     <div class="playlists-group">
  32.         <div class="playlist-card">
  33.             <img src="../static/img/xx2.jpg" class="playlist-card-img" alt="">
  34.             <p class="playlist-card-name">失恋回忆</p>
  35.         </div>
  36.         <div class="playlist-card">
  37.             <img src="../static/img/xx2.jpg" class="playlist-card-img" alt="">
  38.             <p class="playlist-card-name">经典老歌</p>
  39.         </div>
  40.         //+3
  41.     </div>
  42. </section>
  43.  
  44. <section class="music-player-section ">
  45.  
  46.     <img src="../static/img/xx1.jpg" width="50px" class="back-btn icon hide" alt="">
  47.     <img src="../static/img/xx5.jpg" width="50px" class="nav-btn icon hide" alt="">
  48.  
  49.     <h1 class="current-song-name">song 1</h1>
  50.     <p class="artist-name hide">artist 1</p>
  51.  
  52.     <img src="../static/img/xx5.jpg" class="cover hide" alt="">
  53.  
  54.     <div class="seek-bar-container">
  55.         <input type="range" class="music-seek-bar" value="0">
  56.         <p class="current-time hide">00 : 00</p>
  57.         <p class="duration hide">00 : 00</p>
  58.     </div>
  59.  
  60.     <div class="controls">
  61.         <span class="fas fa-redo"></span>
  62.         <div class="main">
  63.             <i class="fas fa-backward active"></i>
  64.             <i class="fas fa-play active"></i>
  65.             <i class="fas fa-pause"></i>
  66.             <i class="fas fa-forward active"></i>
  67.         </div>
  68.         <input type="range" class="volume-slider" max="1" value="1" step="0.1">
  69.         <span class="fas fa-volume-up"></span>
  70.     </div>
  71. </section>
  72. <section class="playlist ">
  73.  
  74.     <img src="../static/img/xx1.jpg" width="50px" class="back-btn icon" alt="">
  75.  
  76.     <h1 class="title">播放列表</h1>
  77.  
  78.     <div class="queue active">
  79.         <div class="queue-cover">
  80.             <img src="../static/img/xx1.jpg" alt="">
  81.             <i class="fas fa-pause"></i>
  82.         </div>
  83.         <p class="name">song 1</p>
  84.     </div>
  85.     // +7
  86. </section>
  87.  
  88. <script type="application/javascript" src="../static/js/data.js"></script>
  89. <script type="application/javascript" src="../static/js/app.js"></script>
  90. </body>
  91. </html>

data.js

  1. let songs = [
  2.     {
  3.         name: '歌曲名字',
  4.         path: '歌曲相对路径',
  5.         artist: '歌手名字',
  6.         cover: '封面图片相对路径'
  7.     },
  8. //以下格式相同，自己添加想要的歌曲
  9. ]

app.js

  1. const carousel = [...document.querySelectorAll('.carousel img')];
  2.  
  3. let carouselImageIndex = 0;
  4.  
  5. const changeCarousel = () => {
  6.     carousel[carouselImageIndex].classList.toggle('active');
  7.  
  8.     if(carouselImageIndex >= carousel.length - 1){
  9.         carouselImageIndex = 0;
  10.     } else{
  11.         carouselImageIndex++;
  12.     }
  13.  
  14.     carousel[carouselImageIndex].classList.toggle('active');
  15. }
  16.  
  17. setInterval(() => {
  18.     changeCarousel();
  19. }, 3000);
  20.  
  21. //导航
  22.  
  23. const musicPlayerSection = document.querySelector('.music-player-section');
  24. let clickCount = 1;
  25. musicPlayerSection.addEventListener('click', () => {
  26.     if(clickCount >= 2){
  27.         musicPlayerSection.classList.add('active');
  28.         clickCount = 1;
  29.         return;
  30.     }
  31.     clickCount++;
  32.     setTimeout(() => {
  33.         clickCount = 1;
  34.     }, 250);
  35. })
  36.  
  37. /// 从音乐播放器返回
  38. const backToHomeBtn = document.querySelector('.music-player-section .back-btn');
  39.  
  40. backToHomeBtn.addEventListener('click', () => {
  41.     musicPlayerSection.classList.remove('active');
  42. })
  43.  
  44. /// 访问播放列表
  45. const playlistSection = document.querySelector('.playlist');
  46. const navBtn = document.querySelector('.music-player-section .nav-btn');
  47.  
  48. navBtn.addEventListener('click', () => {
  49.     playlistSection.classList.add('active');
  50. })
  51. // 从播放列表返回到音乐播放器
  52. const backToMusicPlayer = document.querySelector('.playlist .back-btn');
  53.  
  54. backToMusicPlayer.addEventListener('click', () => {
  55.     playlistSection.classList.remove('active');
  56. })
  57. //导航完成
  58.  
  59. /// 音乐
  60.  
  61. let currentMusic = 0;
  62.  
  63. const music = document.querySelector('#audio-source');
  64.  
  65. const seekBar = document.querySelector('.music-seek-bar');
  66. const songName = document.querySelector('.current-song-name');
  67. const artistName = document.querySelector('.artist-name');
  68. const coverImage = document.querySelector('.cover');
  69. const currentMusicTime = document.querySelector('.current-time');
  70. const musicDuration = document.querySelector('.duration');
  71.  
  72. const queue = [...document.querySelectorAll('.queue')];
  73.  
  74. // 在此处选择所有按钮
  75.  
  76. const forwardBtn = document.querySelector('i.fa-forward');
  77. const backwardBtn = document.querySelector('i.fa-backward');
  78. const playBtn = document.querySelector('i.fa-play');
  79. const pauseBtn = document.querySelector('i.fa-pause');
  80. const repeatBtn = document.querySelector('span.fa-redo');
  81. const volumeBtn = document.querySelector('span.fa-volume-up');
  82. const volumeSlider = document.querySelector('.volume-slider');
  83.  
  84.  
  85. // 音乐设置功能
  86.  
  87. const setMusic = (i) => {
  88.     seekBar.value = 0;
  89.     let song = songs[i];
  90.     currentMusic = i;
  91.  
  92.     music.src = song.path;
  93.  
  94.     songName.innerHTML = song.name;
  95.     artistName.innerHTML = song.artist;
  96.     coverImage.src = song.cover;
  97.  
  98.     setTimeout(() => {
  99.         seekBar.max = music.duration;
  100.         musicDuration.innerHTML = formatTime(music.duration);
  101.     }, 300);
  102.     currentMusicTime.innerHTML = '00 : 00';
  103.     queue.forEach(item => item.classList.remove('active'));
  104.     queue[currentMusic].classList.add('active');
  105. }
  106.  
  107. setMusic(0);
  108.  
  109.  
  110. // 格式持续时间为 00 : 00 格式
  111.  
  112. const formatTime = (time) => {
  113.     let min = Math.floor(time / 60);
  114.     if(min < 10){
  115.         min = `0` + min;
  116.     }
  117.  
  118.     let sec = Math.floor(time % 60);
  119.     if(sec < 10){
  120.         sec = `0` + sec;
  121.     }
  122.  
  123.     return `${min} : ${sec}`;
  124. }
  125.  
  126.  
  127. // playBtn 点击事件
  128.  
  129. playBtn.addEventListener('click', () => {
  130.     music.play();
  131.     playBtn.classList.remove('active');
  132.     pauseBtn.classList.add('active');
  133. })
  134.  
  135. // pauseBtn 点击事件
  136.  
  137. pauseBtn.addEventListener('click', () => {
  138.     music.pause();
  139.     pauseBtn.classList.remove('active');
  140.     playBtn.classList.add('active');
  141. })
  142.  
  143.  
  144. //  向前按钮
  145.  
  146. forwardBtn.addEventListener('click', () => {
  147.     if(currentMusic >= songs.length - 1){
  148.         currentMusic = 0;
  149.     } else{
  150.         currentMusic++;
  151.     }
  152.     setMusic(currentMusic);
  153.     playBtn.click();
  154. })
  155.  
  156. // 后退按钮
  157.  
  158. backwardBtn.addEventListener('click', () => {
  159.     if(currentMusic <= 0){
  160.         currentMusic = songs.length - 1;
  161.     } else{
  162.         currentMusic--;
  163.     }
  164.     setMusic(currentMusic);
  165.     playBtn.click();
  166. })
  167.  
  168. // 搜索栏事件
  169.  
  170. setInterval(() => {
  171.     seekBar.value = music.currentTime;
  172.     currentMusicTime.innerHTML = formatTime(music.currentTime);
  173.     if(Math.floor(music.currentTime) == Math.floor(seekBar.max)){
  174.         if(repeatBtn.className.includes('active')){
  175.             setMusic(currentMusic);
  176.             playBtn.click();
  177.         } else{
  178.             forwardBtn.click();
  179.         }
  180.     }
  181. }, 500)
  182.  
  183. seekBar.addEventListener('change', () => {
  184.     music.currentTime = seekBar.value;
  185. })
  186.  
  187.  
  188. // 刷新按钮
  189.  
  190. repeatBtn.addEventListener('click', () => {
  191.     repeatBtn.classList.toggle('active');
  192. })
  193.  
  194. // 音量部分
  195.  
  196. volumeBtn.addEventListener('click', () => {
  197.     volumeBtn.classList.toggle('active');
  198.     volumeSlider.classList.toggle('active');
  199. })
  200.  
  201. volumeSlider.addEventListener('input', () => {
  202.     music.volume = volumeSlider.value;
  203. })
  204.  
  205. queue.forEach((item, i) => {
  206.     item.addEventListener('click', () => {
  207.         setMusic(i);
  208.         playBtn.click();
  209.     })
  210. })
  211.

style.css

  1. /*播放器*/
  2. @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
  3.  
  4. *{
  5.     margin: 0;
  6.     padding: 0;
  7.     box-sizing: border-box;
  8. }
  9.  
  10. :root{
  11.     --background: #141414;
  12.     --text-color: #fff;
  13.     --primary-color: #63ff69;
  14.     --secondary-color: #000;
  15.     --alpha-color: rgba(0, 0, 0, 0.5);
  16.     --shadow: 0 15px 40px var(--alpha-color);
  17. }
  18.  
  19. html{
  20.     background: var(--background);
  21.     display: flex;
  22.     justify-content: center;
  23. }
  24.  
  25. body{
  26.     width: 100%;
  27.     height: 100vh;
  28.     max-width: 375px;
  29.     position: relative;
  30.     background: var(--background);
  31.     font-family: 'roboto', sans-serif;
  32.     color: var(--text-color);
  33. }
  34.  
  35. ::-webkit-scrollbar{
  36.     display: none;
  37. }
  38.  
  39. .home-section{
  40.     width: 100%;
  41.     padding: 20px;
  42.     height: 100%;
  43.     padding-bottom: 100px;
  44.     overflow-y: auto;
  45. }
  46.  
  47. /* carousel */
  48.  
  49. .carousel{
  50.     width: 100%;
  51.     height: 200px;
  52.     overflow: hidden;
  53.     border-radius: 20px;
  54.     box-shadow: var(--shadow);
  55.     position: relative;
  56. }
  57.  
  58. .carousel img{
  59.     position: absolute;
  60.     width: 100%;
  61.     height: 100%;
  62.     object-fit: cover;
  63.     opacity: 0;
  64.     transition: 1s;
  65. }
  66.  
  67. .carousel img.active{
  68.     opacity: 1;
  69. }
  70. .heading{
  71.     margin: 30px 0 10px;
  72.     text-transform: capitalize;
  73.     font-weight: 400;
  74.     font-size: 30px;
  75. }
  76.  
  77. /* playlists card */
  78.  
  79. .playlists-group{
  80.     position: relative;
  81.     width: 100%;
  82.     min-height: 200px;
  83.     height: auto;
  84.     display: flex;
  85.     flex-wrap: nowrap;
  86.     overflow-x: auto;
  87. }
  88.  
  89. .playlist-card{
  90.     flex: 0 0 auto;
  91.     max-width: 150px;
  92.     height: 100%;
  93.     margin-right: 20px;
  94. }
  95.  
  96. .playlist-card-img{
  97.     width: 100%;
  98.     height: 150px;
  99.     object-fit: cover;
  100.     border-radius: 20px;
  101. }
  102.  
  103. .playlist-card-name{
  104.     width: 100%;
  105.     text-align: justify;
  106.     font-size: 20px;
  107.     text-transform: capitalize;
  108.     padding: 5px;
  109. }
  110. .music-player-section{
  111.     width: 100%;
  112.     height: 100px;
  113.     position: fixed;
  114.     bottom: 0;
  115.     left: 0;
  116.     background: var(--alpha-color);
  117.     backdrop-filter: blur(50px);
  118.     transition: 1s;
  119. }
  120.  
  121. .music-seek-bar{
  122.     -webkit-appearance: none;
  123.     width: 100%;
  124.     position: absolute;
  125.     top: -4px;
  126.     height: 8px;
  127.     background: var(--secondary-color);
  128.     overflow: hidden;
  129. }
  130.  
  131. .music-seek-bar::-webkit-slider-thumb{
  132.     -webkit-appearance: none;
  133.     height: 10px;
  134.     width: 5px;
  135.     background: var(--primary-color);
  136.     cursor: pointer;
  137.     box-shadow: -400px 0 0 400px var(--primary-color);
  138. }
  139.  
  140. .current-song-name{
  141.     font-weight: 300;
  142.     font-size: 20px;
  143.     text-align: center;
  144.     margin-top: 5px;
  145.     text-transform: capitalize;
  146. }
  147.  
  148. .controls{
  149.     position: relative;
  150.     width: 80%;
  151.     margin: auto;
  152.     display: flex;
  153.     justify-content: center;
  154.     align-items: center;
  155.     height: 60px;
  156.     font-size: 30px;
  157. }
  158.  
  159. .controls span{
  160.     display: none;
  161.     opacity: 0;
  162.     transition: 1s;
  163. }
  164.  
  165. .music-player-section.active .controls{
  166.     justify-content: space-between;
  167. }
  168.  
  169. .music-player-section.active .controls span{
  170.     font-size: 25px;
  171.     display: block;
  172.     opacity: 0.5;
  173. }
  174.  
  175. .music-player-section.active .controls span.active{
  176.     color: var(--primary-color);
  177.     opacity: 1;
  178. }
  179.  
  180. .controls .main i{
  181.     margin: 0 5px;
  182.     display: none;
  183. }
  184.  
  185. .controls .main i.active{
  186.     display: inline;
  187. }
  188. .music-player-section .hide{
  189.     display: none;
  190.     opacity: 0;
  191.     transition: 1s;
  192. }
  193.  
  194. .music-player-section.active .hide{
  195.     display: block;
  196.     opacity: 1;
  197. }
  198.  
  199. .music-player-section.active{
  200.     width: 100%;
  201.     height: 100%;
  202.     padding: 30px;
  203.     display: flex;
  204.     flex-direction: column;
  205. }
  206.  
  207. .music-player-section.active .music-seek-bar{
  208.     position: relative;
  209.     display: block;
  210.     border-radius: 50px;
  211.     margin: auto;
  212. }
  213.  
  214. .music-player-section.active .current-song-name{
  215.     font-size: 40px;
  216. }
  217.  
  218. .music-player-section.active .controls{
  219.     width: 100%;
  220.     font-size: 50px;
  221. }
  222.  
  223. .artist-name{
  224.     text-align: center;
  225.     font-size: 20px;
  226.     text-transform: capitalize;
  227. }
  228.  
  229. .cover{
  230.     width: 30vh;
  231.     height: 30vh;
  232.     object-fit: cover;
  233.     margin: auto;
  234.     border-radius: 20px;
  235.     box-shadow: var(--shadow);
  236. }
  237.  
  238. .current-time{
  239.     position: absolute;
  240.     margin-top: 5px;
  241.     left: 30px;
  242. }
  243.  
  244. .duration{
  245.     position: absolute;
  246.     margin-top: 5px;
  247.     right: 30px;
  248. }
  249.  
  250. .icon{
  251.     position: absolute;
  252.     top: 60px;
  253.     transform: scale(1.3);
  254. }
  255.  
  256. .back-btn{
  257.     left: 40px;
  258. }
  259.  
  260. .nav-btn{
  261.     right: 40px;
  262. }
  263.  
  264. /* volume button */
  265.  
  266. .volume-slider{
  267.     -webkit-appearance: none;
  268.     width: 100px;
  269.     height: 40px;
  270.     position: absolute;
  271.     right: -35px;
  272.     bottom: 80px;
  273.     transform: rotate(-90deg);
  274.     border-radius: 20px;
  275.     background: var(--alpha-color);
  276.     overflow: hidden;
  277.     opacity: 0;
  278.     display: none;
  279. }
  280.  
  281. .volume-slider.active{
  282.     opacity: 1;
  283.     display: block;
  284. }
  285.  
  286. .volume-slider::-webkit-slider-thumb{
  287.     -webkit-appearance: none;
  288.     height: 40px;
  289.     width: 10px;
  290.     background: var(--primary-color);
  291.     box-shadow: -200px 0 1px 200px var(--primary-color);
  292. }
  293. .playlist{
  294.     width: 100%;
  295.     height: 100%;
  296.     position: fixed;
  297.     top: 0;
  298.     right: -100%;
  299.     padding: 30px 0;
  300.     background: var(--background);
  301.     z-index: 3;
  302.     transition: 1s;
  303.     overflow: auto;
  304. }
  305.  
  306. .playlist.active{
  307.     right: 0;
  308. }
  309.  
  310. .title{
  311.     font-weight: 300;
  312.     font-size: 40px;
  313.     text-align: center;
  314.     margin-top: 15px;
  315.     text-transform: capitalize;
  316.     margin-bottom: 30px;
  317. }
  318.  
  319. .queue{
  320.     width: 100%;
  321.     height: 80px;
  322.     padding: 0 30px;
  323.     display: flex;
  324.     align-items: center;
  325.     border-top: 2px solid var(--alpha-color);
  326. }
  327.  
  328. .queue-cover{
  329.     width: 60px;
  330.     height: 60px;
  331.     border-radius: 10px;
  332.     overflow: hidden;
  333.     margin-right: 20px;
  334.     position: relative;
  335. }
  336.  
  337. .queue-cover img{
  338.     width: 100%;
  339.     height: 100%;
  340.     object-fit: cover;
  341. }
  342.  
  343. .queue-cover i{
  344.     position: absolute;
  345.     top: 50%;
  346.     left: 50%;
  347.     transform: translate(-50%, -50%);
  348.     font-size: 30px;
  349.     color: var(--primary-color);
  350.     display: none;
  351. }
  352.  
  353. .queue.active i{
  354.     display: block;
  355. }
  356.  
  357. .queue .name{
  358.     font-size: 22px;
  359.     text-transform: capitalize;
  360. }

注意！！！！！ data.js必须在app.js之前引入，且两者都在body标签末尾处引入，不然会报错

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/247670
推荐阅读
相关标签

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

  

闽ICP备14008679号