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

a335b92475bbe839bd661aa921ba2958.png

94a6dc5feabd4193c6b752bf51a273a1.png

插件描述:一款基于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);

}

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unzipping/Users/xq/.gradle/wrapper /dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zi

unzipping/Users/xq/.gradle/wrapper /dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to /Users/xq/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9 可能是下载时网络原因造成文件缺失 解决方法: cd /Users/xq/.gradle/w…

WIFI小车APP

对应这篇文章&#xff1a;433M射频遥控灯、震动感应灯、WIFI避障小车 目录代码概要activity_contrl.xmlContrlActivity.javaNetUtils.java详细工程代码下载代码概要 activity_contrl.xml <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android&qu…

[Web App]必胜客宅急送产品设计思路介绍[转]

O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向&#xff0c;迎合餐饮消费者从以往经验判断为主转变为依靠移动设备、LBS、社交网络进行立体决策的过程。App成为联系消费者和餐饮业的重要纽带&#xff0c;承载着在O2O双向流程的闭环中加深消费者对品牌的认同和感情认知的…

使用Raphael实现html中绘图

2019独角兽企业重金招聘Python工程师标准>>> 首先&#xff1a;下载Raphael的javascript库&#xff1a;http://raphaeljs.com/。或者在html页面<head></head>&#xff1a;如下 <script src"http://www.zfanw.com/blog/raphael.js"></…

vivo手机刷机鸿蒙,捡到vivo手机如何刷机

捡到手机&#xff0c;首先建议归还给失主&#xff01;然后如果需要刷机的话&#xff0c;建议可以清除账户密码&#xff1a;可以尝试在手机关机状态同时按住音量上键以及电源键3到4秒手机出现vivo手机标志后&#xff0c;放开按键进入recovery模式&#xff0c;先选择wipe data/fa…

详解ROM和RAM

参考&#xff1a;详解ROM和RAM 作者&#xff1a;嵌入式实验楼 网址&#xff1a;https://mp.weixin.qq.com/s/FhUxMLeAxkhWe5m-gV_hMw 目录1、只读存储器&#xff1a;ROM2、随机访问存储器&#xff1a;RAM内存是计算系统最重要的元素&#xff0c;因为没有它&#xff0c;计算机就…

深入理解STM32内存管理

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

html 手写字效果,canvas画布实现手写签名效果的示例代码

最近项目中涉及到移动端手写签名的功能需求&#xff0c;将实现代码记录于此&#xff0c;供小伙伴们参考指摘哦~HTML代码&#xff1a;手写区清除确定CSS样式&#xff1a;.mSign_signMark_box{padding: 15px 15px 26px 15px;}.mSign_signMark_footer{max-width:640px;margin:0 au…

FTP云盘

参考&#xff1a;FTP云盘项目 作者&#xff1a;糯米啊啊 发布时间&#xff1a; 2021-08-19 10:34:05 网址&#xff1a;https://blog.csdn.net/weixin_43732386?spm1001.2014.3001.5509 参考&#xff1a;自制FTP云盘项目 作者&#xff1a;不说话的小脑斧 发布时间&#xff1a; …

html transform属性,css3 transform属性详解

CSS3变形是一些效果的集合&#xff0c;比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果&#xff0c;每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。CSS3的2D transform函数包括了translate()、scale()、ro…

PHP调用新浪API 生成短链接

我们经常收到类似于这样的短信&#xff08;如下图&#xff09;&#xff0c;发现其中的链接并不是常规的网址链接&#xff0c;而是个短小精悍的短链接&#xff0c;产品中经常需要这样的需求&#xff0c;如果在给用户下发的短信中是一个很长的连接&#xff0c;用户体验肯定很差&a…

Chrome如何下载网页视频

目录第一步&#xff1a;右键&#xff0c;选择「检查」指令&#xff0c;进入代码控制面板第二步&#xff1a;单击代码面板左上角红色标出来的按钮&#xff0c;然后鼠标移到左边视频上第三步&#xff1a;双击src后面的代码&#xff08;全部展开&#xff09;&#xff0c;复制粘贴到…

单链表反转

参考&#xff1a;【图文解析】反转一个单链表 作者&#xff1a;giturtle 发布时间&#xff1a; 2019-03-18 15:26:38 网址&#xff1a;https://blog.csdn.net/qq_42351880/article/details/88637387?spm1001.2014.3001.5501 目录例题描述思路代码实现例题描述 反转一个链表 …

MODBUS通讯协议详解(基于485)

参考&#xff1a;灵育科技Modbus课程总结 作者&#xff1a;Naunyang 时间&#xff1a;2020-11-23 13:51:58 网址&#xff1a;https://blog.csdn.net/Naunyang/article/details/108740456?spm1001.2014.3001.5502 参考&#xff1a;MODBUS用于单片机通讯 作者&#xff1a;hillch…

C\C++与Java中的static关键字

C\C里面的static&#xff1a; 面向过程的static&#xff1a; 在c和c面向过程的设计里&#xff0c;在全局变量前加上static关键字则可将该变量定义为一个静态全局变量&#xff0c;比如&#xff1a; static int a; 那么c和c中的静态全局变量有什么特点呢&#xff1a; 1、 变…

步进电机、伺服电机、舵机、无刷电机、有刷电机区别

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

PID算法实现温控

参考&#xff1a;PID算法 作者&#xff1a;hillchina 发布时间&#xff1a; 2016-09-28 21:48:04 网址&#xff1a;https://www.bilibili.com/video/BV1Ds411t7Hr 以上完整的视频教程在腾讯课堂里有&#xff0c;在腾讯课堂里搜索PID&#xff0c;找到灵育科技&#xff0c;课程对…

[Unity3d]多个摄像机叠加效果

今天学习到一个多个摄像机看到的场景在同一个层显示&#xff0c;比如我们做一个类似反光镜的效果&#xff0c;当然反光镜可以直接用Shader来实现&#xff0c;但我就是了实现一个类比这样的一个效果&#xff0c;一个摄像机将看到的图像显示到一个Texture上&#xff0c;然后将Tex…

Java关键字final使用详解

2019独角兽企业重金招聘Python工程师标准>>> http://docs.oracle.com/javase/tutorial/java/IandI/final.htmlWriting Final Classes and MethodsYou can declare some or all of a classs methods final. You use the final keyword in a method declaration to in…

一行代码揭开CPU执行原理

参考&#xff1a;一行代码&#xff0c;揭开CPU执行原理&#xff01; 作者&#xff1a;嵌入式ARM 网址&#xff1a;https://mp.weixin.qq.com/s/qFnKhWqBGRCFAnp_KC1dmw 目录1、高级语言2、编译链接3、机器指令4、指令格式5、执行指令拓展总结很多刚刚入坑的小白可能对此完全没有…