bPlayer

Demo

bPlayer - A great replacement for audio elements

No need for jQuery, with lots of original audio api maintained, together with title, artists and cover supported in addition. Much more pretty than the browser's default audio player!

Aimed at replacing the default audio player of any modern browser, brining you a united experience of audio playing.

Very Important!!!

Since v0.2.0-alpha.1, the behavior of bPlayer differs form v0.1.0!! Behavior changed from append to replace the attached element directly! All attributes are maintained and can be accessed as before!

MUST BE CAREFUL WHEN YOU UPDATE!!

Installation

git clone https://github.com/classicoldsong/bPlayer.git

or

npm install bplayer

then

<script src="bplayer.js"></script>

or

import bPlayer from 'bplayer';

Configuration and usage

Include bplayer.js, put an audio element with 'controls' attribute, use bPlayer.scan() to scan the document after dom content is loaded, and it's all done~ Otherwise you can attach to an element manually.

Here's a simple example:

<script>
	window.onload = function(){
		var bplayer1 = new bPlayer("#bp1");
		bplayer.color("/*Theme color*/").src("/*Audio URL*/").title("/*Title1*/").artist("/*Artist*/").cover("/*Cover URL*/");
		var bp2 = document.querySelector('#bp2')
		var bplayer2 = new bPlayer(bp2, {
			cover: "/*Cover URL*/",
			title: "/*Title2*/",
			artist: "/*Artist*/",
			autoplay: false /*Bool, whether play the music when created*/,
			slim: true, /*Bool, whether enable 'slim mode'*/
		});
		bPlayer.scan();
	}
</script>
...

<div id="bp1"></div>
<div id="bp2"></div>
<audio src="/*Audio URL*/" cover="/*Cover URL*/" title="/*Title3*/" artist="/*Artist*/" color="/*Theme color*/" slim="/*Whether enable 'slim mode'*/" autoplay="/*Whether play the music when created*/" loop="/*Whether enable loop*/" controls="bplayer"></audio>

When the web page finished loading you will see:

<bplayer title="/*Title1*/" id="bp1">...</bplayer>
<bplayer title="/*Title2*/" id="bp2">...</bplayer>
<bplayer title="/*Title3*/" controls="bplayer">...</bplayer>

Notice 1: After loaded bPlayer, all audio nodes will be scanned if you execute bPlayer.scan(), and then all audio nodes with 'controls="bplayer"' attribute will be turned into bplayer nodes. All attributes of the original audio node will be maintained, including id, class and style.

Notice 2: When manually attached an audio node, the original audio element will be used as the audio source.

API

Default method

bPlayer.version; // Get the version of bPlayer
bPlayer.scan(); // Scan the page for 'audio' tags with 'controls' attribute and replace them to bPlayer
var bplayer = new bPlayer([Node]);

• bplayer.data([JSON]) // Set ALL options of the player, leave empty will givebackJSON data which describes the music
• bplayer.slim([bool]) // Whether enable 'slim mode'
• bplayer.src([url]) // Set the src to audio source, leave empty will giveback current value
• bplayer.cover([url]) // Set the url of cover, leave empty will giveback current value
• bplayer.title([string]) // Set the title, leave empty will giveback current value
• bplayer.artist([string]) // Set the artist, leave empty will giveback current value
• bplayer.color([color]) // Set the color of progress bar and volme bar, leave empty will giveback current value
• bplayer.volume([number 0 ~ 1]) // Set volume, leave empty will giveback current value
• bplayer.muted([bool]) // Set muted, leave empty will giveback current value
• bplayer.autoplay([bool]) // Set whether play automatically when new audio is loaded, leave empty will giveback current value, if you would like to play immediately after creation, please set this property before 'src'
• bplayer.loop([bool]) // Set whether loop automatically, leave empty will giveback current value
• bplayer.play() // Play
• bplayer.pause() // Pause
• bplayer.paused() // Acquire the playing status
• bplayer.addListener(type, listener[, useCapture]) // Add an event listener to this player
• bplayer.removeListener(type, listener[, useCapture]) // Remove an event listener from this player

Using JSON for creation

var bplayer = new bPlayer("#bplayer"/* CSS selector or node object */, {
	src: "aaa.mp3", // String
	title: "Title", // String
	artist: "artist", // String
	color: "color", // String
	volume: 1, // Number, [0~1]
	muted: false, // Bool
	autoplay: false, // Bool
	loop: false, // Bool
	slim: false // Bool
});

No need for bplayer.init() when using JSON for creation. Key element must exist while others can be left unset

BPLAYER Tag

As to those elements that have been turned into bplayer, you can still access them just like the original audio element, such as element.src = 'aaa.mp3', supported features are listed below:

• element.bp Get bplayer object of this element
• element.play()
• element.pause()
• element.data
• element.slim
• element.src
• element.cover
• element.title
• element.artist
• element.color
• element.volume
• element.muted
• element.autoplay
• element.loop
• element.paused
• element.addListener(...)
• element.removeListener(...)

TBD

• Lyric (Abandoned)
• Playlist (Abandoned)
• Events API

License: MIT

Any questions or suggestions please submit an Issue or make a PullRequest or contact my E-mail [email protected]

And visiting my blog Dimension C is also welcomed.

All copyrights of audios used in DEMO are reserved by original authors

bPlayer

Demo演示

bPlayer - 原生音频播放器的绝佳替代品

无需jQuery且保留了大量原生audio元素的api，同时增加了歌曲名称、艺术家和专辑封面的显示

旨在取代各浏览器的原生播放器以带来更丰富的操作以及更统一的体验

非常重要！！

bPlayer 自 v0.2.0-alpha.1 起，行为与 v0.1.0 时不同！！由原先的append到绑定的元素的末尾改为了直接替换被绑定的元素！替换后原先元素的所有attribute全部保留，可以与替换之前一样操作！

更新请务必注意！！！

安装

git clone https://github.com/classicoldsong/bPlayer.git

或者

npm install bplayer

然后

<script src="bplayer.js"></script>

或者

import bPlayer from 'bplayer';

配置及使用

引入bplayer.js，丢个带controls的audio标签在页面里，页面加载完毕后使用bPlayer.scan();扫描页面，然后就搞定了~或者手动绑定元素也可以的说

下面是一个简单的示例：

<script>
	window.onload = function(){
		var bplayer1 = new bPlayer("#bp1");
		bplayer.color("/*进度条颜色*/").src("/*歌曲链接*/").title("/*歌曲名称1*/").artist("/*艺术家*/").cover("/*专辑封面链接*/");
		var bp2 = document.querySelector('#bp2')
		var bplayer2 = new bPlayer(bp2, {
			cover: "/*专辑封面链接*/",
			title: "/*歌曲名称2*/",
			artist: "/*艺术家*/",
			autoplay: false /*Bool, 是否自动播放*/,
			slim: true, /*Bool, 是否苗条模式*/
		});
		bPlayer.scan();
	}
</script>
...

<div id="bp1"></div>
<div id="bp2"></div>
<audio src="/*歌曲链接*/" cover="/*专辑封面链接*/" title="/*歌曲名称3*/" artist="/*艺术家*/" color="/*进度条颜色*/" slim="/*是否启用苗条模式*/" autoplay="/*是否自动播放*/" loop="/*是否循环播放*/" controls="bplayer"></audio>

页面加载完毕后你看到的是：

<bplayer title="/*歌曲名称1*/" id="bp1">...</bplayer>
<bplayer title="/*歌曲名称2*/" id="bp2">...</bplayer>
<bplayer title="/*歌曲名称*/" controls="bplayer">...</bplayer>

注意1： 引入bPlayer后，会在您执行bPlayer.scan()以后扫描页面内的所有audio节点，并将含有controls="bplayer"属性的audio节点转换为bplayer节点。原audio节点的所有attribute保留。

注意2： 手动绑定audio标签时将使用原audio标签作为音频来源。

API

链式操作法

bPlayer.version; // 获取bPlayer版本
bPlayer.scan(); // 扫描页面内带有'controls'属性的'audio'标签并将它们转化为bPlayer
var bplayer = new bPlayer([Node]);

• bplayer.data([JSON]) // 通过JSON刷新所有选项，留空返回当前歌曲信息
• bplayer.slim([bool]) // 设定是否开启苗条模式
• bplayer.src([url]) // 设定歌曲链接，留空返回当前值
• bplayer.cover([url]) // 设定封面链接，留空返回当前值
• bplayer.title([string]) // 设定标题，留空返回当前值
• bplayer.artist([string]) // 设定艺术家，留空返回当前值
• bplayer.color([color]) // 设定进度条颜色，留空返回当前值
• bplayer.volume([number 0 ~ 1]) // 设定音量，留空返回当前值
• bplayer.muted([bool]) // 设定静音，留空返回当前值
• bplayer.autoplay([bool]) // 设定自动播放，留空返回当前值，若希望创建后立即播放请在src前设置此项
• bplayer.loop([bool]) // 设定循环动播放，留空返回当前值
• bplayer.play() // 播放
• bplayer.pause() // 暂停
• bplayer.paused() // 获取播放状态
• bplayer.addListener(type, listener[, useCapture]) // 绑定事件
• bplayer.removeListener(type, listener[, useCapture]) // 解绑事件

JSON传入法

var bplayer = new bPlayer({
	element: "#bplayer" // CSS选择器或者Node对象
	src: "aaa.mp3", // String, 歌曲链接地址
	title: "Title", // String, 歌曲标题
	artist: "artist", // String, 歌曲艺术家
	color: "color", // String, 颜色代码
	volume: 1, // Number, [0~1], 音量大小
	muted: false, // Bool, 是否静音
	autoplay: false, // Bool, 是否自动播放
	loop: false, // Bool, 是否开启循环
	slim: false // Bool, 是否开启苗条模式
});

使用JSON传入法时无需使用bplayer.init()进行初始化，创建bplayer时将自动处理完毕。选项允许缺省，但是element字段必须存在

BPLAYER标签

对于已经被attach的元素，可以直接在元素上操作，操作方式与原生audio大同小异，比如element.src = 'aaa.mp3'，目前支持的有：

• element.bp 获取当前元素的bPlayer对象
• element.play()
• element.pause()
• element.data
• element.slim
• element.src
• element.cover
• element.title
• element.artist
• element.color
• element.volume
• element.muted
• element.autoplay
• element.loop
• element.paused
• element.addListener(...)
• element.removeListener(...)

TBD

• 歌词（已放弃，下个播放器见）
• 播放列表（已放弃，下个播放器见）
• 原生事件API

许可证：MIT

如有疑问或者建议欢迎提Issue或者PullRequest或者联系我的邮箱 [email protected]

当然也欢迎访问我的博客 C次元

DEMO中使用的音乐版权归原作者所有