🎵 悬浮音乐播放器示例
功能特性
- 支持按"M"键打开/隐藏播放器
- 从侧面滑入的现代设计
- 白色背景配合浅蓝色点缀
- 支持播放列表管理
- 实时频谱显示
- 跨页面播放状态保持
- 支持键盘快捷键控制
- 响应式设计，适配移动端
- 可通过JS轻松集成到其他网站
快速集成
只需在您的HTML页面中添加以下代码：
<script src="music-player-standalone.js"></script>
注意： 您需要准备一个 music.json 文件来定义播放列表，以及相应的音乐文件。
自定义配置
您可以通过配置选项来自定义播放器行为：
<script>
// 自定义配置
window.MusicPlayerConfig = {
musicUrl: 'your-music.json', // 音乐列表文件路径
autoShow: true, // 是否自动显示播放器
defaultVolume: 50 // 默认音量
};
</script>
<script src="music-player-standalone.js"></script>
JavaScript API
播放器提供了丰富的JavaScript API供您调用：
// 播放指定ID的音乐
window.MusicPlayer.playTrack(1, 30); // 播放ID为1的音乐，从30秒开始
// 播放指定索引的音乐
window.MusicPlayer.playTrackByIndex(0, 60); // 播放第一首音乐，从1分钟开始
// 设置播放时间（分钟，秒）
window.MusicPlayer.setPlayTime(2, 30); // 跳转到2分30秒
// 获取当前播放的音乐信息
const currentTrack = window.MusicPlayer.getCurrentTrack();
// 获取播放列表
const playlist = window.MusicPlayer.getPlaylist();
演示功能
点击下面的按钮来测试播放器的各种功能：
music.json 文件格式
您的音乐列表文件应该遵循以下格式：
{
"playlist": [
{
"id": 1,
"title": "歌曲名称",
"artist": "艺术家",
"album": "专辑名称",
"duration": 215,
"file": "music/song.mp3",
"cover": "covers/cover.jpg",
"genre": "流行",
"year": 2023
}
],
"settings": {
"defaultVolume": 50,
"autoplay": false,
"loop": false,
"shuffle": false
}
}
键盘快捷键
当播放器可见时，您可以使用以下快捷键：
- M - 显示/隐藏播放器
- 空格 - 播放/暂停
- ← - 上一首
- → - 下一首
- ↑ - 增加音量
- ↓ - 减少音量