插件描述：一款基于HTML5、Css3的列表式音樂播放器，包含列表，音量，進度，時間，歌詞展示以及模式等功能，不依賴任何庫

SMusic使用方法

這是一款基于HTML5以及CSS3的列表式音樂播放器，增加了列表播放，音量控制，播放進度，播放時間以及播放模式，上一曲，下一曲等功能，已增加歌詞功能。采用原生JavaScript編寫，不依賴任何庫文件，兼容支持html5的瀏覽器。下載包中的代碼已壓縮。

可配置參數(shù)參數(shù)名類型默認值可選值說明

musicListArray Object[]自定義,格式如[{title:'標題',singer:'歌手',cover:'封面',src:'地址'}]播放媒體文件列表

defaultVolumeNumber.7自定義，范圍在 0 - 1 之間初始化音量值

defaultIndexNumber0初始化播放索引

autoPlay[1.0.1新增]booleantrue是否自動播放

defaultMode[1.0.2新增]Number11：列表模式，2：隨機模式，3：單曲循環(huán)默認播放模式，隨機模式優(yōu)先于defaultIndex

callback[1.0.2新增]Functionfunction (obj) { }返回當前播放媒體文件信息(Object)

關(guān)于歌詞

由于涉及AJAX請求，請在服務(wù)器環(huán)境下演示

目前只支持UTF8編碼歌詞文件，歌詞形式如下：[offset:0]

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

[00:02.21]詞：李健

[00:02.96]曲：竹內(nèi)瑪利亞

[00:04.43]

[00:37.57]車窗外戀人相擁

[00:42.62]還在難舍難離

[00:46.08]

[00:47.67]汽笛聲突然響起123456789

由于歌詞文件需要AJAX加載，目前，只能加載同域文件，如果需要跨域加載歌詞，如遠程歌詞文件，則請自行修改源碼(102行)為jsonp請求，這里不會再做更新。

歌詞每行高度如果更改(默認30px)，請同時修改js源碼356行?var top = (i-1) * 30; //30是每個LI的高度

播放器整體樣式叫丑，請自行更改CSS文件，注意不要修改類名

CSS

HTML

標題歌手

00:00/00:00

• 暫無歌詞...?

JS調(diào)用

new?SMusic({

musicList?:?musicList,

autoPlay??:?true,??//是否自動播放

defaultMode?:?2,???//默認播放模式，隨機

callback???:?function?(obj)?{??//返回當前播放歌曲信息

console.log(obj);

}

});

總結(jié)

以上是生活随笔為你收集整理的html5在线音乐列表播放器,HTML5列表音乐播放器SMusic的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。