admin 管理员组

文章数量: 1184232

插件描述：一款基于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调用

new SMusic({

musicList : musicList,

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

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

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

console.log(obj);

}

});

本文标签： 播放器 列表 在线音乐 音乐 SMusic

版权声明：本文标题：html5在线音乐列表播放器,HTML5列表音乐播放器SMusic 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754993302a3058919.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。