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

相关插件-音频和视频

CKplayer

简单的CKplayer demo
  音频和视频
 33108  83

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 8459  80

音乐播放器

音乐播放器插件
  音频和视频
 10015  51

音乐歌词同步播放器

jplayer实现歌词同步的JS音乐播放器效果
  音频和视频
 5897  57

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

    流氓兔的心酸 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问题,正在修复
    回复
    One丶 0
    2017/2/17 17:48:22

    能问下你的歌曲地址是在哪里弄的吗,我的都不行啊

    回复
    One丶 0
    2017/2/17 17:23:27

    自己弄歌词列表有些麻烦,哈哈

    回复
    君がくれたもの 0
    2017/2/13 14:14:22

    Uncaught TypeError: Cannot read property 'apply' of undefined什么原因?

        0936zz0
        2017/2/20 12:25:04

        https://git.oschina.net/0936zz/WMPlayer/

        新版已解决此bug

    回复
    浅时光╁ 0
    2017/1/31 10:09:30

    怎么改歌??

        0936zz0
        2017/2/1 1:21:58

        请打开js/wmplayer-list.js(https://git.oschina.net/0936zz/WMPlayer/blob/master/js/wmplayer-list.js?dir=0&filepath=js%2Fwmplayer-list.js),内有详细说明

    回复
    programPHP 0
    2017/1/24 23:22:24

    大赞啊!!!!!

    回复
取消回复