jQuery MPlayer音乐播放器插件

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

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对象

相关插件-音频和视频

jQuery HTML5音频视频库-jPlayer

jPlayer是完全自由和开放源码(MIT)用JavaScript编写的媒体库。一个jQuery的插件,(而现在的Zepto插件,) jPlayer可以让你快速编织跨平台的音频和视频到您的网页。jPlayer的全面的API允许你创建创新媒体解决方案。
  音频和视频
 21788  50

扁平html5音乐播放器代码

扁平html5音乐播放器代码
  音频和视频
 17900  28

jQuery仿微信公众号语音框插件weixinAudio.js

jQuery仿微信公众号的语音播放功能weixinAudio.js
  音频和视频
 2717  47

蓝色音乐播放器

网页上的一款网页上的一款音乐播放器!
  音频和视频
 16034  110

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

    有的是坚强! 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
    a'か张 志っ?文??? 0
    2017/8/19 16:22:30

    没网就放不了歌曲吗??

    为什么???????????

        西瓜0
        2017/9/11 20:41:26

        当然了,歌曲路径调用的别人的服务器的,不联网当然放不了了,你可以改成你本地的不就行了。

    回复
    CD. 0
    2017/7/17 14:55:12

    请问 这个适用于手机端吗 急用

    回复
    挚爱 0
    2017/6/15 10:34:42

    自己如果添加歌曲的话   从哪里去找啊

    回复
    如梦如幻一片蓝 0
    2017/6/6 14:06:54

    歌曲地址 都能从哪里找啊

    回复
    白天黑夜 0
    2017/6/4 15:05:53

    好用,感谢大神

    回复
    Sorl 0
    2017/6/2 13:47:16

    请问自己自定义个曲目,点击这个曲目也能在这个播放器里面播放?

    回复
取消回复