jQuery MPlayer音乐播放器插件

所属分类:媒体-音频和视频

 18552  72  查看评论 (43)
jQuery MPlayer音乐播放器插件 ie兼容10

MPlayer音乐播放器

MPlayer V2.0.0贺新春版于2017.01.01正式发布,本次更新要点: 1. 代码重写,拆分核心功能和特效,只为更好的自定义 2. 支持HTML结构自定义,只需添加指定class即可 3. 新增诸多API接口,方便调用 4. 删除部分无用的配置项 5. 新增多个回调函数 6. 新增多个配置项

截图

开始使用

简单的使用MPlayer

HTML结构

MPlayer完整版的HTML结构,可自定义

HTML

<div class="mp">
	<div class="mp-box">
		<img src="img/mplayer_error.png" alt="music cover" class="mp-cover">
		<div class="mp-info">
			<p class="mp-name">歌名</p>
			<p class="mp-singer">歌手</p>
			<p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
		</div>
		<div class="mp-btn">
			<button class="mp-prev" title="上一首"></button>
			<button class="mp-pause" title="播放"></button>
			<button class="mp-next" title="下一首"></button>
			<button class="mp-mode" title="播放模式"></button>
			<div class="mp-vol">
				<button class="mp-vol-img" title="静音"></button>
				<div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
					<div class="mp-vol-current"></div>
					<div class="mp-vol-circle"></div>
				</div>
			</div>
		</div>
		<div class="mp-pro">
			<div class="mp-pro-current"></div>
		</div>
		<div class="mp-menu">
			<button class="mp-list-toggle"></button>
			<button class="mp-lrc-toggle"></button>
		</div>
	</div>
	<button class="mp-toggle">
		<span class="mp-toggle-img"></span>
	</button>
	<div class="mp-lrc-box">
		<ul class="mp-lrc"></ul>
	</div>
	<button class="mp-lrc-close"></button>
	<div class="mp-list-box">
		<ul class="mp-list-title"></ul>
		<table class="mp-list-table">
			<thead>
				<tr>
					<th>歌名</th>
					<th>歌手</th>
					<th>时长</th>
				</tr>
			</thead>
			<tbody class="mp-list"></tbody>
		</table>
	</div>
</div>

引入CSS和JS

您需要在页面中引入一个CSS和一个JS文件

HTML

<link rel="stylesheet" href="css/mplayer.min.css">
<script src="js/mplayer.min.js"></script>

请自行修改路径

初始化播放器

您需要用一段JavaScript代码来创建一个MPlayer播放器

JavaScript

new MPlayer({
	// 容器选择器名称
	containerSelector: '.mp',
	// 播放列表,格式请参考mplayer-list.js
	songList: mplayer_song,
	// 专辑图片错误时显示的图片
	defaultImg: 'img/mplayer_error.png',
	// 自动播放
	autoPlay: false,
	// 播放模式(0->顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认))
	playMode:0,
	// 第一首播放的列表
	playList:0,
	// 第一首播放的歌曲
	playSong:5,
	// 当前歌词距离顶部的距离
	lrcTopPos: 34,
	// 列表模板,用${变量名}$插入模板变量
	listFormat: '<tr><td>${name}$</td><td>${singer}$</td><td>${time}$</td></tr>',
	// 音量滑块改变事件名称
	volSlideEventName:'change',
	// 初始音量
	defaultVolume:80
});

参数说明                     

名称说明默认值是否选填接受类型版本号
containerSelector包裹MPlayer播放器的容器,可设置多个jQuery Selector1.3.3及以上
songList歌曲播放列表,格式请参考mplayer-list.jsArray1.0.0及以上
defaultImg专辑图片错误时显示的图片String2.0.0及以上
autoPlay初始化完成后是否自动播放trueBoolean1.2.0及以上
playMode播放模式(关于播放模式0Int1.0.0及以上
playList第一首播放的歌曲所属的列表序号0Int1.0.0及以上
playSong第一首播放的歌曲在列表中的索引(忽略basic)0Int1.0.0及以上

以下配置项已被移除

playRotate播放时专辑图片是否旋转(已于V2.0.0移除)            trueBoolean仅1.3.3
useDefaultStyle您是否正在使用默认样式(如果您对样式有了大幅度调整或重写了样式,请将此项设置为false,否则您的排版可能会错乱)(已于V2.0.0移除)            trueBoolean仅1.3.3
lrcHeight歌词区域的高度(当useDefaultStyle设置为false时本配置项无效)(已于V2.0.0移除)            160Int仅1.3.3
beforePlay每首歌播放开始前的回调函数,接受一个参数作为歌曲信息(V2.0.0回调函数不在配置项中绑定,详情            Function1.3.3及以上
canPlay歌曲缓冲到可以播放时的回调函数(用户跳跃播放时间时同样会触发),接受一个参数作为歌曲信息(已于V2.0.0移除)            Function仅1.3.3

回调函数

MPlayer2.0.0采用了通过回调函数绑定事件的方法,代码如下

JavaScript

new MPlayer(options,function () {
    this.on(eventName, callback);
});
函数名触发时间返回值
afterInit初始化完成-
beforePlay播放前返回fasle可以取消播放
timeUpdate时间变化时-
end播放完毕后返回fasle可以取消播放下一首
mute静音状态改变时-
changeMode播放模式改变时-

所有回调函数已使用apply改变了this指向,您可以直接在回调函数中使用this代指MPlayer对象

相关插件-音频和视频

1:1模仿虾米音乐播放器,歌词与播放进度同步

能够很好地对歌词进行同步,1:1模仿虾米音乐播放器,希望有兴趣的朋友能够相互支持。
  音频和视频
 22263  161

h5视频播放器

支持拖拽与点击跳转可以切换全屏并且支持音量调节已经绑定键盘事件
  音频和视频
 23939  101

jwplayer响应式多终端适配视频播放器

jwplaye,自定义视频图片封面,全浏览器兼容、响应式多终端适配视频播放器
  音频和视频
 122823  349

jQuery音乐播放插件jPlayer

简洁的音乐插件jPlayer
  音频和视频
 16957  61

讨论这个项目(43)回答他人问题或分享插件使用方法奖励jQ币

    咚恰恰~ 0
    2018/6/4 17:35:06
    为啥我把样式和js引入进去了,那个插件缩放按钮点不动,播放器不显示不了在页面上 回复
    正在刷新… 0
    2018/5/30 15:55:59
    这样的插件必须把CSS和JS引入进去吗 那网上的那些音乐插件具体怎么用 哪位大佬能给说一下详细的步骤吗 回复
    bulezdf 0
    2018/3/27 22:39:20
    我的播放列表都是$符号,歌名,歌手,时长全都是"$",歌曲是可以放出声来,点击一个歌曲列表项也没问题,播放器中也能显示正常,只有列表显示不出
        bulezdf0
        2018/3/28 20:20:08
        翘首等大佬
    回复
    某年某月某日。 0
    2018/3/1 16:04:18
    怎么跟ajax交互一起使用呢?为什么我用ajax交互后会报cannot read property 'audio' of undefined 急急急!!
    回复
    AmLMLM 0
    2018/2/21 22:27:13
    初始化完成后,没有添加歌曲到列表的接口吗? 
        0936zz1
        2018/2/22 2:47:58

        有的

        player=new mplayer()
        player.addsong()
        AmLMLM0
        2018/3/1 23:13:13
        再问下 就是初始化播放器后,让列表都是空的怎么弄. 因为我看这个代码是每次初始化必须在列表下有歌曲,不然空指针
    回复
    艾伦盖尔 0
    2017/10/26 14:08:00
    当音乐文件不存在404时 我怎么判断?异步加载数据列表到页面数组,然后 下一曲或者开始播放时,发现 音频地址 不存在404,我如何捕捉到然后再去 提示用户?
        艾伦盖尔0
        2017/10/26 14:25:57

        楼主  在线等~~~  

    回复
    有的是坚强! 0
    2017/9/14 11:12:01

    请问怎么实现添加歌曲进去的功能呢

    回复
    开拓丿飞 0
    2017/9/10 16:08:24

    请问,怎么动态的更改播放列表,或者说,怎么销毁上一次new的 mplayer

    回复
    ?hezhou 0
    2017/8/30 11:33:05

    请问如果我不需要显示歌词的需求,并且也没有lrc文件,如何用这个插件呢. 因为文档中说明配置歌单列表的时候lrc是必配项目

    回复
    因为梦里有西啊 0
    2017/8/21 20:58:49
取消回复