web音乐播放器解决方案
如何制作一个运行在浏览器中的本地音乐播放器? 本方案提供一种简单的可扩展思路.
获取本地音乐文件的数据信息
方案中采用开源 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文件等.
在web中制作音乐播放器
引入 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事件的封装
其他使用详情参见示例;