option: lrc -> lrcType
This commit is contained in:
DIYgod
parent
c3f74ddfe8
commit
738613fffe
10
demo/demo.js
10
demo/demo.js
|
|
@ -2,7 +2,7 @@ const ap1 = new APlayer({
|
|||
element: document.getElementById('player1'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
lrc: false,
|
||||
lrcType: false,
|
||||
mutex: true,
|
||||
preload: 'metadata',
|
||||
audio: [{
|
||||
|
|
@ -39,7 +39,7 @@ const ap2 = new APlayer({
|
|||
element: document.getElementById('player2'),
|
||||
mini: true,
|
||||
autoplay: false,
|
||||
lrc: false,
|
||||
lrcType: false,
|
||||
mutex: true,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
|
|
@ -55,7 +55,7 @@ const ap3 = new APlayer({
|
|||
element: document.getElementById('player3'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
mutex: true,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
|
|
@ -71,7 +71,7 @@ const ap4 = new APlayer({
|
|||
element: document.getElementById('player4'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
lrc: false,
|
||||
lrcType: false,
|
||||
mutex: true,
|
||||
theme: '#ad7a86',
|
||||
order: 'random',
|
||||
|
|
@ -103,7 +103,7 @@ const ap5 = new APlayer({
|
|||
element: document.getElementById('player5'),
|
||||
mini: false,
|
||||
autoplay: false,
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
mutex: true,
|
||||
theme: '#e9e9e9',
|
||||
listFolded: false,
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ audio.cover | - | audio cover
|
|||
audio.lrc | - | [see more details](https://aplayer.js.org/#/home?id=lrc)
|
||||
audio.theme | - | main color when switching to this audio, it has priority over the above theme
|
||||
mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
|
||||
lrc | false | [see more details](https://aplayer.js.org/#/home?id=lrc)
|
||||
lrcType | 0 | [see more details](https://aplayer.js.org/#/home?id=lrc)
|
||||
listFolded | false | indicate whether list should folded at first
|
||||
listMaxHeight | - | list max height
|
||||
|
||||
|
|
@ -105,7 +105,7 @@ const ap = new APlayer({
|
|||
mutex: true,
|
||||
listFolded: false,
|
||||
listMaxHeight: '90px',
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
|
|
@ -241,7 +241,7 @@ Player events
|
|||
|
||||
## LRC
|
||||
|
||||
We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option `lrc`, then put lrc to option `audio.lrc` or HTML.
|
||||
We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option `lrcType`, then put lrc to option `audio.lrc` or HTML.
|
||||
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer4"><button class="docute-button load">Click to load player</div>
|
||||
|
|
@ -254,7 +254,7 @@ The first way, put LRC to a LRC file, LRC file will be loaded when this audio st
|
|||
```js
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
|
|
@ -272,7 +272,7 @@ The second way, put LRC to a JS string.
|
|||
```js
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrc: 1,
|
||||
lrcType: 1,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
|
|
@ -309,7 +309,7 @@ The third way, put LRC to HTML.
|
|||
```js
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrc: 2,
|
||||
lrcType: 2,
|
||||
audio: [[
|
||||
{
|
||||
name: 'name1',
|
||||
|
|
@ -356,7 +356,7 @@ const ap = new APlayer({
|
|||
container: document.getElementById('player'),
|
||||
listFolded: false,
|
||||
listMaxHeight: '90px',
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ function aplayer1 () {
|
|||
window.ap1 = new APlayer({
|
||||
container: document.getElementById('aplayer1'),
|
||||
theme: '#F57F17',
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
|
|
@ -133,7 +133,7 @@ function aplayer3 () {
|
|||
mutex: true,
|
||||
listFolded: false,
|
||||
listMaxHeight: '90px',
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
|
|
@ -162,7 +162,7 @@ function aplayer3 () {
|
|||
function aplayer4 () {
|
||||
window.ap4 = new APlayer({
|
||||
container: document.getElementById('aplayer4'),
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
|
|
@ -177,7 +177,7 @@ function aplayer4 () {
|
|||
function aplayer5 () {
|
||||
window.ap5 = new APlayer({
|
||||
container: document.getElementById('aplayer5'),
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [{
|
||||
name: '光るなら',
|
||||
artist: 'Goose house',
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ audio.cover | - | 音频封面
|
|||
audio.lrc | - | [详情](https://aplayer.js.org/#/home?id=lrc)
|
||||
audio.theme | - | 切换到此音频时的主题色，比上面的 theme 优先级高
|
||||
mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
|
||||
lrc | false | [详情](https://aplayer.js.org/#/home?id=lrc)
|
||||
lrcType | 0 | [详情](https://aplayer.js.org/#/home?id=lrc)
|
||||
listFolded | false | 列表默认折叠
|
||||
listMaxHeight | - | 列表最大高度
|
||||
|
||||
|
|
@ -106,7 +106,7 @@ const ap = new APlayer({
|
|||
mutex: true,
|
||||
listFolded: false,
|
||||
listMaxHeight: '90px',
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
|
|
@ -236,7 +236,7 @@ ap.on('ended', function () {
|
|||
|
||||
## 歌词
|
||||
|
||||
我们有三种方式来给 APlayer 传递歌词，使用 `lrc` 参数指明使用哪种方式，然后把歌词放到 `audio.lrc` 参数或者 HTML 里。
|
||||
我们有三种方式来给 APlayer 传递歌词，使用 `lrcType` 参数指明使用哪种方式，然后把歌词放到 `audio.lrc` 参数或者 HTML 里。
|
||||
|
||||
<div class="aplayer-wrap">
|
||||
<div id="aplayer4"><button class="docute-button load">点击加载播放器</div>
|
||||
|
|
@ -249,7 +249,7 @@ ap.on('ended', function () {
|
|||
```js
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
|
|
@ -267,7 +267,7 @@ const ap = new APlayer({
|
|||
```js
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrc: 1,
|
||||
lrcType: 1,
|
||||
audio: {
|
||||
name: 'name',
|
||||
artist: 'artist',
|
||||
|
|
@ -304,7 +304,7 @@ const ap = new APlayer({
|
|||
```js
|
||||
const ap = new APlayer({
|
||||
container: document.getElementById('aplayer'),
|
||||
lrc: 2,
|
||||
lrcType: 2,
|
||||
audio: [[
|
||||
{
|
||||
name: 'name1',
|
||||
|
|
@ -351,7 +351,7 @@ const ap = new APlayer({
|
|||
container: document.getElementById('player'),
|
||||
listFolded: false,
|
||||
listMaxHeight: '90px',
|
||||
lrc: 3,
|
||||
lrcType: 3,
|
||||
audio: [
|
||||
{
|
||||
name: 'name1',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export default (options) => {
|
|||
mini: options.narrow || false,
|
||||
autoplay: false,
|
||||
mutex: true,
|
||||
lrc: options.showlrc || 0,
|
||||
lrcType: options.showlrc || options.lrc || 0,
|
||||
preload: 'auto',
|
||||
theme: '#b7daff',
|
||||
loop: 'all',
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ class APlayer {
|
|||
this.randomOrder = utils.randomOrder(this.options.audio.length);
|
||||
|
||||
this.container.classList.add('aplayer');
|
||||
if (this.options.lrc) {
|
||||
if (this.options.lrcType) {
|
||||
this.container.classList.add('aplayer-withlrc');
|
||||
}
|
||||
if (this.options.audio.length > 1) {
|
||||
|
|
@ -50,7 +50,7 @@ class APlayer {
|
|||
|
||||
// save lrc
|
||||
this.container = this.options.container;
|
||||
if (this.options.lrc === 2 || this.options.lrc === true) {
|
||||
if (this.options.lrcType === 2 || this.options.lrcType === true) {
|
||||
const lrcEle = this.container.getElementsByClassName('aplayer-lrc-content');
|
||||
for (let i = 0; i < lrcEle.length; i++) {
|
||||
if (this.options.audio[i]) {
|
||||
|
|
@ -69,10 +69,10 @@ class APlayer {
|
|||
this.template.time.classList.add('aplayer-time-narrow');
|
||||
}
|
||||
|
||||
if (this.options.lrc) {
|
||||
if (this.options.lrcType) {
|
||||
this.lrc = new Lrc({
|
||||
container: this.template.lrc,
|
||||
async: this.options.lrc === 3,
|
||||
async: this.options.lrcType === 3,
|
||||
content: this.options.audio.map((item) => item.lrc),
|
||||
player: this,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue