Repository files navigation

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.

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

MUST BE CAREFUL WHEN YOU UPDATE!!

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

or

npm install bplayer

then

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

or

import bPlayer from 'bplayer';

Include bplayer.js, put an audio element with 'controls' attribute, usebPlayer.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(){varbplayer1=newbPlayer("#bp1");bplayer.color("/*Theme color*/").src("/*Audio URL*/").title("/*Title1*/").artist("/*Artist*/").cover("/*Cover URL*/");varbp2=document.querySelector('#bp2')varbplayer2=newbPlayer(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>...<divid="bp1"></div><divid="bp2"></div><audiosrc="/*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:

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

Notice 1:After loaded bPlayer, all audio nodes will be scanned if you executebPlayer.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.

bPlayer.version;// Get the version of bPlayerbPlayer.scan();// Scan the page for 'audio' tags with 'controls' attribute and replace them to bPlayervarbplayer=newbPlayer([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

varbplayer=newbPlayer("#bplayer"/* CSS selector or node object */,{src:"aaa.mp3",// Stringtitle:"Title",// Stringartist:"artist",// Stringcolor:"color",// Stringvolume:1,// Number, [0~1]muted:false,// Boolautoplay:false,// Boolloop:false,// Boolslim:false// Bool});

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

As to those elements that have been turned into bplayer, you can still access them just like the original audio element, such aselement.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(...)

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

Any questions or suggestions please submit an Issue or make a PullRequest or contact my E-mailsyqlds@126.com

And visiting my blogDimension C is also welcomed.

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

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(){varbplayer1=newbPlayer("#bp1");bplayer.color("/*进度条颜色*/").src("/*歌曲链接*/").title("/*歌曲名称1*/").artist("/*艺术家*/").cover("/*专辑封面链接*/");varbp2=document.querySelector('#bp2')varbplayer2=newbPlayer(bp2,{cover:"/*专辑封面链接*/",title:"/*歌曲名称2*/",artist:"/*艺术家*/",autoplay:false/*Bool, 是否自动播放*/,slim:true,/*Bool, 是否苗条模式*/});bPlayer.scan();}</script>...<divid="bp1"></div><divid="bp2"></div><audiosrc="/*歌曲链接*/"cover="/*专辑封面链接*/"title="/*歌曲名称3*/"artist="/*艺术家*/"color="/*进度条颜色*/"slim="/*是否启用苗条模式*/"autoplay="/*是否自动播放*/"loop="/*是否循环播放*/"controls="bplayer"></audio>

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

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

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

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

bPlayer.version;// 获取bPlayer版本bPlayer.scan();// 扫描页面内带有'controls'属性的'audio'标签并将它们转化为bPlayervarbplayer=newbPlayer([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]) // 解绑事件

varbplayer=newbPlayer({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字段必须存在

对于已经被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(...)

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

如有疑问或者建议欢迎提Issue或者PullRequest或者联系我的邮箱syqlds@126.com

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

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