前端 用HTML，CSS, JS 写一个简易的音乐播放器
时间：2024-04-28 17:55:19 来源：网络cs 作者：康由 栏目：卖家故事 阅读：
阅读本书更多章节>>>>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Music Player</title> <style> /* 样式可自行修改 */ .container { width: 600px; margin: 0 auto; } h2 { text-align: center; } .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .progress { width: 400px; height: 10px; background-color: #ccc; } .progress-bar { height: 10px; background-color: #6cb0ff; } .info { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .song-info { margin-left: 20px; display: flex; flex-direction: column; } .song-info span { margin-bottom: 5px; } .song-list { list-style: none; padding: 0; } .song-list li { margin-bottom: 5px; cursor: pointer; } .song-list li.active { color: #6cb0ff; } .play-mode { display: flex; align-items: center; } .play-mode span { margin-right: 5px; } </style></head><body> <div class="container"> <h2>Music Player</h2> <div class="controls"> <button id="prev">上一首</button> <button id="play">播放</button> <button id="next">下一首</button> <div class="progress"> <div class="progress-bar"></div> </div> <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5"> </div> <div class="info"> <img src="" alt="" id="cover"> <div class="song-info"> <span id="song-name">歌曲名称</span> <span id="artist">歌手</span> </div> </div> <ul class="song-list"> <li data-src="./music/song1.mp3">歌曲1</li> <li data-src="./music/song2.mp3">歌曲2</li> <li data-src="./music/song3.mp3">歌曲3</li> </ul> <div class="play-mode"> <span>播放模式：</span> <button id="loop">循环</button> <button id="random">随机</button> <button id="single">单曲</button> </div> </div> <script> const audio = new Audio(); // 创建音乐播放器对象 const songList = document.querySelectorAll('.song-list li'); const prevBtn = document.querySelector('#prev'); const playBtn = document.querySelector('#play'); const nextBtn = document.querySelector('#next'); const volumeSlider = document.querySelector('#volume'); const progressBar = document.querySelector('.progress-bar'); const coverImg = document.querySelector('#cover'); const songName = document.querySelector('#song-name'); const artistName = document.querySelector('#artist'); const loopBtn = document.querySelector('#loop'); const randomBtn = document.querySelector('#random'); const singleBtn = document.querySelector('#single'); let currentIndex = 0; let isPlaying = false; let playMode = 'loop'; // 默认播放模式为循环 function playSong(index) { const song = songList[index]; audio.src = song.dataset.src; audio.play(); isPlaying = true; playBtn.textContent = '暂停'; coverImg.src = `./images/cover${index+1}.jpg`; songName.textContent = song.textContent; artistName.textContent = '歌手名称'; songList.forEach((item) => { item.classList.remove('active'); }); song.classList.add('active'); } function getNextIndex() { let nextIndex; switch(playMode) { case 'loop': nextIndex = currentIndex + 1; if (nextIndex >= songList.length) { nextIndex = 0; } break; case 'random': nextIndex = Math.floor(Math.random() * songList.length); break; case 'single': nextIndex = currentIndex; break; } return nextIndex; } function updateProgress() { const progress = audio.currentTime / audio.duration * 100; progressBar.style.width = `${progress}%`; } function init() { playSong(currentIndex); } init(); prevBtn.addEventListener('click', () => { currentIndex--; if (currentIndex < 0) { currentIndex = songList.length - 1; } playSong(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = getNextIndex(); playSong(currentIndex); }); playBtn.addEventListener('click', () => { if (isPlaying) { audio.pause(); isPlaying = false; playBtn.textContent = '播放'; } else { audio.play(); isPlaying = true; playBtn.textContent = '暂停'; } }); volumeSlider.addEventListener('input', () => { audio.volume = volumeSlider.value; }); audio.addEventListener('timeupdate', updateProgress); progressBar.addEventListener('click', (e) => { const width = progressBar.clientWidth; const clickX = e.offsetX; const duration = audio.duration; audio.currentTime = clickX / width * duration; }); songList.forEach((song, index) => { song.addEventListener('click', () => { currentIndex = index; playSong(currentIndex); }); }); loopBtn.addEventListener('click', () => { playMode = 'loop'; }); randomBtn.addEventListener('click', () => { playMode = 'random'; }); singleBtn.addEventListener('click', () => { playMode = 'single'; }); audio.addEventListener('ended', () => { currentIndex = getNextIndex(); playSong(currentIndex); }); </script></body></html> 这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能，同时还支持播放模式切换和歌曲列表操作。不过这只是一个简单的示例，实际上还有很多功能需要进一步完善和优化，例如：
支持歌词显示和同步支持播放列表编辑和保存支持拖拽上传歌曲支持在线搜索歌曲支持分享和评论等社交功能这些功能的实现需要涉及到不同的技术和工具，如 AJAX、WebSocket、React、Node.js 等。如果你想要深入学习和掌握 Web 开发技术，可以选择相应的学习路径和教程进行学习。
阅读本书更多章节>>>>本文链接：https://www.kjpai.cn/gushi/2024-04-28/163307.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
相关文章
- CSS——前端笔记
- 1.1 css style 样式定义：行内 style 属性、单页 ＜style＞ 标签、多页
- web期末作业网页设计实例代码 (建议收藏) HTML+CSS+JS (网页源码
- 使用CSS3 + Vue3 + js-tool-big-box工具，实现炫酷五一倒计时动效
- 使用CSS自定义浏览器滚动条样式 (webkit 已最新支持 scrollbar-w
- 一个专注于前端视觉效果的集合应用，包含CSS动效、Canvas动画、Thr
- 前端笔记 css（8）css初始化
- 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念
- css行间距怎么设置(CSS设置行间距)
- 前端使用css去除input框的默认样式