🎵 悬浮音乐播放器

一个现代化的悬浮音乐播放器,支持跨页面播放状态保持,可通过JS轻松集成到任何网站。

M 键可以显示/隐藏播放器!

🎨 现代设计

白色背景配合浅蓝色点缀,符合现代美学设计,从侧面滑入的优雅动画效果。

⌨️ 键盘控制

支持"M"键快速显示/隐藏,空格键播放/暂停,方向键切换歌曲和调节音量。

📱 响应式

完美适配桌面和移动设备,在不同屏幕尺寸下都有良好的显示效果。

🔄 跨页面播放

页面跳转时保持播放状态,音乐不会中断,提供连续的音乐体验。

📊 频谱显示

实时音频频谱可视化,让音乐播放更加生动有趣。

🔧 易于集成

一行代码即可集成到任何网站,提供丰富的JavaScript API。

🚀 快速开始

第一步: 在您的HTML页面中添加以下代码
<script src="music-player-standalone.js"></script>
第二步: 准备 music.json 文件来定义您的播放列表
{ "playlist": [ { "id": 1, "title": "歌曲名称", "artist": "艺术家", "album": "专辑名称", "duration": 215, "file": "music/song.mp3", "cover": "covers/cover.jpg" } ] }
第三步:M 键显示播放器,开始享受音乐!

🎮 功能演示

📖 JavaScript API

// 播放指定ID的音乐 window.MusicPlayer.playTrack(1, 30); // 从30秒开始播放 // 设置播放时间 window.MusicPlayer.setPlayTime(2, 30); // 跳转到2分30秒 // 获取当前歌曲信息 const track = window.MusicPlayer.getCurrentTrack();