0
0

前端 用HTML，CSS, JS 写一个简易的音乐播放器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Music Player</title>
  6.     <style>
  7.         /* 样式可自行修改 */
  8.         .container {
  9.             width: 600px;
  10.             margin: 0 auto;
  11.         }
  12.         h2 {
  13.             text-align: center;
  14.         }
  15.         .controls {
  16.             display: flex;
  17.             justify-content: space-between;
  18.             align-items: center;
  19.             margin-bottom: 20px;
  20.         }
  21.         .progress {
  22.             width: 400px;
  23.             height: 10px;
  24.             background-color: #ccc;
  25.         }
  26.         .progress-bar {
  27.             height: 10px;
  28.             background-color: #6cb0ff;
  29.         }
  30.         .info {
  31.             display: flex;
  32.             justify-content: center;
  33.             align-items: center;
  34.             margin-bottom: 20px;
  35.         }
  36.         .song-info {
  37.             margin-left: 20px;
  38.             display: flex;
  39.             flex-direction: column;
  40.         }
  41.         .song-info span {
  42.             margin-bottom: 5px;
  43.         }
  44.         .song-list {
  45.             list-style: none;
  46.             padding: 0;
  47.         }
  48.         .song-list li {
  49.             margin-bottom: 5px;
  50.             cursor: pointer;
  51.         }
  52.         .song-list li.active {
  53.             color: #6cb0ff;
  54.         }
  55.         .play-mode {
  56.             display: flex;
  57.             align-items: center;
  58.         }
  59.         .play-mode span {
  60.             margin-right: 5px;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <div class="container">
  66.         <h2>Music Player</h2>
  67.         <div class="controls">
  68.             <button id="prev">上一首</button>
  69.             <button id="play">播放</button>
  70.             <button id="next">下一首</button>
  71.             <div class="progress">
  72.                 <div class="progress-bar"></div>
  73.             </div>
  74.             <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
  75.         </div>
  76.         <div class="info">
  77.             <img src="" alt="" id="cover">
  78.             <div class="song-info">
  79.                 <span id="song-name">歌曲名称</span>
  80.                 <span id="artist">歌手</span>
  81.             </div>
  82.         </div>
  83.         <ul class="song-list">
  84.             <li data-src="./music/song1.mp3">歌曲1</li>
  85.             <li data-src="./music/song2.mp3">歌曲2</li>
  86.             <li data-src="./music/song3.mp3">歌曲3</li>
  87.         </ul>
  88.         <div class="play-mode">
  89.             <span>播放模式：</span>
  90.             <button id="loop">循环</button>
  91.             <button id="random">随机</button>
  92.             <button id="single">单曲</button>
  93.         </div>
  94.     </div>
  95.     <script>
  96.         const audio = new Audio(); // 创建音乐播放器对象
  97.         const songList = document.querySelectorAll('.song-list li');
  98.         const prevBtn = document.querySelector('#prev');
  99.         const playBtn = document.querySelector('#play');
  100.         const nextBtn = document.querySelector('#next');
  101.         const volumeSlider = document.querySelector('#volume');
  102.         const progressBar = document.querySelector('.progress-bar');
  103.         const coverImg = document.querySelector('#cover');
  104.         const songName = document.querySelector('#song-name');
  105.         const artistName = document.querySelector('#artist');
  106.         const loopBtn = document.querySelector('#loop');
  107.         const randomBtn = document.querySelector('#random');
  108.         const singleBtn = document.querySelector('#single');
  109.         let currentIndex = 0;
  110.         let isPlaying = false;
  111.         let playMode = 'loop'; // 默认播放模式为循环
  113.         function playSong(index) {
  114.             const song = songList[index];
  115.             audio.src = song.dataset.src;
  116.             audio.play();
  117.             isPlaying = true;
  118.             playBtn.textContent = '暂停';
  119.             coverImg.src = `./images/cover${index+1}.jpg`;
  120.             songName.textContent = song.textContent;
  121.             artistName.textContent = '歌手名称';
  122.             songList.forEach((item) => {
  123.                 item.classList.remove('active');
  124.             });
  125.             song.classList.add('active');
  126.         }
  128.         function getNextIndex() {
  129.             let nextIndex;
  130.             switch(playMode) {
  131.                 case 'loop':
  132.                     nextIndex = currentIndex + 1;
  133.                     if (nextIndex >= songList.length) {
  134.                         nextIndex = 0;
  135.                     }
  136.                     break;
  137.                 case 'random':
  138.                     nextIndex = Math.floor(Math.random() * songList.length);
  139.                     break;
  140.                 case 'single':
  141.                     nextIndex = currentIndex;
  142.                     break;
  143.             }
  144.             return nextIndex;
  145.         }
  147.         function updateProgress() {
  148.             const progress = audio.currentTime / audio.duration * 100;
  149.             progressBar.style.width = `${progress}%`;
  150.         }
  152.         function init() {
  153.             playSong(currentIndex);
  154.         }
  156.         init();
  158.         prevBtn.addEventListener('click', () => {
  159.             currentIndex--;
  160.             if (currentIndex < 0) {
  161.                 currentIndex = songList.length - 1;
  162.             }
  163.             playSong(currentIndex);
  164.         });
  166.         nextBtn.addEventListener('click', () => {
  167.             currentIndex = getNextIndex();
  168.             playSong(currentIndex);
  169.         });
  171.         playBtn.addEventListener('click', () => {
  172.             if (isPlaying) {
  173.                 audio.pause();
  174.                 isPlaying = false;
  175.                 playBtn.textContent = '播放';
  176.             } else {
  177.                 audio.play();
  178.                 isPlaying = true;
  179.                 playBtn.textContent = '暂停';
  180.             }
  181.         });
  183.         volumeSlider.addEventListener('input', () => {
  184.             audio.volume = volumeSlider.value;
  185.         });
  187.         audio.addEventListener('timeupdate', updateProgress);
  189.         progressBar.addEventListener('click', (e) => {
  190.             const width = progressBar.clientWidth;
  191.             const clickX = e.offsetX;
  192.             const duration = audio.duration;
  193.             audio.currentTime = clickX / width * duration;
  194.         });
  196.         songList.forEach((song, index) => {
  197.             song.addEventListener('click', () => {
  198.                 currentIndex = index;
  199.                 playSong(currentIndex);
  200.             });
  201.         });
  203.         loopBtn.addEventListener('click', () => {
  204.             playMode = 'loop';
  205.         });
  207.         randomBtn.addEventListener('click', () => {
  208.             playMode = 'random';
  209.         });
  211.         singleBtn.addEventListener('click', () => {
  212.             playMode = 'single';
  213.         });
  215.         audio.addEventListener('ended', () => {
  216.             currentIndex = getNextIndex();
  217.             playSong(currentIndex);
  218.         });
  219.     </script>
  220. </body>
  221. </html>
  222.

这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能，同时还支持播放模式切换和歌曲列表操作。不过这只是一个简单的示例，实际上还有很多功能需要进一步完善和优化，例如：

  1. 支持歌词显示和同步
  2. 支持播放列表编辑和保存
  3. 支持拖拽上传歌曲
  4. 支持在线搜索歌曲
  5. 支持分享和评论等社交功能

这些功能的实现需要涉及到不同的技术和工具，如 AJAX、WebSocket、React、Node.js 等。如果你想要深入学习和掌握 Web 开发技术，可以选择相应的学习路径和教程进行学习。

标签： css 前端 css3
本文转载自: https://blog.csdn.net/aisheisadas/article/details/134148138
版权归原作者 ZHANGα 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端 用HTML，CSS, JS 写一个简易的音乐播放器”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。