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

相关插件-音频和视频

HTML5列表音乐播放器SMusic

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

jQuery使用jAudio.js插件实现流媒体音乐播放器

jQuery使用jAudio.js插件实现流媒体音乐播放器特效源码是一款基于jAudio.js插件实现的音乐网站播放器代码
  音频和视频
 13637  64

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

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

交互式的唱机

实验模板与一个交互式的老唱机的网络音频API。
  音频和视频
 9201  100

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

    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

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

    回复
    流氓兔的心酸 0
    2017/5/10 15:16:05
    Uncaught TypeError: Cannot read property 'src' of undefined什么原因?
        0936zz0
        2017/5/12 19:28:43

        你的歌曲列表配置不对

    回复
    Struggle 0
    2017/4/27 17:44:05

    请问有谁会安装吗?

        0936zz0
        2017/4/29 14:14:15

        http://0936zz.github.io/mplayer/documentation.html#start

    回复
    刘天剑 0
    2017/4/26 14:59:01

    音频文件在这里怎么播放不了呢?

    "src":"ftp://winuser:gxdx_wav@192.168……

        0936zz0
        2017/4/29 14:12:12
        试试http协议
    回复
    无休止的div 0
    2017/4/21 18:04:41

    不支持ie9啊

        0936zz0
        2017/4/29 14:13:02

        理论上来说是支持的,你可以试一下

    回复
    沵这是在装逼你知道吗 0
    2017/3/30 13:33:49
    在手机网页中歌曲播放不了 是什么原因?????
        0936zz0
        2017/3/31 0:42:46
        chrome问题,正在修复
        CD.0
        2017/7/17 14:46:30

        现在已经修复手机端了吗

    回复
取消回复