-
一款经典的网页版音乐播放器！ 一个美观大气的本地音乐播放器网页代码，具有经典易用的操作界面。 功能特点 美观大气的界面设计： 渐变标题栏 圆角卡片设计 现代化的阴影效果 响应式布局，适配不同屏幕尺寸 经典易用的操作： 播放/暂停按钮 上一首/下一首控制 进度条拖拽 音量调节 播放列表点击选择 完整的功能实现： 支持添加多个本地音乐文件 自动显示音乐时长 显示当前播放进度 音乐结束时自动播放下一首 键盘快捷键支持（空格播放/暂停，左右箭头快进快退） 用户体验优化： 高亮显示当前播放曲目 自定义滚动条 悬停效果 加载状态显示 <!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 -
Smplayer播放器 v23.12.0.10207 中文便携版 软件介绍SMPlayer是一个免费和开源的媒体播放器，适用于Windows和Linux设备。它使用MPlayer的图形用户界面和MPV媒体引擎，内置解码器，可以播放几乎所有格式的视频和音频文件。软件特色 播放所有媒体格式 SMPlayer 支持大多数熟知的格式和编码： avi、mp4、mkv、mpeg、mov、divx、h.264... 这些您都可以播放，这要归功于其内置的解码器。您无需查找和安装第三方的解码器。 皮肤 SMPlayer 自带了几个皮肤和图标主题，所以您可以轻松地更改播放器的外观。 字幕下载 SMPlayer 可以从opensubtitles搜索和下载字幕。 高级特性 SMPlayer 包含很多高级功能，如视频和音频过滤器，更改播放速度，音频和字幕延迟的调整，视频均衡器... 等等。还支持二合一电脑的触摸屏幕。 多语言 SMPlayer 有超过 30 种语言可用，其中包括西班牙语、德语、法语、意大利语、俄语、汉语、日语...... 跨平台支持 SMPlayer适用于Windows和Linux。SMPlayer兼容Windows XP/Vista/7/8/10。还支持2合一设备的触摸屏设备。 免费和开源 SMPlayer是免费和开源的。SMPlayer使用GPL许可证。下载地址百度云盘：SMPlayer x 64 便携版 SMPlayer x 32 便携版蓝奏云盘：SMPlayer x 64 便携版 SMPlayer x 32 便携版蓝奏云盘密码：52pj注意：Windows SmartScreen可能会阻止您运行程序。如果您收到一条受Windows保护的PC消息，只需单击更多信息，然后单击仍然运行按钮。 -
PotPlayer 美化版 最好用的视频播放器 软件简介在本地视频播放领域，PotPlayer可能是最好用的播放器了，没有之一！PotPlayer 支持几乎所有常见的音视频格式，并且具有强大的功能和用户友好的界面，具有高度的自定义能力，用户可以根据自己的喜好调整界面布局、选择不同的皮肤和颜色主题。它还提供了丰富的设置选项，允许用户调整音频、视频和字幕的参数，以获得最佳的观看和听觉体验。该播放器还具有许多实用的功能，如实时视频录制、屏幕截图、字幕自动下载、3D 播放和多个音频轨道的支持。它还支持播放损坏的媒体文件，并且可以自动跳过损坏的部分，以确保流畅的播放。PotPlayer 还内置了广泛的编解码器，包括 DXVA、CUDA、QuickSync 等，以提供更流畅的播放体验。它还支持硬件加速，可以显著减少 CPU 负载，提高播放性能。总的来说，PotPlayer 是一款功能强大、易于使用的媒体播放器，适用于各种媒体文件的播放和观看。无论是观看电影、播放音乐还是查看照片，PotPlayer 都能提供出色的用户体验。下载地址： https://cloud.189.cn/t/myqIRbueaAvi https://gangzi.lanzouj.com/ihxUT1wgj13i -
-
-
-
小白云盘TV（阿里云盘）v1.7 无限制网盘电视版 很多网友喜欢存储视频资源，普遍使用网盘进行保存；目前各大网盘平台基本都推出了电视TV版本，如：百度网盘TV版、迅雷TV、天翼云、115等等。在这些网盘里面，唯独“不限速”的阿里云盘没有推出自己的官方TV版本；目前分享给大家使用的是第三方开发的版本，不是很完善，仅仅也是利用了阿里不限速的特点在大屏上进行视频体验。最近分享迷又发现了另外一款相对更为完善的第三方版本，体验上要比此前的阿里云盘TV好很多，且功能更多——小白云盘TV版 小白云盘TV版和此前分享的阿里网盘TV版一样都是第三方开发的阿里云盘TV版本，非官方版。通过使用阿里云盘的接口，管理自己网盘内的资源，利用阿里不限速的特点，在大屏体验更好的视频效果。 小白云盘和阿里云盘TV（第三方）一样，都是纯净无限制使用的，启动后，需扫码登陆自己的阿里网盘账号。小白云盘相比此前的阿里云盘多了一个管理网盘资源的功能，可以直接在软件内对资源进行管理。 在播放视频方面的功能和之前的阿里云盘TV版比较类似，同样都是支持4k原画、倍速、字幕、调用第三方播放器等，小白云盘除了对这些功能进行了一定优化之外，还增加了切换内置音轨、字幕以及跳过片头尾的功能。在视频体验方面，可以说是阿里云盘TV（第三方）的升级版本，各方面都要好一些。比如增加的跳过片头尾的功能，非常适合保存了带有片头尾电视资源的朋友。另外可选择内嵌的音轨这个功能简直太棒了，可以切换不同的语言和不同的音质效果。当然，这个软件只是一个把阿里网盘资源在大屏电视上展现的工具，资源之类的需要自己去搜集。v1.7发布日期:2024-02-04更新日志:1.修复授权调整引起的首页转圈和文件显示不完整的问题3.修复部分设备增强内核ass字幕乱码问题4.修复文件夹残影，修复文件移动功能5.修复设置文件过滤之后没有字幕的问题6.修复和优化网盘搜索，结果显示文件位置7.修复部分设备打开播放历史界面卡死的问题8.新增播放进度指示，在播放界面-播放选卡打开9.优化资源搜索体验10.优化视图展示，排序、排列、过滤、背景设置移动到首页视图设置11.优化移动端播放时手势滑动时间太快的问题12.播放历史: 播放历史界面不再显示已经删除的视频记录，播放选集不再从记录点播放13.新增小白会员权限显示，打开首页用户信息打开可见小白云盘也有电脑版，详见《小白云盘Windows版 v1.01 第三方阿里云盘》---------如何选择安装包？--------你可以查询自己设备的架构信息之后选择对应的安装包。例如：你可以进入小白-设置-系统信息，查看"CPU_ABI"，如果是arm64-v8a，你可以选择"小白云盘TV-v1.5.6.x-arm64-v8a.apk"进行安装。如果你没办法到自己设备的架构信息直接选择"小白云盘TV-v1.5.6.x-all.apk"进行安装。armeabi-v7a后缀：低版本系统安装这个。下载地址蓝奏云夸克网盘 https://down.kxdw.com/xiaobaiyunpanTV.apk?time=1714473121&key=057b16a1ec82efbd5906dd319f5d7d0c