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

support playlist

This commit is contained in:
DIYgod 2016-01-14 23:22:49 +08:00
parent d47a525da3
commit d565c402ea
15 changed files with 712 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
README.md
View File

@ -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

421
demo/index.html
View File

@ -51,63 +51,299 @@
<h2>Wow, such a beautiful html5 music player</h2>
<p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/APlayer" target="_blank">GitHub</a>. Licensed MIT.</p>
<hr>
<h3>With playlist and lyrics</h3>
<div id="player5" class="aplayer">
<pre class="aplayer-lrc-content">
[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!!
</pre>
<pre class="aplayer-lrc-content">
[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]最高の思い出を…（那一段最美好的回忆…）
</pre>
<pre class="aplayer-lrc-content">
[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-）
</pre>
</div>
<h3>With playlist</h3>
<div id="player4" class="aplayer"></div>
<h3>With lyrics</h3>
<div id="player3" class="aplayer">
<pre class="aplayer-lrc-content">
[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-）
</pre>
</div>
<h3>Wide style</h3>
<h3>Normal</h3>
<div id="player1" class="aplayer"></div>
<h3>Narrow style</h3>
<div id="player2" class="aplayer"></div>
@ -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();
</script>
</body>
</html>

2
dist/APlayer.min.css vendored
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

BIN
dist/font/aplayer-fontello.eot vendored
View File

Binary file not shown.

5
dist/font/aplayer-fontello.svg vendored
View File

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -9,12 +9,11 @@
<glyph glyph-name="volume-off" unicode="&#xe800;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z" horiz-adv-x="428.6" />
<glyph glyph-name="volume-down" unicode="&#xe801;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z" horiz-adv-x="642.9" />
<glyph glyph-name="volume-up" unicode="&#xe802;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-8-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q7 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-26 11t-10 25q0 20 22 33 4 2 12 6t13 6q25 14 45 28 69 51 108 127t38 161-38 161-108 127q-20 14-45 28-4 3-13 6t-12 6q-22 13-22 33 0 14 10 25t26 11q7 0 14-3 118-51 189-158t71-236z" horiz-adv-x="928.6" />
<glyph glyph-name="weibo" unicode="&#xe805;" d="m377 134q11 18 6 38t-25 28q-19 8-41 0t-33-25q-13-19-8-38t24-29 42-1 35 27z m52 67q5 7 2 15t-10 10q-7 3-16 0t-12-10q-9-18 8-26 8-2 16 1t12 10z m97-60q-25-57-88-83t-125-7q-60 19-82 71t3 104q27 52 85 78t117 10q62-16 89-66t1-107z m174 90q-5 53-49 94t-117 61-153 12q-124-13-206-79t-74-148q5-53 50-94t116-61 153-12q125 13 206 79t74 148z m172-3q0-38-20-77t-61-77-94-65-126-47-151-17-154 19-134 51-96 85-36 111q0 64 39 137t110 144q94 94 191 131t137-3q36-36 11-117-2-8 0-11t5-4 8 0 8 2l3 1q78 33 138 33t85-34q25-35 0-99-1-8-3-11t3-7 7-5 9-3q32-10 58-26t44-46 19-65z m-41 349q23-27 30-61t-3-66q-5-12-17-19t-25-2q-12 5-19 17t-2 25q11 35-13 61t-60 20q-13-3-25 4t-14 21q-3 14 5 25t20 14q34 7 67-3t56-37z m101 91q48-54 63-125t-8-134q-5-16-19-23t-29-2-22 19-3 29q16 46 6 96t-45 88q-35 39-83 53t-96 5q-16-3-29 6t-17 24 5 29 25 16q68 14 136-6t116-75z" horiz-adv-x="1000" />
<glyph glyph-name="loop" unicode="&#xe803;" d="m800 540q42 0 71-29t29-71l0-290q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 290q0 42 30 71t70 29l250 0 0 110 200-180-200-180 0 110-210 0 0-210 620 0 0 210-150 0 0 140 190 0z" horiz-adv-x="900" />
<glyph glyph-name="play" unicode="&#xe806;" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
<glyph glyph-name="pause" unicode="&#xe807;" d="m440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
<glyph glyph-name="to-start" unicode="&#xe808;" d="m174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
<glyph glyph-name="to-end" unicode="&#xe809;" d="m412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
<glyph glyph-name="list" unicode="&#xe80a;" d="m100 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m200-100q-20 0-35 15t-15 35 15 35 35 15l350 0q22 0 36-15t14-35-15-35-35-15l-350 0z m350-100q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z m0-200q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z" horiz-adv-x="700" />
<glyph glyph-name="menu" unicode="&#xe80b;" d="m650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
</font>
</defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
dist/font/aplayer-fontello.ttf vendored
View File

Binary file not shown.

BIN
dist/font/aplayer-fontello.woff vendored
View File

Binary file not shown.

2
package.json
View File

@ -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": {

320
src/APlayer.js
View File

@ -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 = ''
+ '<div class="aplayer-pic"' + (this.music.pic ? ' style="background-image: url(&quot;' + encodeURI(this.music.pic) + '&quot;);"' : '') + '>'
var eleHTML = ''
+ '<div class="aplayer-pic">'
+ '<div class="aplayer-button aplayer-pause aplayer-hide">'
+ '<i class="demo-icon aplayer-icon-pause"></i>'
+ '</div>'
@ -61,8 +63,8 @@ APlayer.prototype.init = function () {
+ '</div>'
+ '<div class="aplayer-info">'
+ '<div class="aplayer-music">'
+ '<span class="aplayer-title">' + this.music.title + '</span>'
+ '<span class="aplayer-author"> - (＞﹏＜)加载中,好累的说...</span>'
+ '<span class="aplayer-title"></span>'
+ '<span class="aplayer-author"></span>'
+ '</div>'
+ '<div class="aplayer-lrc">'
+ '<div class="aplayer-lrc-contents" style="transform: translateY(0); -webkit-transform: translateY(0);"></div>'
@ -71,74 +73,51 @@ APlayer.prototype.init = function () {
+ '<div class="aplayer-bar-wrap">'
+ '<div class="aplayer-bar">'
+ '<div class="aplayer-loaded" style="width: 0"></div>'
+ '<div class="aplayer-played" style="width: 0">'
+ '<span class="aplayer-thumb"></span>'
+ '<div class="aplayer-played" style="width: 0; background: ' + this.option.theme + ';">'
+ '<span class="aplayer-thumb" style="border: 1px solid ' + this.option.theme + ';"></span>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="aplayer-time">'
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">(oﾟ▽ﾟ)</span>'
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
+ '<div class="aplayer-volume-wrap">'
+ '<i class="demo-icon aplayer-icon-volume-down"></i>'
+ '<div class="aplayer-volume-bar-wrap">'
+ '<div class="aplayer-volume-bar">'
+ '<div class="aplayer-volume" style="height: 80%"></div>'
+ '<div class="aplayer-volume" style="height: 80%; background: ' + this.option.theme + ';"></div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<i class="demo-icon aplayer-icon-loop"></i>'
+ (this.playIndex > -1 ? '<i class="demo-icon aplayer-icon-menu"></i>' : '')
+ '</div>'
+ '</div>'
+ '</div>';
// 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 += '<p>' + this.lrc[i][1] + '</p>';
if (this.playIndex > -1) {
eleHTML += ''
+ '<div class="aplayer-list">'
+ '<ol>';
for (i = 0; i < this.option.music.length; i++) {
eleHTML += ''
+ '<li>'
+ '<span class="aplayer-list-cur" style="background: ' + this.option.theme + ';"></span>'
+ '<span class="aplayer-list-index">' + (i + 1) + '</span>'
+ '<span class="aplayer-list-title">' + this.option.music[i].title + '</span>'
+ '<span class="aplayer-list-author">' + this.option.music[i].author + '</span>'
+ '</li>'
}
this.lrcContents.innerHTML = lrcHTML;
this.lrcIndex = 0;
this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current');
eleHTML += ''
+ '</ol>'
+ '</div>'
}
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 += '<p>' + this.lrc[i][1] + '</p>';
}
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;
};

100
src/APlayer.scss
View File

@ -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;
}
}
}
}
}

BIN
src/font/aplayer-fontello.eot
View File

Binary file not shown.

5
src/font/aplayer-fontello.svg
View File

@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
<defs>
<font id="fontello" horiz-adv-x="1000" >
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -9,12 +9,11 @@
<glyph glyph-name="volume-off" unicode="&#xe800;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z" horiz-adv-x="428.6" />
<glyph glyph-name="volume-down" unicode="&#xe801;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z" horiz-adv-x="642.9" />
<glyph glyph-name="volume-up" unicode="&#xe802;" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-8-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q7 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-26 11t-10 25q0 20 22 33 4 2 12 6t13 6q25 14 45 28 69 51 108 127t38 161-38 161-108 127q-20 14-45 28-4 3-13 6t-12 6q-22 13-22 33 0 14 10 25t26 11q7 0 14-3 118-51 189-158t71-236z" horiz-adv-x="928.6" />
<glyph glyph-name="weibo" unicode="&#xe805;" d="m377 134q11 18 6 38t-25 28q-19 8-41 0t-33-25q-13-19-8-38t24-29 42-1 35 27z m52 67q5 7 2 15t-10 10q-7 3-16 0t-12-10q-9-18 8-26 8-2 16 1t12 10z m97-60q-25-57-88-83t-125-7q-60 19-82 71t3 104q27 52 85 78t117 10q62-16 89-66t1-107z m174 90q-5 53-49 94t-117 61-153 12q-124-13-206-79t-74-148q5-53 50-94t116-61 153-12q125 13 206 79t74 148z m172-3q0-38-20-77t-61-77-94-65-126-47-151-17-154 19-134 51-96 85-36 111q0 64 39 137t110 144q94 94 191 131t137-3q36-36 11-117-2-8 0-11t5-4 8 0 8 2l3 1q78 33 138 33t85-34q25-35 0-99-1-8-3-11t3-7 7-5 9-3q32-10 58-26t44-46 19-65z m-41 349q23-27 30-61t-3-66q-5-12-17-19t-25-2q-12 5-19 17t-2 25q11 35-13 61t-60 20q-13-3-25 4t-14 21q-3 14 5 25t20 14q34 7 67-3t56-37z m101 91q48-54 63-125t-8-134q-5-16-19-23t-29-2-22 19-3 29q16 46 6 96t-45 88q-35 39-83 53t-96 5q-16-3-29 6t-17 24 5 29 25 16q68 14 136-6t116-75z" horiz-adv-x="1000" />
<glyph glyph-name="loop" unicode="&#xe803;" d="m800 540q42 0 71-29t29-71l0-290q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 290q0 42 30 71t70 29l250 0 0 110 200-180-200-180 0 110-210 0 0-210 620 0 0 210-150 0 0 140 190 0z" horiz-adv-x="900" />
<glyph glyph-name="play" unicode="&#xe806;" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
<glyph glyph-name="pause" unicode="&#xe807;" d="m440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
<glyph glyph-name="to-start" unicode="&#xe808;" d="m174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
<glyph glyph-name="to-end" unicode="&#xe809;" d="m412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
<glyph glyph-name="list" unicode="&#xe80a;" d="m100 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m200-100q-20 0-35 15t-15 35 15 35 35 15l350 0q22 0 36-15t14-35-15-35-35-15l-350 0z m350-100q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z m0-200q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z" horiz-adv-x="700" />
<glyph glyph-name="menu" unicode="&#xe80b;" d="m650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
</font>
</defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/font/aplayer-fontello.ttf
View File

Binary file not shown.

BIN
src/font/aplayer-fontello.woff
View File

Binary file not shown.