diff --git a/README.md b/README.md index f710100..62e630c 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ UI 参考网易云音乐外链播放器 Screenshot ![image](https://i.imgur.com/JDrJXCr.png) ![image](https://i.imgur.com/eIRyqvT.png) +![image](https://i.imgur.com/C9Cl1ad.png) ## Install @@ -45,6 +46,7 @@ var ap = new APlayer({ narrow: false, autoplay: true, showlrc: false, + theme: '#e6d0b2', music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', @@ -61,8 +63,9 @@ ap.init(); { element: document.getElementById('player1'), // Optional, player element narrow: false, // Optional, narrow style - autoplay: true, // Optional, autoplay, not supported by mobile browsers + autoplay: true, // Optional, autoplay song(s), not supported by mobile browsers showlrc: false, // Optional, show lrc + theme: '#e6d0b2', // Optional, theme color, default: #b7daff music: { // Required, music info title: 'Preparation', // Required, music title author: 'Hans Zimmer/Richard Harvey', // Required, music author @@ -131,6 +134,30 @@ Support multiple time tag, support three decimal second Option: `showlrc: true` +### With playlist + +#### JS: + +Option: + +```JS +music: [ + { + title: '...', + author: '...', + url: '...', + pic: '...' + }, + { + title: '...', + author: '...', + url: '...', + pic: '...' + }, + ... +] +``` + ## Development ``` @@ -153,7 +180,9 @@ $ gulp - [x] 歌词展示 - [x] 默认选项 - [x] 移动端兼容性 -- [ ] 播放列表 +- [x] 播放列表 +- [ ] 播放暂停按钮切换动画 +- [ ] 歌词滚动展示 ## Issues diff --git a/demo/index.html b/demo/index.html index ec68c93..2bf71ef 100644 --- a/demo/index.html +++ b/demo/index.html @@ -51,63 +51,299 @@

Wow, such a beautiful html5 music player

Made by DIYgod. Available on GitHub. Licensed MIT.

+

With playlist and lyrics

+
+ 
+                [ti:あっちゅ～ま青春!]
+                [ar:七森中☆ごらく部]
+                [al:あっちゅ～ま青春!]
+                [00:00.76]青春オーライ 青春オーエス 青春謳歌 はりきって行くぞ（青春 All right 青春 Oh Hisse 青春讴歌 鼓足干劲上吧！）
+                [00:05.96]青春ドンマイ 青春ファイト 青春最高（青春 Don't Mind 青春 Fight 青春最棒了！）
+                [00:09.67]Yeah!! Yeah!! Yeah!! Yeah!!
+                [00:12.21]青春はじめよう 1・2・さん☆ハイ！（让青春起步吧！ 1·2·三☆OK！）
+                [00:14.78]ひとまず走るぞ 1・2・さん☆ハイ！（不管如何先跑起来吧！ 1·2·三☆OK！）
+                [00:17.32]みんなが笑顔で 1・2・さん☆ハイ！（大家都露出笑脸！ 1·2·三☆OK！）
+                [00:19.95]これが青春だ 1・2・さん☆ハイ！（这就是青春！ 1·2·三☆OK！）
+                [00:22.71]春！ 桜もちを食べよう 夏！ かき氷で決まり（春天！ 来吃樱叶饼吧 夏天！ 就决定是刨冰啦）
+                [00:27.89]秋！ 焼きいもを頬張り 冬！ 雪でまたかき氷（秋天！ 把烤白薯大口塞进嘴里 冬天！ 在雪里面又是刨冰）
+                [00:32.57]もういっちょ☆（再来☆）
+                [00:33.16]春！ 教室を間違えて 夏！ 宿題を忘れて（春天！ 进错了教室 夏天！ 把作业忘掉了）
+                [00:38.37]秋！ マラソンでビリケツ 冬！ こたつに長期滞在（秋天！ 马拉松最后一名 冬天！ 长期居住在暖炉里）
+                [00:43.61]1年365日 ときどき366日（一年中的365天 有时候是366天）
+                [00:48.69]色々あるけど 全力！全開！ 全身全霊！ 楽しもうよ よーよよよよ（虽然会发生很多事情，但是一起尽力尽兴！全心全意！享受每一天吧！吧~吧吧吧吧）
+                [00:55.23]「えんじょい！えんじょい！じょじょじょじょじょい！」（「享受吧！享受吧！ 吧吧吧吧吧！」）
+                [00:57.83]あっちゅ～ま青春！ まぶし～いよ青春！（转瞬即逝的青春！ 灿烂无比的青春！）
+                [01:03.17]眠気さよなら ココロの瞳をぱっちりあけよう（向困意说拜拜 把心灵的眼睛睁得大大的吧）
+                [01:08.42]あっちゅ～ま青春！ 猛スピード青春！（转瞬即逝的青春！ 飞速前进的青春！）
+                [01:13.64]まばたきしてちゃ おいしいところ見逃しちゃうよ 注意！（要是乱眨眼睛的话 就会把美味的时光错过了的啦！ 要注意哦！）
+                [01:18.87]青春オーライ 青春オーエス 青春謳歌 はりきって行くぞ（青春 All right 青春 Oh Hisse 青春讴歌 鼓足干劲上吧！）
+                [01:24.17]青春ドンマイ 青春ファイト 青春最高（青春 Don't Mind（别在意） 青春 Fight（奋斗） 青春最棒了！）
+                [01:27.85]Yeah!! Yeah!! Yeah!! Yeah!!
+                [01:30.44]朝！ ニワトリに追いかけられ 昼！ まさかのテスト0点（早上！被鸡到处追着跑 中午！ 考试没想到竟然零分！）
+                [01:35.72]放課後！ みんなに励まされて 夜！ 今日は寝て忘れましょう（放学后！ 大家给我加油 晚上！今天就睡觉把烦恼忘掉吧！）
+                [01:40.35]次の日～っ☆（第二天～☆）
+                [01:40.84]朝！ ぎりぎり社長出勤 昼！ 給食をおかわり（早上！差点就迟到了 中午！食堂的饭再来一份）
+                [01:46.10]放課後！ 部室でダラダララ～ 夜！ 長電話止まらない（放学后！ 在部团教室懒散度过 晚上！ 煲电话粥停不下来）
+                [01:51.32]1日いつでも24時間 巻くこと押すことどちらもできない（一天永远都是24小时 既不会提前也不会延后）
+                [01:56.52]やりたいことなら貪欲強欲 別腹パッパラやり尽そうよ よーよよよよ（如果是想做的事情的话 就要贪婪地去追求 开启第二个胃 去把所有想干的事情都做了吧！）
+                [02:02.95]「わっしょい！わっしょい！しょしょしょしょしょい！」（「欧耶！ 欧耶！ 耶耶耶耶耶！」）
+                [02:05.58]あっちゅ～ま青春！ 楽し～いよ青春！（转瞬即逝的青春！ 快乐无比的青春！）
+                [02:11.06]春に始まり春に向かってく 思い出つくろう（开始在春天的青春 为了这个春天 一起创造回忆吧）
+                [02:16.23]あっちゅ～ま青春！ 青い春だ青春！（转瞬即逝的青春！ 青色的春天就是……青春！）
+                [02:21.40]ブルーなキモチ みんなといるとカラフルになる 不思議！（那些忧郁的心情 只要和大家在一起就会变得色彩缤纷 真是不可思议！）
+                [02:26.82]青春オーライ 青春オーエス 青春謳歌 はりきって行くぞ（青春 All right 青春 Oh Hisse 青春讴歌 鼓足干劲上吧！）
+                [02:31.99]青春ドンマイ 青春ファイト 青春最高（青春 Don't Mind 青春 Fight 青春最棒了！）
+                [02:35.68]Yeah!! Yeah!! Yeah!! Yeah!!
+                [02:47.61]あっちゅ～ま青春！ まぶし～いよ青春！（转瞬即逝的青春！ 灿烂无比的青春！）
+                [02:52.67]眠気さよなら ココロの瞳をぱっちりあけよう（向困意说拜拜 把心灵的眼睛睁得大大的吧）
+                [02:58.01]あっちゅ～ま青春！ 猛スピード青春！（转瞬即逝的青春！ 飞速前进的青春！）
+                [03:03.22]まばたきしてちゃ おいしいところ見逃しちゃうよ 注意！（要是乱眨眼睛的话 就会把美味的时光错过了的啦！ 要注意哦！）
+                [03:08.56]あっちゅ～ま青春！ にぎや～かな青春！（转瞬即逝的青春！ 热热闹闹的青春！）
+                [03:13.68]今が青春 感じられた日はステキな日だよ（现在就是能感受到青春的 最棒的日子哦）
+                [03:18.86]あっちゅ～ま青春！ 二度と来ない青春！（转瞬即逝的青春！ 一去不复返的青春！）
+                [03:24.07]気付けばいつも私の青春 キミがいるんだ キ・セ・キ（回过神来 在我的青春中都有你在身边 真・是・奇・迹）
+                [03:29.41]青春オーライ 青春オーエス 青春謳歌 はりきって行くぞ（青春 All right 青春 Oh Hisse 青春讴歌 鼓足干劲上吧！）
+                [03:34.56]青春ドンマイ 青春ファイト 青春最高（青春 Don't Mind 青春 Fight 青春最棒了！）
+                [03:38.23]Yeah!! Yeah!! Yeah!! Yeah!!
+
+ 
+                [00:00.230]君と夏の終わり 将来の夢（与你在夏末约定　将来的梦想）
+                [00:04.170]大きな希望 忘れない（远大的希望　不要忘记了）
+                [00:07.170]10年後の8月（我相信　十年後的八月）
+                [00:09.700]また出会えるのを 信じて（我们还能再相遇）
+                [00:14.360]最高の思い出を…（共划美好的回忆）
+                [00:39.960]出会いは ふっとした 瞬間 帰り道の交差点で（相识　是那麼不经意的瞬间　我在回家途中的十字路口）
+                [00:47.050]声をかけてくれたね 「一緒に帰ろう」（听见你的一声〞一起回家吧〞）
+                [00:54.310]僕は 照れくさそうに カバンで顔を隠しながら（我当时有点尴尬　还拿书包遮著脸）
+                [01:01.470]本当は とても とても 嬉しかったよ（其实我　心里好高兴　真的好高兴）
+                [01:08.590]あぁ 花火が夜空 きれいに咲いて ちょっとセツナク（啊！烟火在夜空中　灿烂盛开　几许伤感）
+                [01:15.770]あぁ 風が時間とともに 流れる（啊！风随着时光流逝）
+                [01:22.580]嬉しくって 楽しくって 冒険も いろいろしたね（满心欢喜地　兴致冲冲地　我们四处探险）
+                [01:29.760]二人の 秘密の 基地の中（就在我们的　秘密基地中）
+                [01:36.740]君と夏の終わり 将来の夢 大きな希望 忘れない（与你在夏末约定　将来的梦想　远大的希望　不要忘记了）
+                [01:43.920]10年後の8月 また出会えるのを 信じて（我相信　十年後的八月　我们还能再相遇）
+                [01:51.010]君が最後まで 心から 「ありがとう」叫んでいたこと（我知道　一直到最後）
+                [01:56.930]知っていたよ（你仍在心底呼喊著〞谢谢你〞）
+                [01:58.200]涙をこらえて 笑顔でさようなら せつないよね（强忍著泪水　笑著说再见　无限感叹涌现）
+                [02:05.420]最高の思い出を…（那一段最美好的回忆…）
+                [02:13.070]あぁ 夏休みも あと少しで 終っちゃうから（啊！暑假就快要过完了）
+                [02:20.310]あぁ 太陽と月 仲良くして（啊！太阳和月亮　默契十足）
+                [02:27.080]悲しくって 寂しくって 喧嘩も いろいろしたね（想到令人悲伤　或许有些寂寥　我们也多有争吵）
+                [02:34.160]二人の 秘密の 基地の中（就在我们的　秘密基地中）
+                [02:41.140]君が最後まで 心から 「ありがとう」叫んでいたこと（我知道　一直到最後）
+                [02:47.000]知っていたよ（你仍在心底呼喊著〞谢谢你）
+                [02:48.340]涙をこらえて 笑顔でさようなら せつないよね（强忍著泪水　笑著说再见　无限感叹涌现）
+                [02:55.630]最高の思い出を…（那一段最美好的回忆）
+                [03:03.320]突然の 転校で どうしようもなく（你突然要转学　你我都可奈何）
+                [03:24.190]手紙 書くよ 電話もするよ 忘れないでね 僕のことを（我会写信给你　也会打电话给你　千万不要忘记我）
+                [03:31.420]いつまでも 二人の 基地の中（永远别忘记　那段在秘密基地中的日子）
+                [03:38.520]君と夏の終わり ずっと話して（与你在夏末　聊了这麼多）
+                [03:42.530]夕日を見てから星を眺め（从黄昏到繁星点点）
+                [03:45.670]君の頬を 流れた涙は ずっと忘れない（流过你双颊的泪水　我永远不会忘记）
+                [03:52.820]君が最後まで 大きく手を振ってくれたこと（直到最後　你紧紧握住我的手　这感觉也将长在我心中）
+                [03:58.540]きっと忘れない（於是就这样）
+                [03:59.930]だから こうして 夢の中で ずっと永遠に…（让我们在梦中相会吧　永远的…）
+                [04:07.110]君と夏の終わり 将来の夢 大きな希望 忘れない（与你在夏末约定　将来的梦想　远大的希望　不要忘记了）
+                [04:14.270]10年後の8月 また出会えるのを 信じて（我相信　十年後的八月　我们还能再相遇）
+                [04:21.400]君が最後まで 心から 「ありがとう」叫んでいたこと（我知道　一直到最後）
+                [04:27.260]知っていたよ（你仍在心底呼喊著〞谢谢你〞）
+                [04:28.640]涙をこらえて 笑顔でさようなら せつないよね（强忍著泪水　笑著说再见　无限感叹涌现）
+                [04:35.910]最高の思い出を…（那一段最美好的回忆…）
+                [04:43.160]最高の思い出を…（那一段最美好的回忆…）
+
+ 
+                                [by:京兆万年]
+                [ti:回レ!雪月花 小紫ver.]
+                [ar:小倉唯]
+                [lr:ヒゲドライバー]
+                [co:ヒゲドライバー]
+                [ag:ヒゲドライバー]
+                [00:00.00]せ〜の　いちにっさんはい！（预~备 一 二 三 嗨！）
+                [00:04.68]ほい！　いよーーーーっ　ぽん！（嘿 咿哟 嘭）
+                [00:07.66]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [00:11.12]ハッハッハッハッハッハッ　う～（哈 哈 哈 哈 哈 哈 呜~）
+                [00:13.36]さぁさぁさぁ（来 来 来）
+                [00:14.08]これよりご覧いただきますは（接下来诸位将欣赏到的是）
+                [00:15.65]カブキ者たちの栄枯盛衰（歌舞伎演员们的荣辱盛衰）
+                [00:17.14]時代常に日進月歩（时代总是在日新月异）
+                [00:18.24]聞いてってよ老若男女（且听我一一道来 男女老少）
+                [00:20.14]一見は勧善懲悪（乍一看是惩恶扬善）
+                [00:21.49]悪者どもを一刀両断（将坏人们一刀两断）
+                [00:22.85]「でもホンドにそれだけで楽しいの？」（“但是你真的会因此而觉得扬眉吐气吗？”）
+                [00:25.63]もうなんだって蒟蒻問答（无论问什么 都是牛头马嘴）
+                [00:27.58]ハッハッハッハッハッハッハィヤ（哈哈哈哈哈哈 咿呀）
+                [00:30.57]ハッハッハッハッ（哈哈哈哈）
+                [00:31.97]いよーーーーっ　ぽん！（咿哟 嘭）
+                [00:33.61]どこからともなく現れて（自何处出现委实难料）
+                [00:34.96]すぐどこかへ行っちゃって神出鬼沒（眼又遁隐他处总是神出鬼没）
+                [00:36.35]チャンスを待ったら一日千秋（若是静候机会 便是一日千秋）
+                [00:38.03]追いかければ東奔西走（追上前去的话又要东奔西走）
+                [00:39.68]時代常に千変万化（时代总是千变万化）
+                [00:40.95]人の心は複雑怪奇（世人之心复杂怪奇）
+                [00:42.31]「でも本気でそんなこ言ってんの？」（“但是说着这些话的你岂不也是难免戏谑?”）
+                [00:45.02]もうどうにも満身創痍（也罢 无论怎样都将满身疮痍）
+                [00:46.98]嗚呼、巡り巡って夜の町（呜呼 绕来绕去相会在这夜色下的街）
+                [00:53.27]キミは合図出し踊りだす（（由）你发出信号 （让）我们一同起舞转）
+                [00:58.12]はぁ～（哈呜~）
+                [00:58.88]回レ回レ回レ回レ回レ回レ回レ回レ回レ！（旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧！）
+                [01:02.12]華麗に花弁　散らすように（在散落的美丽花瓣中）
+                [01:04.97]回レ回レ回レ回レ回レ回レ回レ回レ回レ！（旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧！）
+                [01:08.13]髪も振り乱して（头发凌乱又怎样？）
+                [01:10.23]一昨日、昨日、今日と、明日と、明後日と（前日、昨日、今日、明日、后日）
+                [01:14.13]この宴は続く（这场宴会亦不息）
+                [01:16.31]踊レ、歌エ、一心不乱に回レ！（舞动吧 歌唱吧 一心不乱的旋转吧于）
+                [01:20.19]今宵は雪月花（今夜的雪月花）
+                [01:25.43]ほい！　いよーーーーっ　ぽん！（哈～!～哟ーーーー～嘣～!）
+                [01:29.14]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [01:32.16]ハッハッハッハッハッハッ　う～（哈 哈 哈 哈 哈 哈 呜）
+                [01:34.39]ねぇねぇねぇ（呐～呐～呐～）
+                [01:35.12]この世に平安訪れるの？（平安已经访问此世了吗?）
+                [01:36.50]のべつ幕無し丁丁発止（不会闭幕的丁当争斗）
+                [01:38.09]兵ども千客万来（官兵们接踵而来）
+                [01:39.50]ひしめき合群雄割拠（相互吵吵嚷嚷群雄割据）
+                [01:41.00]伸るか反るか一攫千金（成败在于敢否一举千金）
+                [01:42.47]気が付いたら絶体絶命（回过头来却已穷途末路）
+                [01:43.50]「でも本音のとこ、どうなってんの？」（「不过真心的所在、到底是什么样呢?」）
+                [01:46.62]もうまったく奇想天外（真是的总这么异想天开）
+                [01:48.51]嗚呼、辿り辿って夜の町（呜呼、追溯于夜晚小镇上）
+                [01:54.83]迷い一つなく踊りだす（心无杂念的就此起舞吧）
+                [01:59.68]はぁ～（哈阿～）
+                [02:00.44]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [02:03.64]華麗に花弁　散らすように（犹如花瓣华丽的散落一般）
+                [02:06.49]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [02:09.66]髪も振り乱して（长发也随风飘散）
+                [02:11.72]一昨日、昨日、今日と、明日と、明後日と（无论前天、昨天、还是今天、明天、与后天）
+                [02:15.63]この宴は続く（这宴会还会持续）
+                [02:17.67]踊レ、歌エ、一心不乱に回レ！（跳吧、唱吧、一心一意的转吧!）
+                [02:21.60]今宵は雪月花（因为今宵乃是雪月花）
+                [02:36.74]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [02:39.72]ハッハッハッハッハッハッ　さぁさぁさぁ（哈 哈 哈 哈 哈 哈 来～来～来～）
+                [02:42.45]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [02:45.49]ハッハッハッハッハッハッ（哈 哈 哈 哈 哈 哈）
+                [02:47.66]花で一つ、鳥で二つ（花就是一、鸟就是二）
+                [02:51.31]手打ち鳴らす（拍着手轻声唱）
+                [02:54.12]風で三つ、嗚呼、月出て四つ（风就是三、呜呼、月出就有四）
+                [02:58.76]鳴らす鳴らす……（轻声唱轻轻唱……）
+                [03:00.09]花で一つ、鳥で二つ（花就是一、鸟就是二）
+                [03:03.34]手打ち鳴らす（拍着手轻声唱）
+                [03:06.25]風で三つ、嗚呼、月出て四つ（风就是三、呜呼、月出就有四）
+                [03:10.78]鳴らす鳴らす……（轻轻唱轻声唱……）
+                [03:13.28]今は（在此）
+                [03:15.35]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [03:18.63]華麗に花弁　散らすように（犹如花瓣华丽的散落一般）
+                [03:21.35]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [03:24.60]髪も振り乱して（长发也随风飘散）
+                [03:26.72]一昨日、昨日、今日と、明日と、明後日と（无论前天、昨天、还是今天、明天、与后天）
+                [03:30.67]この宴は続く（这宴会不会结束）
+                [03:32.75]踊レ、歌エ、一心不乱に回レ！（跳吧、唱吧、一心一意的转吧!）
+                [03:36.63]今宵は何曜日か？（今宵是星期几呢?）
+                [03:39.02]水木金？（三四五?）
+                [03:40.56]土日月火？（六七一二?）
+                [03:44.11]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [03:47.00]ハッハッハッハッ（哈 哈 哈 哈 哈 哈）
+                [03:48.57]いよーーーーっ　ぽん！（～哟ーーーー～嘣～!）
+                [03:50.43]-終わり-（-End-）
+
+
+

With playlist

+

With lyrics

-                [ti:平凡之路]
-                [ar:朴树]
-                [al:《后会无期》主题歌]
-                [by:周敏]
-
-                [00:00.00]平凡之路 - 朴树
-                [00:04.01]作词：韩寒 朴树
-                [00:08.02]作曲：朴树 编曲：朴树
-                [00:12.02]徘徊着的 在路上的
-                [00:17.37]你要走吗
-                [00:23.20]易碎的 骄傲着
-                [00:28.75]那也曾是我的模样
-                [00:34.55]沸腾着的 不安着的
-                [00:40.26]你要去哪
-                [00:46.00]谜一样的 沉默着的
-                [00:51.75]故事你真的在听吗
-                [00:56.25][03:25.78][04:10.64]我曾经跨过山和大海
-                [00:59.55][03:28.14][04:13.54]也穿过人山人海
-                [01:02.70][03:30.44]我曾经拥有着一切
-                [01:05.00][03:33.69]转眼都飘散如烟
-                [01:07.75][03:36.24]我曾经失落失望失掉所有方向
-                [01:13.46][03:42.04]直到看见平凡才是唯一的答案
-                [01:31.70]当你仍然
-                [01:33.10]还在幻想
-                [01:37.40]你的明天
-                [01:43.00]她会好吗 还是更烂
-                [01:49.78]对我而言是另一天
-                [01:53.33][03:47.69]我曾经毁了我的一切
-                [01:56.54][03:50.84]只想永远地离开
-                [01:59.82][03:53.39]我曾经堕入无边黑暗
-                [02:02.14][03:56.29]想挣扎无法自拔
-                [02:04.79][03:59.04]我曾经像你像他像那野草野花
-                [02:10.54][04:04.79]绝望着 渴望着
-                [02:13.54][04:07.79]也哭也笑平凡着
-                [03:03.38]向前走 就这么走
-                [03:06.23]就算你被给过什么
-                [03:09.08]向前走 就这么走
-                [03:11.83]就算你被夺走什么
-                [03:14.78]向前走 就这么走
-                [03:17.58]就算你会错过什么
-                [03:20.33]向前走 就这么走
-                [03:23.13]就算你会
-                [04:16.14]我曾经问遍整个世界
-                [04:19.49]从来没得到答案
-                [04:22.88]我不过像你像他像那野草野花
-                [04:27.64]冥冥中这是我 唯一要走的路啊
-                [04:34.65]时间无言
-                [04:36.15]如此这般
-                [04:40.30]明天已在眼前
-                [04:46.45]风吹过的 路依然远
-                [04:51.55]你的故事讲到了哪
+                [by:京兆万年]
+                [ti:回レ!雪月花 小紫ver.]
+                [ar:小倉唯]
+                [lr:ヒゲドライバー]
+                [co:ヒゲドライバー]
+                [ag:ヒゲドライバー]
+                [00:00.00]せ〜の　いちにっさんはい！（预~备 一 二 三 嗨！）
+                [00:04.68]ほい！　いよーーーーっ　ぽん！（嘿 咿哟 嘭）
+                [00:07.66]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [00:11.12]ハッハッハッハッハッハッ　う～（哈 哈 哈 哈 哈 哈 呜~）
+                [00:13.36]さぁさぁさぁ（来 来 来）
+                [00:14.08]これよりご覧いただきますは（接下来诸位将欣赏到的是）
+                [00:15.65]カブキ者たちの栄枯盛衰（歌舞伎演员们的荣辱盛衰）
+                [00:17.14]時代常に日進月歩（时代总是在日新月异）
+                [00:18.24]聞いてってよ老若男女（且听我一一道来 男女老少）
+                [00:20.14]一見は勧善懲悪（乍一看是惩恶扬善）
+                [00:21.49]悪者どもを一刀両断（将坏人们一刀两断）
+                [00:22.85]「でもホンドにそれだけで楽しいの？」（“但是你真的会因此而觉得扬眉吐气吗？”）
+                [00:25.63]もうなんだって蒟蒻問答（无论问什么 都是牛头马嘴）
+                [00:27.58]ハッハッハッハッハッハッハィヤ（哈哈哈哈哈哈 咿呀）
+                [00:30.57]ハッハッハッハッ（哈哈哈哈）
+                [00:31.97]いよーーーーっ　ぽん！（咿哟 嘭）
+                [00:33.61]どこからともなく現れて（自何处出现委实难料）
+                [00:34.96]すぐどこかへ行っちゃって神出鬼沒（眼又遁隐他处总是神出鬼没）
+                [00:36.35]チャンスを待ったら一日千秋（若是静候机会 便是一日千秋）
+                [00:38.03]追いかければ東奔西走（追上前去的话又要东奔西走）
+                [00:39.68]時代常に千変万化（时代总是千变万化）
+                [00:40.95]人の心は複雑怪奇（世人之心复杂怪奇）
+                [00:42.31]「でも本気でそんなこ言ってんの？」（“但是说着这些话的你岂不也是难免戏谑?”）
+                [00:45.02]もうどうにも満身創痍（也罢 无论怎样都将满身疮痍）
+                [00:46.98]嗚呼、巡り巡って夜の町（呜呼 绕来绕去相会在这夜色下的街）
+                [00:53.27]キミは合図出し踊りだす（（由）你发出信号 （让）我们一同起舞转）
+                [00:58.12]はぁ～（哈呜~）
+                [00:58.88]回レ回レ回レ回レ回レ回レ回レ回レ回レ！（旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧！）
+                [01:02.12]華麗に花弁　散らすように（在散落的美丽花瓣中）
+                [01:04.97]回レ回レ回レ回レ回レ回レ回レ回レ回レ！（旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧旋转吧！）
+                [01:08.13]髪も振り乱して（头发凌乱又怎样？）
+                [01:10.23]一昨日、昨日、今日と、明日と、明後日と（前日、昨日、今日、明日、后日）
+                [01:14.13]この宴は続く（这场宴会亦不息）
+                [01:16.31]踊レ、歌エ、一心不乱に回レ！（舞动吧 歌唱吧 一心不乱的旋转吧于）
+                [01:20.19]今宵は雪月花（今夜的雪月花）
+                [01:25.43]ほい！　いよーーーーっ　ぽん！（哈～!～哟ーーーー～嘣～!）
+                [01:29.14]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [01:32.16]ハッハッハッハッハッハッ　う～（哈 哈 哈 哈 哈 哈 呜）
+                [01:34.39]ねぇねぇねぇ（呐～呐～呐～）
+                [01:35.12]この世に平安訪れるの？（平安已经访问此世了吗?）
+                [01:36.50]のべつ幕無し丁丁発止（不会闭幕的丁当争斗）
+                [01:38.09]兵ども千客万来（官兵们接踵而来）
+                [01:39.50]ひしめき合群雄割拠（相互吵吵嚷嚷群雄割据）
+                [01:41.00]伸るか反るか一攫千金（成败在于敢否一举千金）
+                [01:42.47]気が付いたら絶体絶命（回过头来却已穷途末路）
+                [01:43.50]「でも本音のとこ、どうなってんの？」（「不过真心的所在、到底是什么样呢?」）
+                [01:46.62]もうまったく奇想天外（真是的总这么异想天开）
+                [01:48.51]嗚呼、辿り辿って夜の町（呜呼、追溯于夜晚小镇上）
+                [01:54.83]迷い一つなく踊りだす（心无杂念的就此起舞吧）
+                [01:59.68]はぁ～（哈阿～）
+                [02:00.44]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [02:03.64]華麗に花弁　散らすように（犹如花瓣华丽的散落一般）
+                [02:06.49]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [02:09.66]髪も振り乱して（长发也随风飘散）
+                [02:11.72]一昨日、昨日、今日と、明日と、明後日と（无论前天、昨天、还是今天、明天、与后天）
+                [02:15.63]この宴は続く（这宴会还会持续）
+                [02:17.67]踊レ、歌エ、一心不乱に回レ！（跳吧、唱吧、一心一意的转吧!）
+                [02:21.60]今宵は雪月花（因为今宵乃是雪月花）
+                [02:36.74]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [02:39.72]ハッハッハッハッハッハッ　さぁさぁさぁ（哈 哈 哈 哈 哈 哈 来～来～来～）
+                [02:42.45]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [02:45.49]ハッハッハッハッハッハッ（哈 哈 哈 哈 哈 哈）
+                [02:47.66]花で一つ、鳥で二つ（花就是一、鸟就是二）
+                [02:51.31]手打ち鳴らす（拍着手轻声唱）
+                [02:54.12]風で三つ、嗚呼、月出て四つ（风就是三、呜呼、月出就有四）
+                [02:58.76]鳴らす鳴らす……（轻声唱轻轻唱……）
+                [03:00.09]花で一つ、鳥で二つ（花就是一、鸟就是二）
+                [03:03.34]手打ち鳴らす（拍着手轻声唱）
+                [03:06.25]風で三つ、嗚呼、月出て四つ（风就是三、呜呼、月出就有四）
+                [03:10.78]鳴らす鳴らす……（轻轻唱轻声唱……）
+                [03:13.28]今は（在此）
+                [03:15.35]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [03:18.63]華麗に花弁　散らすように（犹如花瓣华丽的散落一般）
+                [03:21.35]回レ回レ回レ回レ回レ 回レ回レ回レ回レ！（转啊转啊转啊转啊转啊转啊转啊转啊转啊!）
+                [03:24.60]髪も振り乱して（长发也随风飘散）
+                [03:26.72]一昨日、昨日、今日と、明日と、明後日と（无论前天、昨天、还是今天、明天、与后天）
+                [03:30.67]この宴は続く（这宴会不会结束）
+                [03:32.75]踊レ、歌エ、一心不乱に回レ！（跳吧、唱吧、一心一意的转吧!）
+                [03:36.63]今宵は何曜日か？（今宵是星期几呢?）
+                [03:39.02]水木金？（三四五?）
+                [03:40.56]土日月火？（六七一二?）
+                [03:44.11]ハッハッハッハッハッハッハィヤ（哈 哈 哈 哈 哈 哈 嗨呀）
+                [03:47.00]ハッハッハッハッ（哈 哈 哈 哈 哈 哈）
+                [03:48.57]いよーーーーっ　ぽん！（～哟ーーーー～嘣～!）
+                [03:50.43]-終わり-（-End-）
-

Wide style

+

Normal

Narrow style

@@ -119,40 +355,103 @@ narrow: false, autoplay: false, showlrc: false, + theme: '#e6d0b2', music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', - url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', - pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' + url: 'http://7xq131.com1.z0.glb.clouddn.com/Preparation.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/Preparation.jpg' } }); ap1.init(); + var ap2 = new APlayer({ element: document.getElementById('player2'), narrow: true, autoplay: false, showlrc: false, + theme: '#e6d0b2', music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', - url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', - pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' + url: 'http://7xq131.com1.z0.glb.clouddn.com/Preparation.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/Preparation.jpg' } }); ap2.init(); + var ap3 = new APlayer({ element: document.getElementById('player3'), narrow: false, - autoplay: true, + autoplay: false, showlrc: true, + theme: '#615754', music: { - title: '平凡之路', - author: '朴树', - url: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.mp3', - pic: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.jpg' + title: '回レ！雪月花', + author: '小倉唯', + url: 'http://7xq131.com1.z0.glb.clouddn.com/回レ！雪月花.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/回レ！雪月花.jpg' } }); ap3.init(); + + var ap4 = new APlayer({ + element: document.getElementById('player4'), + narrow: false, + autoplay: true, + showlrc: false, + theme: '#ad7a86', + music: [ + { + title: 'あっちゅ～ま青春!', + author: '七森中☆ごらく部', + url: 'http://7xq131.com1.z0.glb.clouddn.com/あっちゅ～ま青春!.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/あっちゅ～ま青春!.jpg' + }, + { + title: 'secret base~君がくれたもの~', + author: '茅野愛衣', + url: 'http://7xq131.com1.z0.glb.clouddn.com/secret base~.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/secret base~.jpg' + }, + { + title: '回レ！雪月花', + author: '小倉唯', + url: 'http://7xq131.com1.z0.glb.clouddn.com/回レ！雪月花.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/回レ！雪月花.jpg' + } + ] + }); + ap4.init(); + + var ap5 = new APlayer({ + element: document.getElementById('player5'), + narrow: false, + autoplay: true, + showlrc: true, + theme: '#ad7a86', + music: [ + { + title: 'あっちゅ～ま青春!', + author: '七森中☆ごらく部', + url: 'http://7xq131.com1.z0.glb.clouddn.com/あっちゅ～ま青春!.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/あっちゅ～ま青春!.jpg' + }, + { + title: 'secret base~君がくれたもの~', + author: '茅野愛衣', + url: 'http://7xq131.com1.z0.glb.clouddn.com/secret base~.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/secret base~.jpg' + }, + { + title: '回レ！雪月花', + author: '小倉唯', + url: 'http://7xq131.com1.z0.glb.clouddn.com/回レ！雪月花.mp3', + pic: 'http://7xq131.com1.z0.glb.clouddn.com/回レ！雪月花.jpg' + } + ] + }); + ap5.init(); \ No newline at end of file diff --git a/dist/APlayer.min.css b/dist/APlayer.min.css index d0f1047..654f6e7 100644 --- a/dist/APlayer.min.css +++ b/dist/APlayer.min.css @@ -1 +1 @@ -@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}.aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-border-radius:2px;border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:initial}.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}.aplayer .aplayer-lrc-content,.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-icon-weibo:before{content:'\e805'}.aplayer .aplayer-icon-play:before{content:'\e806'}.aplayer .aplayer-icon-pause:before{content:'\e807'}.aplayer .aplayer-icon-to-start:before{content:'\e808'}.aplayer .aplayer-icon-to-end:before{content:'\e809'}.aplayer .aplayer-icon-list:before{content:'\e80a'}.aplayer .aplayer-icon-menu:before{content:'\e80b'}.aplayer .aplayer-icon-volume-off:before{content:'\e800'}.aplayer .aplayer-icon-volume-down:before{content:'\e801'}.aplayer .aplayer-icon-volume-up:before{content:'\e802'}.aplayer span{cursor:default!important}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url(default.jpg);background-size:100%}.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;-webkit-border-radius:50%;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2)}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;top:50%;left:50%;margin:-15px 0 0 -15px}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 120px 0 5px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;background:#b7daff;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border:1px solid #b7daff;-webkit-border-radius:50%;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#b7daff}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff}.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;content:' ';overflow:hidden;width:100%}.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px!important;height:20px!important;padding:0!important;margin:0!important;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out} \ No newline at end of file +@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}.aplayer-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-border-radius:2px;border-radius:2px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:initial}.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}.aplayer .aplayer-lrc-content,.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-icon-play:before{content:'\e806'}.aplayer .aplayer-icon-pause:before{content:'\e807'}.aplayer .aplayer-icon-to-start:before{content:'\e808'}.aplayer .aplayer-icon-to-end:before{content:'\e809'}.aplayer .aplayer-icon-loop:before{content:'\e803'}.aplayer .aplayer-icon-menu:before{content:'\e80b'}.aplayer .aplayer-icon-volume-off:before{content:'\e800'}.aplayer .aplayer-icon-volume-down:before{content:'\e801'}.aplayer .aplayer-icon-volume-up:before{content:'\e802'}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px;background-image:url(default.jpg);background-size:100%;-webkit-transition:all .3s ease;transition:all .3s ease}.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;-webkit-border-radius:50%;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2);-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;top:50%;left:50%;margin:-15px 0 0 -15px}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}.aplayer .aplayer-info{margin-left:66px;padding:14px 7px 0 10px;height:66px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-controller{position:relative}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin:0 140px 0 5px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:8px;width:8px;-webkit-border-radius:50%;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-icon-loop{margin:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop{color:#ddd}.aplayer .aplayer-info .aplayer-controller .aplayer-time i.aplayer-noloop:hover{color:#bbb}.aplayer .aplayer-info .aplayer-controller .aplayer-time i:hover{color:#000}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap{position:relative;display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px;z-index:99}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;-webkit-transition:all .1s ease;transition:all .1s ease}.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{position:absolute;z-index:1;display:block;content:' ';overflow:hidden;width:100%}.aplayer .aplayer-lrc:before{top:0;height:10%;background:-webkit-linear-gradient(top,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,left bottom,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0 )}.aplayer .aplayer-lrc:after{bottom:0;height:33%;background:-webkit-linear-gradient(bottom,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left bottom,left top,from(white),to(rgba(255,255,255,0)));background:linear-gradient(to top,#fff 0,rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px!important;height:20px!important;padding:0!important;margin:0!important;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4;overflow:hidden}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}.aplayer .aplayer-lrc .aplayer-lrc-contents{width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.aplayer .aplayer-list{max-height:300px;overflow:auto;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-list.aplayer-list-hide{max-height:0}.aplayer .aplayer-list ol{list-style-type:none;margin:0;padding:0}.aplayer .aplayer-list ol li{position:relative;height:32px;line-height:32px;padding:0 15px;font-size:12px;border-top:1px solid #e9e9e9;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.aplayer .aplayer-list ol li:hover{background:#efefef}.aplayer .aplayer-list ol li.aplayer-list-light{background:#e9e9e9}.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur{display:inline-block}.aplayer .aplayer-list ol li .aplayer-list-cur{display:none;width:3px;height:22px;position:absolute;left:0;top:5px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-index{color:#666;margin-right:12px;cursor:pointer}.aplayer .aplayer-list ol li .aplayer-list-author{color:#666;float:right;cursor:pointer} \ No newline at end of file diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js index 6a2de97..3419525 100644 --- a/dist/APlayer.min.js +++ b/dist/APlayer.min.js @@ -1 +1 @@ -function APlayer(e){if(!("music"in e&&"title"in e.music&&"author"in e.music&&"url"in e.music))throw"APlayer Error: Music, music.title, music.author, music.url, music.pic are required in options";if(null===e.element)throw"APlayer Error: element option null";this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var a={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1};for(var t in a)a.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&(e[t]=a[t]);this.option=e}APlayer.prototype.init=function(){function e(e){var a=e||window.event,l=(a.clientX-t(n.bar))/o;l=l>0?l:0,l=1>l?l:1,n.updateBar.call(n,"played",l,"width"),n.option.showlrc&&n.updateLrc.call(n,parseFloat(n.playedBar.style.width)/100*n.audio.duration),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(l*n.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),n.audio.currentTime=parseFloat(n.playedBar.style.width)/100*n.audio.duration,n.play()}function t(e){for(var a,t=e.offsetLeft,l=e.offsetParent;null!==l;)t+=l.offsetLeft,l=l.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}function l(e){for(var a,t=e.offsetTop,l=e.offsetParent;null!==l;)t+=l.offsetTop,l=l.offsetParent;return a=document.body.scrollTop+document.documentElement.scrollTop,t-a}if(this.element=this.option.element,this.music=this.option.music,this.option.showlrc){var i=this.element.getElementsByClassName("aplayer-lrc-content")[0].innerHTML;this.lrc=this.parseLrc(i)}if(this.element.innerHTML='
'+this.music.title+' - (＞﹏＜)加载中,好累的说...
- 00:00 / (oﾟ▽ﾟ)
',this.option.showlrc){this.element.classList.add("aplayer-withlrc");var s="";this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0];for(var r=0;r"+this.lrc[r][1]+"

";this.lrcContents.innerHTML=s,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current")}this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.loop=!0,this.audio.preload="metadata";var n=this;this.audio.addEventListener("durationchange",function(){1!==n.audio.duration&&(n.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=n.secondToTime(n.audio.duration))}),this.audio.addEventListener("loadedmetadata",function(){n.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+n.music.author,n.loadedTime=setInterval(function(){var e=n.audio.buffered.end(n.audio.buffered.length-1)/n.audio.duration;n.updateBar.call(n,"loaded",e,"width"),1===e&&clearInterval(n.loadedTime)},500)}),this.audio.addEventListener("error",function(){n.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - 加载失败 ╥﹏╥"}),this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){n.play.call(n)}),this.pauseButton.addEventListener("click",function(){n.pause.call(n)}),this.playedBar=this.element.getElementsByClassName("aplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("aplayer-thumb")[0],this.bar=this.element.getElementsByClassName("aplayer-bar")[0];var o;this.bar.addEventListener("click",function(e){var a=e||window.event;o=n.bar.clientWidth;var l=(a.clientX-t(n.bar))/o;n.updateBar.call(n,"played",l,"width"),n.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=n.secondToTime(l*n.audio.duration),n.audio.currentTime=parseFloat(n.playedBar.style.width)/100*n.audio.duration}),this.thumb.addEventListener("mousedown",function(){o=n.bar.clientWidth,clearInterval(n.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var d=this.element.getElementsByClassName("aplayer-volume-bar")[0],c=n.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],u=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var a=e||window.event,t=(u-a.clientY+l(d))/u;t=t>0?t:0,t=1>t?t:1,n.updateBar.call(n,"volume",t,"height"),n.audio.volume=t,n.audio.muted&&(n.audio.muted=!1),1===t?c.className="demo-icon aplayer-icon-volume-up":c.className="demo-icon aplayer-icon-volume-down"}),c.addEventListener("click",function(){n.audio.muted?(n.audio.muted=!1,c.className=1===n.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",n.updateBar.call(n,"volume",n.audio.volume,"height")):(n.audio.muted=!0,c.className="demo-icon aplayer-icon-volume-off",n.updateBar.call(n,"volume",0,"height"))}),this.option.autoplay&&this.play()},APlayer.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},APlayer.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},APlayer.prototype.updateBar=function(e,a,t){a=a>0?a:0,a=1>a?a:1,this[e+"Bar"].style[t]=100*a+"%"},APlayer.prototype.updateLrc=function(e){if(e||(e=this.audio.currentTime),e=this.lrc[this.lrcIndex+1][0])for(var a=0;a=this.lrc[a][0]&&(!this.lrc[a+1]||ee?"0"+e:""+e},t=parseInt(e/60),l=parseInt(e-60*t);return a(t)+":"+a(l)},APlayer.prototype.parseLrc=function(e){for(var a=e.split("\n"),t=[],l=a.length,i=0;l>i;i++){var s=a[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),r=a[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=s)for(var n=s.length,o=0;n>o;o++){var d=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(s[o]),c=60*d[1]+parseInt(d[2])+parseInt(d[3])/(2===(d[3]+"").length?100:1e3);t.push([c,r])}}return t.sort(function(e,a){return e[0]-a[0]}),t}; \ No newline at end of file +function APlayer(e){this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var t={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.playIndex="[object Array]"===Object.prototype.toString.call(e.music)?0:-1,this.option=e,this.audios=[],this.loop=!0}APlayer.prototype.init=function(){function e(e){var t=e||window.event,s=(t.clientX-a(r.bar))/o;s=s>0?s:0,s=1>s?s:1,r.updateBar.call(r,"played",s,"width"),r.option.showlrc&&r.updateLrc.call(r,parseFloat(r.playedBar.style.width)/100*r.audio.duration),r.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=r.secondToTime(s*r.audio.duration)}function t(){document.removeEventListener("mouseup",t),document.removeEventListener("mousemove",e),r.audio.currentTime=parseFloat(r.playedBar.style.width)/100*r.audio.duration,r.play()}function a(e){for(var t,a=e.offsetLeft,s=e.offsetParent;null!==s;)a+=s.offsetLeft,s=s.offsetParent;return t=document.body.scrollLeft+document.documentElement.scrollLeft,a-t}function s(e){for(var t,a=e.offsetTop,s=e.offsetParent;null!==s;)a+=s.offsetTop,s=s.offsetParent;return t=document.body.scrollTop+document.documentElement.scrollTop,a-t}if(this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music,this.option.showlrc){for(var i=[],l=0;l
- 00:00 / 00:00
'+(this.playIndex>-1?'':"")+"
";if(this.playIndex>-1){for(n+='
    ',l=0;l'+(l+1)+''+this.option.music[l].title+''+this.option.music[l].author+"";n+="
"}this.element.innerHTML=n,this.option.narrow&&this.element.classList.add("aplayer-narrow");var r=this;if(this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){r.play.call(r)}),this.pauseButton.addEventListener("click",function(){r.pause.call(r)}),this.playIndex>-1)for(l=0;l0?a:0,a=1>a?a:1,r.updateBar.call(r,"volume",a,"height"),r.audio.volume=a,r.audio.muted&&(r.audio.muted=!1),1===a?p.className="demo-icon aplayer-icon-volume-up":p.className="demo-icon aplayer-icon-volume-down"}),p.addEventListener("click",function(){r.audio.muted?(r.audio.muted=!1,p.className=1===r.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",r.updateBar.call(r,"volume",r.audio.volume,"height")):(r.audio.muted=!0,p.className="demo-icon aplayer-icon-volume-off",r.updateBar.call(r,"volume",0,"height"))}),this.element.getElementsByClassName("aplayer-icon-loop")[0].addEventListener("click",function(){r.loop?(this.classList.add("aplayer-noloop"),r.loop=!1):(this.classList.remove("aplayer-noloop"),r.loop=!0)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=r.element.getElementsByClassName("aplayer-list")[0];e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")}),this.setMusic(0)},APlayer.prototype.setMusic=function(e){this.playIndex>-1&&"undefined"!=typeof arguments[0]&&(this.playIndex=arguments[0]);var t=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url("+encodeURI(this.music.pic)+")"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.playIndex>-1&&(this.element.getElementsByClassName("aplayer-list-light")[0]&&this.element.getElementsByClassName("aplayer-list-light")[0].classList.remove("aplayer-list-light"),this.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li")[t].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[t]||-1===this.playIndex){this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata";var a=this;this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),a.audio.addEventListener("progress",function(){var e=a.audio.buffered.length?a.audio.buffered.end(a.audio.buffered.length-1)/a.audio.duration:0;a.updateBar.call(a,"loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1&&this.audio.addEventListener("ended",function(){a.playIndex-1?!1:this.loop,this.playIndex>-1&&(this.audios[t]=this.audio)}else this.audio=this.audios[t],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100;if(this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[t]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],i=0;i"+this.lrc[i][1]+"

";this.lrcContents.innerHTML=s,this.lrcIndex||(this.lrcIndex=0),this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),this.lrcContents.style.transform="translateY(0px)",this.lrcContents.style.webkitTransform="translateY(0px)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()},APlayer.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.option.showlrc&&e.updateLrc.call(e),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},APlayer.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},APlayer.prototype.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,this[e+"Bar"].style[a]=100*t+"%"},APlayer.prototype.updateLrc=function(e){if("undefined"==typeof arguments[0]&&(e=this.audio.currentTime),this.lrcIndex>this.lrc.length-1||e=this.lrc[this.lrcIndex+1][0])for(var t=0;t=this.lrc[t][0]&&(!this.lrc[t+1]||ee?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},APlayer.prototype.parseLrc=function(e){for(var t=[],a=0;an;n++){var r=s[n].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),o=s[n].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=r)for(var d=r.length,p=0;d>p;p++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(r[p]),m=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);i.push([m,o])}}i.sort(function(e,t){return e[0]-t[0]}),t.push(i)}return t}; \ No newline at end of file diff --git a/dist/font/aplayer-fontello.eot b/dist/font/aplayer-fontello.eot index 70af144..bf18c1c 100644 Binary files a/dist/font/aplayer-fontello.eot and b/dist/font/aplayer-fontello.eot differ diff --git a/dist/font/aplayer-fontello.svg b/dist/font/aplayer-fontello.svg index dee6aa3..e87db9c 100644 --- a/dist/font/aplayer-fontello.svg +++ b/dist/font/aplayer-fontello.svg @@ -1,7 +1,7 @@ -Copyright (C) 2015 by original authors @ fontello.com +Copyright (C) 2016 by original authors @ fontello.com @@ -9,12 +9,11 @@ - + - diff --git a/dist/font/aplayer-fontello.ttf b/dist/font/aplayer-fontello.ttf index 894f3f0..1d1ec93 100644 Binary files a/dist/font/aplayer-fontello.ttf and b/dist/font/aplayer-fontello.ttf differ diff --git a/dist/font/aplayer-fontello.woff b/dist/font/aplayer-fontello.woff index 72cb2d4..dfb0daf 100644 Binary files a/dist/font/aplayer-fontello.woff and b/dist/font/aplayer-fontello.woff differ diff --git a/package.json b/package.json index 711c689..31afbb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aplayer", - "version": "1.2.14", + "version": "1.3.0", "description": "Wow, such a beautiful html5 music player", "main": "APlayer.js", "scripts": { diff --git a/src/APlayer.js b/src/APlayer.js index 0f9ba5b..142f0cf 100644 --- a/src/APlayer.js +++ b/src/APlayer.js @@ -6,13 +6,6 @@ */ function APlayer(option) { - // handle options error - if (!('music' in option && 'title' in option.music && 'author' in option.music && 'url' in option.music)) { - throw 'APlayer Error: Music, music.title, music.author, music.url, music.pic are required in options'; - } - if (option.element === null) { - throw 'APlayer Error: element option null'; - } this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); // compatibility: some mobile browsers don't suppose autoplay @@ -25,7 +18,8 @@ function APlayer(option) { element: document.getElementsByClassName('aplayer')[0], narrow: false, autoplay: false, - showlrc: false + showlrc: false, + theme: '#b7daff' }; for (var defaultKey in defaultOption) { if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { @@ -33,7 +27,12 @@ function APlayer(option) { } } + // multiple music + this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1; + this.option = option; + this.audios = []; + this.loop = true; } /** @@ -41,17 +40,20 @@ function APlayer(option) { */ APlayer.prototype.init = function () { this.element = this.option.element; - this.music = this.option.music; + this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music; // parser lrc if (this.option.showlrc) { - var lrcs = this.element.getElementsByClassName('aplayer-lrc-content')[0].innerHTML; - this.lrc = this.parseLrc(lrcs); + var lrcs = []; + for (var 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); } // fill in HTML - this.element.innerHTML = '' - + '
' + var eleHTML = '' + + '
' + '
' + '' + '
' @@ -61,8 +63,8 @@ APlayer.prototype.init = function () { + '
' + '
' + '
' - + '' + this.music.title + '' - + ' - (＞﹏＜)加载中,好累的说...' + + '' + + '' + '
' + '
' + '
' @@ -71,74 +73,51 @@ APlayer.prototype.init = function () { + '
' + '
' + '
' - + '
' - + '' + + '
' + + '' + '
' + '
' + '
' + '
' - + ' - 00:00 / (oﾟ▽ﾟ)' + + ' - 00:00 / 00:00' + '
' + '' + '
' + '
' - + '
' + + '
' + '
' + '
' + '
' + + '' + + (this.playIndex > -1 ? '' : '') + '
' + '
' + '
'; - - // fill in lrc - if (this.option.showlrc) { - this.element.classList.add('aplayer-withlrc'); - var lrcHTML = ''; - this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; - for (var i = 0; i < this.lrc.length; i++) { - lrcHTML += '

' + this.lrc[i][1] + '

'; + if (this.playIndex > -1) { + eleHTML += '' + + '
' + + '
    '; + for (i = 0; i < this.option.music.length; i++) { + eleHTML += '' + + '
  1. ' + + '' + + '' + (i + 1) + '' + + '' + this.option.music[i].title + '' + + '' + this.option.music[i].author + '' + + '
    2. ' } - this.lrcContents.innerHTML = lrcHTML; - this.lrcIndex = 0; - this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); + eleHTML += '' + + '
' + + '
' } + this.element.innerHTML = eleHTML; // switch to narrow style if (this.option.narrow) { this.element.classList.add('aplayer-narrow'); } - // create audio element - this.audio = document.createElement("audio"); - this.audio.src = this.music.url; - this.audio.loop = true; - this.audio.preload = 'metadata'; - - // show audio time var _self = this; - this.audio.addEventListener('durationchange', function() { - if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first - _self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); - } - }); - - // can play, remove loading style, show loading progress bar - // compatibility: different mobile browsers have different triggering time, use loadedmetadata event to take the place of canplay event - this.audio.addEventListener('loadedmetadata', function () { - _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + _self.music.author; - _self.loadedTime = setInterval(function () { - var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration; - _self.updateBar.call(_self, 'loaded', percentage, 'width'); - if (percentage === 1) { - clearInterval(_self.loadedTime); - } - }, 500); - }); - - // audio download error - this.audio.addEventListener('error', function () { - _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + '加载失败 ╥﹏╥'; - }); // play and pause button this.playButton = this.element.getElementsByClassName('aplayer-play')[0]; @@ -150,6 +129,18 @@ APlayer.prototype.init = function () { _self.pause.call(_self); }); + // click music list: change music + if (this.playIndex > -1) { + for (i = 0; i < this.option.music.length; i++) { + this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[i].addEventListener('click', function () { + var musicIndex = parseInt(this.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1; + if (musicIndex !== _self.playIndex) { + _self.setMusic(musicIndex); + } + }); + } + } + // control play progress this.playedBar = this.element.getElementsByClassName('aplayer-played')[0]; this.loadedBar = this.element.getElementsByClassName('aplayer-loaded')[0]; @@ -165,6 +156,13 @@ APlayer.prototype.init = function () { _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; }); + this.thumb.addEventListener('mouseover', function () { + this.style.background = _self.option.theme; + }); + this.thumb.addEventListener('mouseout', function () { + this.style.background = '#fff'; + }); + this.thumb.addEventListener('mousedown', function () { barWidth = _self.bar.clientWidth; clearInterval(_self.playedTime); @@ -192,7 +190,6 @@ APlayer.prototype.init = function () { } // control volume - this.audio.volume = 0.8; this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0]; var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0]; var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0]; @@ -251,10 +248,151 @@ APlayer.prototype.init = function () { return actualTop - elementScrollTop; } + // loop control + this.element.getElementsByClassName('aplayer-icon-loop')[0].addEventListener('click', function () { + if (_self.loop) { + this.classList.add('aplayer-noloop'); + _self.loop = false; + } + else { + this.classList.remove('aplayer-noloop'); + _self.loop = true; + } + }); + + // toggle menu control + if (this.playIndex > -1) { + this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () { + var list = _self.element.getElementsByClassName('aplayer-list')[0]; + if (!list.classList.contains('aplayer-list-hide')) { + list.classList.add('aplayer-list-hide'); + } + else { + list.classList.remove('aplayer-list-hide'); + } + }); + } + + this.setMusic(0); +}; + +/** + * Set music + */ +APlayer.prototype.setMusic = function (index) { + // get this.music + if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') { + this.playIndex = arguments[0]; + } + var indexMusic = this.playIndex; + this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music; + + // set html + if (this.music.pic) { + this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = 'url(' + encodeURI(this.music.pic) + ')'; + } + 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.element.getElementsByClassName('aplayer-list-light')[0]) { + this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light'); + } + this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light'); + } + + // set the previous audio object + if (this.audio) { + this.pause(); + this.audio.currentTime = 0; + } + + // get this audio object + if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) { + this.audio = document.createElement("audio"); + this.audio.src = this.music.url; + this.audio.preload = this.isMobile ? 'none' : 'metadata'; + + // show audio time + var _self = this; + this.audio.addEventListener('durationchange', function () { + if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first + _self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); + } + }); + + // show audio loaded bar + _self.audio.addEventListener('progress', function () { + var percentage = _self.audio.buffered.length ? _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration : 0; + _self.updateBar.call(_self, 'loaded', percentage, 'width'); + }); + + // audio download error + this.audio.addEventListener('error', function () { + _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥'; + }); + + // multiple music play + if (this.playIndex > -1) { + this.audio.addEventListener('ended', function () { + if (_self.playIndex < _self.option.music.length - 1) { + _self.setMusic(++_self.playIndex); + } + else if (_self.loop) { + _self.setMusic(0); + } + else if (!_self.loop) { + _self.pause(); + } + }); + } + + // control volume + this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; + + // loop + this.audio.loop = this.playIndex > -1 ? false : this.loop; + + if (this.playIndex > -1) { + this.audios[indexMusic] = this.audio; + } + } + else { + this.audio = this.audios[indexMusic]; + this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; + } + + // fill in lrc + if (this.option.showlrc) { + this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0]; + this.element.classList.add('aplayer-withlrc'); + var lrcHTML = ''; + this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; + for (i = 0; i < this.lrc.length; i++) { + lrcHTML += '

' + this.lrc[i][1] + '

'; + } + this.lrcContents.innerHTML = lrcHTML; + if (!this.lrcIndex) { + this.lrcIndex = 0; + } + this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); + this.lrcContents.style.transform = 'translateY(0px)'; + this.lrcContents.style.webkitTransform = 'translateY(0px)'; + } + + // set duration time + if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first + this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00'; + } + // autoplay - if (this.option.autoplay) { + if (this.option.autoplay && !this.isMobile) { this.play(); } + this.option.autoplay = true; // autoplay next music + + if (this.isMobile) { + this.pause(); + } }; /** @@ -265,6 +403,9 @@ APlayer.prototype.play = function () { this.pauseButton.classList.remove('aplayer-hide'); this.audio.play(); var _self = this; + if (this.playedTime) { + clearInterval(this.playedTime); + } this.playedTime = setInterval(function () { _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width'); if (_self.option.showlrc) { @@ -303,10 +444,10 @@ APlayer.prototype.updateBar = function (type, percentage, direction) { * @param {Number} currentTime */ APlayer.prototype.updateLrc = function (currentTime) { - if (!currentTime) { + if (typeof(arguments[0]) === 'undefined') { currentTime = this.audio.currentTime; } - if (currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) { + if (this.lrcIndex > this.lrc.length - 1 || currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) { for (var i = 0; i < this.lrc.length; i++) { if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) { this.lrcIndex = i; @@ -337,37 +478,40 @@ APlayer.prototype.secondToTime = function (second) { /** * Parse lrc, suppose multiple time tag * - * @param {String} text - Format: + * @param {Array} arr - Format: * [mm:ss.xx]lyric * [mm:ss.xxx]lyric * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric * - * @return {Array} [[time, text], [time, text], [time, text], ...] + * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...] */ -APlayer.prototype.parseLrc = function (text) { - var lyric = text.split('\n'); - var lrc = []; - var lyricLen = lyric.length; - for (var i = 0; i < lyricLen; i++) { - // match lrc time - var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g); - // match lrc text - var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, ''); +APlayer.prototype.parseLrc = function (arr) { + var lrcs = []; + for (var k = 0; k < arr.length; k++) { + var lyric = arr[k].split('\n'); + var lrc = []; + var lyricLen = lyric.length; + for (var i = 0; i < lyricLen; i++) { + // match lrc time + var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g); + // match lrc text + var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, ''); - if (lrcTimes != null) { - // handle multiple time tag - var timeLen = lrcTimes.length; - for (var j = 0; j < timeLen; j++) { - var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]); - var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000); - lrc.push([lrcTime, lrcText]); + if (lrcTimes != null) { + // handle multiple time tag + var timeLen = lrcTimes.length; + for (var j = 0; j < timeLen; j++) { + var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]); + var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000); + lrc.push([lrcTime, lrcText]); + } } } + // sort by time + lrc.sort(function (a, b) { + return a[0] - b[0]; + }); + lrcs.push(lrc); } - // sort by time - lrc.sort(function (a, b) { - return a[0] - b[0]; - }); - - return lrc; + return lrcs; }; \ No newline at end of file diff --git a/src/APlayer.scss b/src/APlayer.scss index 5ebd9aa..6b303e6 100644 --- a/src/APlayer.scss +++ b/src/APlayer.scss @@ -59,10 +59,6 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; line-height: 1em; } - .aplayer-icon-weibo:before { - content: '\e805'; - } - .aplayer-icon-play:before { content: '\e806'; } @@ -79,8 +75,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; content: '\e809'; } - .aplayer-icon-list:before { - content: '\e80a'; + .aplayer-icon-loop:before { + content: '\e803'; } .aplayer-icon-menu:before { @@ -99,10 +95,6 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; content: '\e802'; } - span { - cursor: default !important; - } - .aplayer-lrc-content { display: none; } @@ -114,6 +106,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; width: $aplayer-height; background-image: url(./default.jpg); background-size: 100%; + transition: all 0.3s ease; .aplayer-button { position: absolute; @@ -124,6 +117,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); + transition: all 0.2s ease; &:hover { opacity: 1; } @@ -191,7 +185,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; position: relative; .aplayer-bar-wrap { - margin: 0 120px 0 5px; + margin: 0 140px 0 5px; .aplayer-bar { position: relative; @@ -215,7 +209,6 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; left: 0; top: 0; bottom: 0; - background: #b7daff; height: 2px; .aplayer-thumb { @@ -226,14 +219,9 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; margin-right: -10px; height: 8px; width: 8px; - border: 1px solid #b7daff; border-radius: 50%; background: #fff; cursor: pointer !important; - - &:hover { - background: #b7daff; - } } } } @@ -250,10 +238,27 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; i { color: #666; font-size: 15px; + cursor: pointer; + transition: all 0.2s ease; + + &.aplayer-icon-loop { + margin: 2px; + } + &.aplayer-noloop { + color: #ddd; + &:hover { + color: #bbb; + } + } + + &:hover { + color: #000; + } } } .aplayer-volume-wrap { + position: relative; display: inline-block; margin-left: 7px; cursor: pointer !important; @@ -284,7 +289,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; bottom: 0; right: 0; width: 5px; - background: #b7daff; + transition: all 0.1s ease; } } } @@ -352,4 +357,63 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height; transition: all 0.5s ease-out; } } + + .aplayer-list { + max-height: 300px; + overflow: auto; + transition: all 0.5s ease; + + &.aplayer-list-hide { + max-height: 0; + } + + ol { + list-style-type: none; + margin: 0; + padding: 0; + + li { + position: relative; + height: 32px; + line-height: 32px; + padding: 0 15px; + font-size: 12px; + border-top: 1px solid #e9e9e9; + cursor: pointer; + transition: all 0.2s ease; + + &:hover { + background: #efefef; + } + + &.aplayer-list-light { + background: #e9e9e9; + + .aplayer-list-cur { + display: inline-block; + } + } + + .aplayer-list-cur { + display: none; + width: 3px; + height: 22px; + position: absolute; + left: 0; + top: 5px; + cursor: pointer; + } + .aplayer-list-index { + color: #666; + margin-right: 12px; + cursor: pointer; + } + .aplayer-list-author { + color: #666; + float: right; + cursor: pointer; + } + } + } + } } \ No newline at end of file diff --git a/src/font/aplayer-fontello.eot b/src/font/aplayer-fontello.eot index 70af144..bf18c1c 100644 Binary files a/src/font/aplayer-fontello.eot and b/src/font/aplayer-fontello.eot differ diff --git a/src/font/aplayer-fontello.svg b/src/font/aplayer-fontello.svg index dee6aa3..e87db9c 100644 --- a/src/font/aplayer-fontello.svg +++ b/src/font/aplayer-fontello.svg @@ -1,7 +1,7 @@ -Copyright (C) 2015 by original authors @ fontello.com +Copyright (C) 2016 by original authors @ fontello.com @@ -9,12 +9,11 @@ - + - diff --git a/src/font/aplayer-fontello.ttf b/src/font/aplayer-fontello.ttf index 894f3f0..1d1ec93 100644 Binary files a/src/font/aplayer-fontello.ttf and b/src/font/aplayer-fontello.ttf differ diff --git a/src/font/aplayer-fontello.woff b/src/font/aplayer-fontello.woff index 72cb2d4..dfb0daf 100644 Binary files a/src/font/aplayer-fontello.woff and b/src/font/aplayer-fontello.woff differ