-
一款经典的网页版音乐播放器！ 一个美观大气的本地音乐播放器网页代码，具有经典易用的操作界面。 功能特点 美观大气的界面设计： 渐变标题栏 圆角卡片设计 现代化的阴影效果 响应式布局，适配不同屏幕尺寸 经典易用的操作： 播放/暂停按钮 上一首/下一首控制 进度条拖拽 音量调节 播放列表点击选择 完整的功能实现： 支持添加多个本地音乐文件 自动显示音乐时长 显示当前播放进度 音乐结束时自动播放下一首 键盘快捷键支持（空格播放/暂停，左右箭头快进快退） 用户体验优化： 高亮显示当前播放曲目 自定义滚动条 悬停效果 加载状态显示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>灵狐音乐播放器</title> <style> :root { --primary-color: #4a76a8; --secondary-color: #3a5f8d; --text-color: #333; --light-text: #f5f5f5; --background: #f9f9f9; --player-bg: #fff; --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--background); color: var(--text-color); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; } .container { width: 100%; max-width: 900px; background-color: var(--player-bg); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--light-text); padding: 20px; text-align: center; } h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; } .subtitle { font-size: 14px; opacity: 0.9; } .player-container { padding: 20px; display: flex; flex-direction: column; gap: 20px; } .now-playing { display: flex; align-items: center; gap: 20px; padding: 15px; background-color: rgba(74, 118, 168, 0.1); border-radius: 8px; } .album-art { width: 80px; height: 80px; background-color: #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .album-art img { width: 100%; height: 100%; object-fit: cover; } .music-info { flex: 1; } .music-title { font-size: 18px; font-weight: 600; margin-bottom: 5px; } .music-artist { font-size: 14px; color: #666; } .progress-container { flex: 2; display: flex; flex-direction: column; gap: 8px; } .progress-bar { height: 6px; background-color: #e0e0e0; border-radius: 3px; cursor: pointer; overflow: hidden; } .progress { height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); width: 0%; border-radius: 3px; transition: width 0.1s linear; } .time-info { display: flex; justify-content: space-between; font-size: 12px; color: #666; } .controls { display: flex; justify-content: center; align-items: center; gap: 25px; } .control-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; border: none; outline: none; } .control-btn:hover { transform: scale(1.05); background-color: var(--secondary-color); } .control-btn i { font-size: 18px; } .play-btn { width: 50px; height: 50px; } .play-btn i { font-size: 24px; } .volume-container { display: flex; align-items: center; gap: 10px; } .volume-slider { width: 100px; cursor: pointer; } .playlist { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; } .playlist-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .playlist-title { font-size: 18px; font-weight: 600; } .add-music-btn { background-color: var(--primary-color); color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; } .add-music-btn:hover { background-color: var(--secondary-color); } .music-list { list-style: none; max-height: 300px; overflow-y: auto; } .music-item { display: flex; align-items: center; padding: 10px 15px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } .music-item:hover { background-color: rgba(74, 118, 168, 0.1); } .music-item.active { background-color: rgba(74, 118, 168, 0.2); color: var(--primary-color); } .music-item-number { width: 30px; text-align: center; font-size: 14px; } .music-item-info { flex: 1; } .music-item-title { font-size: 15px; margin-bottom: 3px; } .music-item-artist { font-size: 12px; color: #666; } .music-item-duration { font-size: 13px; color: #666; } /* 自定义滚动条 */ .music-list::-webkit-scrollbar { width: 6px; } .music-list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .music-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } .music-list::-webkit-scrollbar-thumb:hover { background: #aaa; } /* 响应式设计 */ @media (max-width: 768px) { .now-playing { flex-direction: column; text-align: center; } .progress-container { width: 100%; } .controls { gap: 15px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="container"> <header> <h1>灵狐音乐播放器</h1> <div class="subtitle">享受您的本地音乐收藏</div> </header> <div class="player-container"> <div class="now-playing"> <div class="album-art"> <i class="fas fa-music" style="font-size: 30px; color: #999;"></i> </div> <div class="music-info"> <div class="music-title">未选择音乐</div> <div class="music-artist">-</div> </div> <div class="progress-container"> <div class="progress-bar" id="progress-bar"> <div class="progress" id="progress"></div> </div> <div class="time-info"> <span id="current-time">0:00</span> <span id="duration">0:00</span> </div> </div> </div> <div class="controls"> <button class="control-btn" id="prev-btn"> <i class="fas fa-step-backward"></i> </button> <button class="control-btn play-btn" id="play-btn"> <i class="fas fa-play" id="play-icon"></i> </button> <button class="control-btn" id="next-btn"> <i class="fas fa-step-forward"></i> </button> <div class="volume-container"> <i class="fas fa-volume-up" style="color: var(--primary-color);"></i> <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="0.7"> </div> </div> <div class="playlist"> <div class="playlist-header"> <div class="playlist-title">播放列表</div> <button class="add-music-btn" id="add-music-btn"> <i class="fas fa-plus"></i> 添加音乐 </button> </div> <ul class="music-list" id="music-list"> <li class="music-item empty"> <div class="music-item-info">暂无音乐，请点击上方按钮添加</div> </li> </ul> </div> </div> </div> <input type="file" id="file-input" accept="audio/*" multiple style="display: none;"> <script> document.addEventListener('DOMContentLoaded', function() { // 获取DOM元素 const audio = new Audio(); const playBtn = document.getElementById('play-btn'); const playIcon = document.getElementById('play-icon'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const progressBar = document.getElementById('progress-bar'); const progress = document.getElementById('progress'); const currentTimeEl = document.getElementById('current-time'); const durationEl = document.getElementById('duration'); const volumeSlider = document.getElementById('volume-slider'); const addMusicBtn = document.getElementById('add-music-btn'); const fileInput = document.getElementById('file-input'); const musicList = document.getElementById('music-list'); const musicTitle = document.querySelector('.music-title'); const musicArtist = document.querySelector('.music-artist'); const albumArt = document.querySelector('.album-art'); // 播放列表和当前索引 let playlist = []; let currentIndex = -1; let isPlaying = false; // 添加音乐到播放列表 addMusicBtn.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function(e) { const files = Array.from(e.target.files); if (files.length === 0) return; // 清空"暂无音乐"提示 if (musicList.querySelector('.empty')) { musicList.innerHTML = ''; } files.forEach((file, index) => { // 创建音乐对象 const musicObj = { file: file, url: URL.createObjectURL(file), title: file.name.replace(/\.[^/.]+$/, ""), // 移除扩展名 artist: "未知艺术家", duration: "0:00" }; // 添加到播放列表 playlist.push(musicObj); // 创建列表项 const li = document.createElement('li'); li.className = 'music-item'; li.innerHTML = ` <div class="music-item-number">${playlist.length}</div> <div class="music-item-info"> <div class="music-item-title">${musicObj.title}</div> <div class="music-item-artist">${musicObj.artist}</div> </div> <div class="music-item-duration">${musicObj.duration}</div> `; // 点击播放 li.addEventListener('click', function() { playMusic(playlist.length - 1); }); musicList.appendChild(li); // 获取音乐时长 const tempAudio = new Audio(musicObj.url); tempAudio.addEventListener('loadedmetadata', function() { musicObj.duration = formatTime(tempAudio.duration); li.querySelector('.music-item-duration').textContent = musicObj.duration; // 如果是第一个添加的音乐，自动播放 if (playlist.length === 1) { playMusic(0); } }); }); // 重置文件输入，以便可以再次选择相同的文件 fileInput.value = ''; }); // 播放音乐 function playMusic(index) { if (index < 0 || index >= playlist.length) return; // 更新当前索引 currentIndex = index; // 设置音频源 audio.src = playlist[index].url; // 更新UI musicTitle.textContent = playlist[index].title; musicArtist.textContent = playlist[index].artist; // 高亮当前播放项 const items = document.querySelectorAll('.music-item'); items.forEach((item, i) => { if (i === index) { item.classList.add('active'); } else { item.classList.remove('active'); } }); // 播放 audio.play(); isPlaying = true; playIcon.className = 'fas fa-pause'; } // 播放/暂停 playBtn.addEventListener('click', function() { if (playlist.length === 0) return; if (isPlaying) { audio.pause(); isPlaying = false; playIcon.className = 'fas fa-play'; } else { if (currentIndex === -1) { playMusic(0); } else { audio.play(); isPlaying = true; playIcon.className = 'fas fa-pause'; } } }); // 上一首 prevBtn.addEventListener('click', function() { if (playlist.length === 0) return; let newIndex = currentIndex - 1; if (newIndex < 0) { newIndex = playlist.length - 1; } playMusic(newIndex); }); // 下一首 nextBtn.addEventListener('click', function() { if (playlist.length === 0) return; let newIndex = currentIndex + 1; if (newIndex >= playlist.length) { newIndex = 0; } playMusic(newIndex); }); // 进度条控制 progressBar.addEventListener('click', function(e) { const width = this.clientWidth; const clickX = e.offsetX; const duration = audio.duration; audio.currentTime = (clickX / width) * duration; }); // 更新进度条 audio.addEventListener('timeupdate', function() { if (audio.duration) { const progressPercent = (audio.currentTime / audio.duration) * 100; progress.style.width = `${progressPercent}%`; currentTimeEl.textContent = formatTime(audio.currentTime); } }); // 音乐结束时自动下一首 audio.addEventListener('ended', function() { nextBtn.click(); }); // 音量控制 volumeSlider.addEventListener('input', function() { audio.volume = this.value; }); // 格式化时间 function formatTime(seconds) { const minutes = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${minutes}:${secs < 10 ? '0' : ''}${secs}`; } // 键盘快捷键 document.addEventListener('keydown', function(e) { if (e.code === 'Space') { e.preventDefault(); playBtn.click(); } else if (e.code === 'ArrowLeft') { audio.currentTime = Math.max(0, audio.currentTime - 5); } else if (e.code === 'ArrowRight') { audio.currentTime = Math.min(audio.duration, audio.currentTime + 5); } else if (e.code === 'ArrowUp') { volumeSlider.value = Math.min(1, parseFloat(volumeSlider.value) + 0.1); volumeSlider.dispatchEvent(new Event('input')); } else if (e.code === 'ArrowDown') { volumeSlider.value = Math.max(0, parseFloat(volumeSlider.value) - 0.1); volumeSlider.dispatchEvent(new Event('input')); } }); }); document.addEventListener('DOMContentLoaded', function() { // 自动更新版权年份 document.querySelector('footer').innerHTML = document.querySelector('footer').innerHTML.replace('2023', new Date().getFullYear()); }); </script> <footer class="footer-pro"> <div class="footer-content"> <span class="copyright">© 2023 灵狐音乐播放器</span> <span class="divider">|</span> <span class="credit"> 设计与开发 by <a href="http://linghu.rf.gd/" target="_blank" class="developer-link"> 灵/灵狐的窝 </a> </span> <span class="divider">|</span> <span class="rights">保留所有权利</span> </div> </footer> </body> </html> 使用方法 将上述代码保存为HTML文件（如music-player.html） 在浏览器中打开该文件 点击"添加音乐"按钮选择本地音乐文件 点击播放列表中的歌曲开始播放 您可以根据需要进一步自定义颜色、布局或添加更多功能。 附件下载：index.rar -
Windows 12 网页版 本项目作者：谭景元（tjy-gitnub） 本项目链接：https://github.com/tjy-gitnub/win12 在线体验 Windows 12 网页版，在线体验 点击下面的链接在线体验 tjy-gitnub.github.io/win12/desktop.html 在线预览 有点慢，稍等一下~ 此项目是一个开源项目。此项目使用 EPL v2.0 开源许可。开源许可是具有法律效力的合同，请自觉遵守开源许可，尊重他人劳动。 根据许可，你可以对该项目进行传播、分发、修改以及二次发布，包括个人和商业用途，但我方不鼓励一切商业用途。 您必须给出源码来源，包括作者，项目链接（见上）等，必须使用相同的协议开源。 若此项目的源码作为项目的一部分与你私有的源码一起发布时，你可以使用其它协议，但要声明 EPL 部分的内容并声明此部分继续遵循 EPL 协议。 不是在该项目基础上进行增加、修改的，仅参考源码的，不需要开源，但也仅供学习用途。 由于近期发现大量滥用行为，在此规定附加条例： 任何使用本项目者，必须在介绍里附上原作者及项目链接，不得故意隐瞒原项目中的署名信息、原作者或项目链接，不得限制查看原项目中的署名信息、原作者或项目链接，且不得修改原项目中的署名信息； 将本项目用于商业用途者，需要标明原作者及项目链接，且必须以 EPL 协议开源。未经修改的源代码不得用于商业用途； 任何使用本项目者，不得移除或故意隐藏、限制查看本声明； 请您遵守上述规定，我方有权通过法律手段进行合法维权。