🎨 现代设计
白色背景配合浅蓝色点缀,符合现代美学设计,从侧面滑入的优雅动画效果。
⌨️ 键盘控制
支持"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();