xiaoxue_admin
/
APlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lrc in js

This commit is contained in:
DIYgod 2016-04-04 02:06:11 +08:00
parent 512d66ce05
commit 16330ca044
7 changed files with 191 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,2 +1,3 @@
.idea
node_modules
node_modules
demo2

42
README.md
View File

@ -62,14 +62,15 @@ ap.init();
element: document.getElementById('player1'), // Optional, player element
narrow: false, // Optional, narrow style
autoplay: true, // Optional, autoplay song(s), not supported by mobile browsers
showlrc: false, // Optional, show lrc
showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
mutex: true, // Optional, pause other players when this player playing
theme: '#e6d0b2', // Optional, theme color, default: #b7daff
music: { // Required, music info
music: { // Required, music info, see: ###With playlist
title: 'Preparation', // Required, music title
author: 'Hans Zimmer/Richard Harvey', // Required, music author
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', // Required, music url
pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' // Optional, music picture
lrc: '[00:00.00]lrc here' // Optional, lrc, see: ###With lrc
}
}
```
@ -84,7 +85,9 @@ ap.init();
```js
var APlayer = require('APlayer');
var ap = new APlayer({...});
var ap = new APlayer({
// ...
});
```
### With lrc
@ -100,11 +103,32 @@ Support multiple time tag, support three decimal second
...
```
#### HTML:
#### LRC in JS:
JS:
```js
{
showlrc: 1,
music: {
lrc: '[00:00.00]' // lrc here, separate lines with \n
}
}
```
#### LRC in HTML:
JS:
```js
{
showlrc: 2
}
```
HTML:
```HTML
<link rel="stylesheet" href="APlayer.min.css">
<!-- ... -->
<div id="player1" class="aplayer">
<pre class="aplayer-lrc-content">
[ti:平凡之路]
@ -132,14 +156,8 @@ Support multiple time tag, support three decimal second
<!-- ... -->
</pre>
</div>
<!-- ... -->
<script src="APlayer.min.js"></script>
```
#### JS:
Option: `showlrc: true`
### With playlist
#### JS:

530
demo/index.html
View File

File diff suppressed because one or more lines are too long

2
dist/APlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/APlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "aplayer",
"version": "1.3.10",
"version": "1.4.0",
"description": "Wow, such a beautiful html5 music player",
"main": "dist/APlayer.min.js",
"scripts": {

50
src/APlayer.js
View File

@ -22,7 +22,7 @@
narrow: false,
autoplay: false,
mutex: true,
showlrc: false,
showlrc: 0,
theme: '#b7daff'
};
for (let defaultKey in defaultOption) {
@ -130,15 +130,29 @@
*/
init() {
this.element = this.option.element;
this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music;
this.multiple = this.playIndex > -1;
this.music = this.multiple ? this.option.music[this.playIndex] : this.option.music;
let i;
// parser lrc
if (this.option.showlrc) {
let lrcs = [];
for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {
lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);
if (this.option.showlrc === 1) {
if (this.multiple) {
for (i = 0; i < this.option.music.length; i++) {
lrcs.push(this.option.music[i].lrc);
}
}
else {
lrcs.push(this.option.music.lrc);
}
}
else if (this.option.showlrc === 2 || this.option.showlrc === true) {
for (i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) {
lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML);
}
}
this.lrcs = this.parseLrc(lrcs);
}
@ -181,11 +195,11 @@
</div>
</div>
</div>
<i class="demo-icon aplayer-icon-loop"></i>${(this.playIndex > -1 ? `<i class="demo-icon aplayer-icon-menu"></i>` : ``)}
<i class="demo-icon aplayer-icon-loop"></i>${(this.multiple ? `<i class="demo-icon aplayer-icon-menu"></i>` : ``)}
</div>
</div>
</div>`;
if (this.playIndex > -1) {
if (this.multiple) {
eleHTML += `
<div class="aplayer-list">
<ol>`;
@ -227,7 +241,7 @@
});
// click music list: change music
if (this.playIndex > -1) {
if (this.multiple) {
const listItem = this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li');
for (let i = 0; i < this.option.music.length; i++) {
listItem[i].addEventListener('click', () => {
@ -354,17 +368,17 @@
if (this.loop) {
loopEle.classList.add('aplayer-noloop');
this.loop = false;
this.audio.loop = this.playIndex > -1 ? false : this.loop;
this.audio.loop = this.multiple ? false : this.loop;
}
else {
loopEle.classList.remove('aplayer-noloop');
this.loop = true;
this.audio.loop = this.playIndex > -1 ? false : this.loop;
this.audio.loop = this.multiple ? false : this.loop;
}
});
// toggle menu control
if (this.playIndex > -1) {
if (this.multiple) {
this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', () => {
const list = this.element.getElementsByClassName('aplayer-list')[0];
if (!list.classList.contains('aplayer-list-hide')) {
@ -386,11 +400,11 @@
*/
setMusic(index) {
// get this.music
if (this.playIndex > -1 && typeof(index) !== 'undefined') {
if (this.multiple && typeof(index) !== 'undefined') {
this.playIndex = index;
}
const indexMusic = this.playIndex;
this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music;
this.music = this.multiple ? this.option.music[indexMusic] : this.option.music;
// set html
if (this.music.pic) {
@ -398,7 +412,7 @@
}
this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title;
this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ` - ${this.music.author}`;
if (this.playIndex > -1) {
if (this.multiple) {
if (this.element.getElementsByClassName('aplayer-list-light')[0]) {
this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light');
}
@ -412,7 +426,7 @@
}
// get this audio object
if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) {
if ((this.multiple && !this.audios[indexMusic]) || this.playIndex === -1) {
this.audio = document.createElement("audio");
this.audio.src = this.music.url;
this.audio.preload = this.isMobile ? 'none' : 'metadata';
@ -436,7 +450,7 @@
});
// multiple music play
if (this.playIndex > -1) {
if (this.multiple) {
this.audio.addEventListener('ended', () => {
if (this.playIndex < this.option.music.length - 1) {
this.setMusic(++this.playIndex);
@ -461,9 +475,9 @@
this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100;
// loop
this.audio.loop = this.playIndex > -1 ? false : this.loop;
this.audio.loop = this.multiple ? false : this.loop;
if (this.playIndex > -1) {
if (this.multiple) {
this.audios[indexMusic] = this.audio;
}
}
@ -475,7 +489,7 @@
// fill in lrc
if (this.option.showlrc) {
this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0];
this.lrc = this.multiple ? this.lrcs[indexMusic] : this.lrcs[0];
let lrcHTML = '';
this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0];
for (let i = 0; i < this.lrc.length; i++) {