html5在线音乐列表播放器,HTML5列表音乐播放器SMusic

smuic

这是一款基于HTML5以及CSS3的列表式音乐播放器，增加了列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能，已增加歌词功能。采用原生JavaScript编写，不依赖任何库文件，兼容支持html5的浏览器。下载包中的代码已压缩，源码版已开源在Github(https://github.com/S-mohan/smusic)上。

Options{

//放置Smusic的DOM容器

container: doc.body,

//初始化播放索引

playIndex: 0,

//初始化播放模式 (1 : 列表循环 2 : 随机播放 3 : 单曲循环)

playMode: 1,

//初始化音量 (0 - 1之间)

volume: .5,

//自动播放

autoPlay: true,

//默认显示面板

panel: 'list' //['list' 列表面板, 'lyric' 歌词面板]

}

API//初始化播放器

init()

/**

* 获取当前播放的歌曲信息

* @returns {*}

*/

getCurrentInfo()

/**

* 设置播放模式

* @param mode (1, 2, 3)

*/

setMode(mode = 1)

/**

* 设置音量

* @param volume ( 0 <= volume <= 1)

*/

setVolume(volume = .5)

/**

* 向列表中追加音乐

* @param music

* @param callback

*/

addSong(music = {}, callback = noop)

//刷新播放列表

refreshList()

/**

* 下一首

* @param callback

*/

next(callback)

/**

* 上一首

* @param callback

*/

prev(callback)

/**

* 播放

* @param callback

*/

play(callback)

/**

* 暂停

* @param callback

*/

pause(callback)

关于歌词

由于涉及AJAX请求，请在服务器环境下演示(可以启动http-server创建一个简单的服务器环境)。目前只支持UTF8编码歌词文件，歌词形式如下：

[offset:0]

[00:00.80]车站 (Live) - 李健

[00:02.21]词：李健

[00:02.96]曲：竹内玛利亚

[00:04.43]

[00:37.57]车窗外恋人相拥

[00:42.62]还在难舍难离

[00:46.08]

[00:47.67]汽笛声突然响起

由于歌词文件需要AJAX加载，目前，只能加载同域文件，如果需要跨域加载歌词，如远程歌词文件，则请自行修改源码或使用其他跨域请求，这里不会再做更新。

如何使用

自行构建，如已安装Node

如果需要修改样式(scss文件)或其他源码，推荐使用该方式

(c)npm install

gulp compile

gulp build

在head中加入css

在

中 创建Dom(Smusic容器)

...

...

创建musicList文件或者数组,歌曲列表格式如下

var songList = [

{

title : '成都',

singer : '赵雷',

audio : 'http://m2.music.126.net/4gwWNLUdEZuPCKGUWWu_rw==/18720284975304502.mp3',

thumbnail : 'http://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg',

lyric : './data/chengdu.lrc'

}

]

在前加入JS

container : document.getElementById('my-music')

});

smusic.init()

-- EOF -- 本文标题：HTML5列表音乐播放器SMusic

本文链接：https://smohan.net/blog/smusic