300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html5音乐列表播放器 HTML5列表音乐播放器SMusic

html5音乐列表播放器 HTML5列表音乐播放器SMusic

时间:2021-01-24 08:57:31

相关推荐

html5音乐列表播放器 HTML5列表音乐播放器SMusic

插件描述:一款基于HTML5、Css3的列表式音乐播放器,包含列表,音量,进度,时间,歌词展示以及模式等功能,不依赖任何库

SMusic使用方法

这是一款基于HTML5以及CSS3的列表式音乐播放器,增加了列表播放,音量控制,播放进度,播放时间以及播放模式,上一曲,下一曲等功能,已增加歌词功能。采用原生JavaScript编写,不依赖任何库文件,兼容支持html5的浏览器。下载包中的代码已压缩。

可配置参数参数名类型默认值可选值说明

musicListArray Object[]自定义,格式如[{title:'标题',singer:'歌手',cover:'封面',src:'地址'}]播放媒体文件列表

defaultVolumeNumber.7自定义,范围在 0 - 1 之间初始化音量值

defaultIndexNumber0初始化播放索引

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

defaultMode[1.0.2新增]Number11:列表模式,2:随机模式,3:单曲循环默认播放模式,随机模式优先于defaultIndex

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

关于歌词

由于涉及AJAX请求,请在服务器环境下演示

目前只支持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]汽笛声突然响起123456789

由于歌词文件需要AJAX加载,目前,只能加载同域文件,如果需要跨域加载歌词,如远程歌词文件,则请自行修改源码(102行)为jsonp请求,这里不会再做更新。

歌词每行高度如果更改(默认30px),请同时修改js源码356行var top = (i-1) * 30; //30是每个LI的高度

播放器整体样式叫丑,请自行更改CSS文件,注意不要修改类名

CSS

HTML

标题歌手

00:00/00:00暂无歌词...

JS调用

newSMusic({

musicList:musicList,

autoPlay:true,//是否自动播放

defaultMode:2,//默认播放模式,随机

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

console.log(obj);

}

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。