如何制作一个运行在浏览器中的本地音乐播放器? 本方案提供一种简单的可扩展思路.
方案中采用开源 ffprobe 项目来得到多媒体文件的详细信息,包括歌曲的播放时长, id3 标签.
安装 ffprobe 访问 http://ffmpeg.org/
将所有希望本地播放的音乐文件放置在 musics/ 目录下
然后运行
node use-node-generate-database.js
在本示例中会生成一个 database.js,
var database = [ { "filename":"./database/1.mp3", "nb_streams":1, "nb_programs":0, "format_name":"mp3", "format_long_name":"MP2/3 (MPEG audio layer 2/3)", "start_time":"0.025057", "duration":"156.760816", "size":"2508914", "bit_rate":"128037", "probe_score":51, "tags":{ "album":"Vivaldi : Le quattro stagioni [The Four Seasons] & Concertos", "artist":"Il Giardino Armonico" } }, //.................... ];
可以通过修改代码,把音乐数据保存到数据库或生成json文件等.
引入 dabase.js player.js;
<script src="./scripts/.database.js"></script> <script src="./scripts/player.js"></script>
音乐播放器界面千变万化,所以player.js中没有对界面的操作.
player.js封装了一些常用的接口
// 构建函数必须接受的两个参数 // 1. 页面中audio标签的标识 '.audio' '#audio' // 2. 播放列表 var player = new Player('#audio', database); // 方法: // 从头或上次离开时的歌曲开始播放列表中的音乐 player.play(); // 暂停当前歌曲播放 player.pause(); // 切换当前歌曲播放暂停状态 player.togglePlay(); // 静音 player.silence(); // 恢复静音之前的音量 player.restoreVolume(); // 静音/复原 player.toggleSilence(); // 设置音量 player.setVolume(); // 获取音量 player.getVolume(); // 根据播放模式播放列表中的上一首 player.next(); // 根据播放模式播放列表中的下一首 player.previous(); // 设置播放模式 顺序 随机 循环 单曲循环 player.setState(); //事件 原生audio事件的封装
其他使用详情参见示例;