musicplugin v1.0.8

musicplugin

Project setup

npm install musicplugin

usage

import MusicPlugin from 'musicplugin'
//*.vue
exports default {
    component:{
        MusicPlugin
    }
}

<aplayer autoplay
  :list="[
          {
            title: '晴天',
            artist: '周杰伦',
            src: 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_228908&response=res&type=convert_url',
            pic: 'http://img4.kuwo.cn/star/starheads/120/4/80a74b254395e7d786fdc3f68703377_0.jpg',
            lrc: '[00:0.0]\u6674\u5929 - \u5468\u6770\u4f26 (Jay Chou)\r\n[00:7.34]\u8bcd\uff1a\u5468\u6770\u4f26\r\n[00:14.69]\u66f2\uff1a\u5468\u6770\u4f26\r\n[00:22.04]\u7f16\u66f2\uff1a\u5468\u6770\u4f26\r\n[00:29.39]\u6545\u4e8b\u7684\u5c0f\u9ec4\u82b1\r\n[00:32.64]\u4ece\u51fa\u751f\u90a3\u5e74\u5c31\u98d8\u7740\r\n[00:36.19]\u7ae5\u5e74\u7684\u8361\u79cb\u5343\r\n[00:39.93]\u968f\u8bb0\u5fc6\u4e00\u76f4\u6643\u5230\u73b0\u5728\r\n[00:42.99]Re So So Si Do Si La \r\n[00:46.11]So La Si Si Si Si La Si La So \r\n[00:49.79]\u5439\u7740\u524d\u594f\u671b\u7740\u5929\u7a7a\r\n[00:53.35]\u6211\u60f3\u8d77\u82b1\u74e3\u8bd5\u7740\u6389\u843d\r\n[00:56.78]\u4e3a\u4f60\u7fd8\u8bfe\u7684\u90a3\u4e00\u5929\r\n[00:59.03]\u82b1\u843d\u7684\u90a3\u4e00\u5929\r\n[01:01.08]\u6559\u5ba4\u7684\u90a3\u4e00\u95f4\r\n[01:03.68]\u6211\u600e\u4e48\u770b\u4e0d\u89c1\r\n[01:06.7]\u6d88\u5931\u7684\u4e0b\u96e8\u5929\r\n[01:09.52]\u6211\u597d\u60f3\u518d\u6dcb\u4e00\u904d\r\n[01:16.58]\u6ca1\u60f3\u5230\u5931\u53bb\u7684\u52c7\u6c14\u6211\u8fd8\u7559\u7740\r\n[01:26.88]\u597d\u60f3\u518d\u95ee\u4e00\u904d\r\n[01:29.78]\u4f60\u4f1a\u7b49\u5f85\u8fd8\u662f\u79bb\u5f00\r\n[01:41.23]\u522e\u98ce\u8fd9\u5929\u6211\u8bd5\u8fc7\u63e1\u7740\u4f60\u624b\r\n[01:50.7]\u4f46\u504f\u504f\u96e8\u6e10\u6e10\u5927\u5230\u6211\u770b\u4f60\u4e0d\u89c1\r\n[01:64.73]\u8fd8\u8981\u591a\u4e45\u6211\u624d\u80fd\u5728\u4f60\u8eab\u8fb9\r\n[01:75.67]\u7b49\u5230\u653e\u6674\u7684\u90a3\u5929\u4e5f\u8bb8\u6211\u4f1a\u6bd4\u8f83\u597d\u4e00\u70b9\r\n[01:87.93]\u4ece\u524d\u4ece\u524d\u6709\u4e2a\u4eba\u7231\u4f60\u5f88\u4e45\r\n[01:97.5]\u4f46\u504f\u504f\u98ce\u6e10\u6e10\u628a\u8ddd\u79bb\u5439\u5f97\u597d\u8fdc\r\n[02:11.23]\u597d\u4e0d\u5bb9\u6613\u53c8\u80fd\u518d\u591a\u7231\u4e00\u5929\r\n[02:22.25]\u4f46\u6545\u4e8b\u7684\u6700\u540e\u4f60\u597d\u50cf\u8fd8\u662f\u8bf4\u4e86\u62dc\u62dc\r\n[02:58.33]\u4e3a\u4f60\u7fd8\u8bfe\u7684\u90a3\u4e00\u5929\r\n[02:61.25]\u82b1\u843d\u7684\u90a3\u4e00\u5929\r\n[02:64.38]\u6559\u5ba4\u7684\u90a3\u4e00\u95f4\r\n[02:67.18]\u6211\u600e\u4e48\u770b\u4e0d\u89c1\r\n[02:70.08]\u6d88\u5931\u7684\u4e0b\u96e8\u5929\r\n[02:72.9]\u6211\u597d\u60f3\u518d\u6dcb\u4e00\u904d\r\n[02:79.97]\u6ca1\u60f3\u5230\u5931\u53bb\u7684\u52c7\u6c14\u6211\u8fd8\u7559\u7740\r\n[02:90.88]\u597d\u60f3\u518d\u95ee\u4e00\u904d\r\n[02:93.28]\u4f60\u4f1a\u7b49\u5f85\u8fd8\u662f\u79bb\u5f00\r\n[03:04.62]\u522e\u98ce\u8fd9\u5929\u6211\u8bd5\u8fc7\u63e1\u7740\u4f60\u624b\r\n[03:14.08]\u4f46\u504f\u504f\u96e8\u6e10\u6e10\u5927\u5230\u6211\u770b\u4f60\u4e0d\u89c1\r\n[03:28.12]\u8fd8\u8981\u591a\u4e45\u6211\u624d\u80fd\u5728\u4f60\u8eab\u8fb9\r\n[03:39.15]\u7b49\u5230\u653e\u6674\u7684\u90a3\u5929\u4e5f\u8bb8\u6211\u4f1a\u6bd4\u8f83\u597d\u4e00\u70b9\r\n[03:51.52]\u4ece\u524d\u4ece\u524d\u6709\u4e2a\u4eba\u7231\u4f60\u5f88\u4e45\r\n[03:61.72]\u504f\u504f\u98ce\u6e10\u6e10\u628a\u8ddd\u79bb\u5439\u5f97\u597d\u8fdc\r\n[03:74.62]\u597d\u4e0d\u5bb9\u6613\u53c8\u80fd\u518d\u591a\u7231\u4e00\u5929\r\n[03:85.12]\u4f46\u6545\u4e8b\u7684\u6700\u540e\u4f60\u597d\u50cf\u8fd8\u662f\u8bf4\u4e86\u62dc\u62dc\r\n[03:99.37]\u522e\u98ce\u8fd9\u5929\u6211\u8bd5\u8fc7\u63e1\u7740\u4f60\u624b\r\n[04:03.42]\u4f46\u504f\u504f\u96e8\u6e10\u6e10\u5927\u5230\u6211\u770b\u4f60\u4e0d\u89c1\r\n[04:09.07]\u8fd8\u8981\u591a\u4e45\u6211\u624d\u80fd\u591f\u5728\u4f60\u8eab\u8fb9\r\n[04:14.98]\u7b49\u5230\u653e\u6674\u90a3\u5929\u4e5f\u8bb8\u6211\u4f1a\u6bd4\u8f83\u597d\u4e00\u70b9\r\n[04:21.43]\u4ece\u524d\u4ece\u524d\u6709\u4e2a\u4eba\u7231\u4f60\u5f88\u4e45\r\n[04:26.43]\u4f46\u504f\u504f\u96e8\u6e10\u6e10\u628a\u8ddd\u79bb\u5439\u5f97\u597d\u8fdc\r\n[04:32.15]\u597d\u4e0d\u5bb9\u6613\u53c8\u80fd\u518d\u591a\u7231\u4e00\u5929\r\n[04:37.98]\u4f46\u6545\u4e8b\u7684\u6700\u540e\u4f60\u597d\u50cf\u8fd8\u662f\u8bf4\u4e86\u62dc',
          },
          {
            title: '兰亭序',
            artist: '周杰伦',
            src: 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&response=res&type=convert_url&rid=MUSIC_440616',
            pic: 'https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000',
            lrc: '[00:00.00]兰亭序 - 周杰伦[00:09.99]词：方文山[00:19.98]曲：周杰伦[00:29.97]兰亭临帖 行书如行云流水[00:36.33]下门推 心细如你脚步碎[00:42.93]忙不迭 千年碑易拓[00:46.64]却难拓你的美[00:50.11]真迹绝 真心能给谁[00:55.24]牧笛横吹 黄酒小菜又几碟[01:01.54]夕阳余晖 如你的羞怯似醉[01:07.90]摹本易写[01:09.74]而墨香不退与你同留余味[01:15.31]一行朱砂 到底圈了谁[01:20.44]无关风月 我题序等你回[01:26.73]悬笔一绝 那岸边浪千叠[01:33.10]情字何解 怎落笔都不对[01:39.39]而我独缺 你一生的了解[01:47.36]无关风月 我题序等你回[01:50.47]悬笔一绝 那岸边浪千叠[01:53.62]情字何解 怎落笔都不对[01:56.78]而我独缺 你一生的了解[01:59.97]无关风月 我题序等你回[02:03.09]悬笔一绝 那岸边浪千叠[02:06.24]情字何解 怎落笔都不对[02:09.45]独缺 你一生了解[02:11.19]弹指岁月 倾城顷刻间湮灭[02:17.29]青石板街 回眸一笑你婉约[02:24.05]恨了没 你摇头轻叹谁让你蹙着眉[02:31.15]而深闺 徒留胭脂味[02:36.39]人雁南飞 转身一瞥你噙泪[02:42.57]掬一把月 手揽回忆怎么睡[02:48.83]又怎么会 心事密缝绣花鞋针针怨怼[02:56.40]若花怨蝶 你会怨着谁[03:01.56]无关风月 我题序等你回[03:07.87]悬笔一绝 那岸边浪千叠[03:14.14]情字何解 怎落笔都不对[03:20.43]而我独缺 你一生的了解[03:27.13]无关风月 我题序等你回[03:34.60]手书无愧 无惧人间是非[03:40.97]雨打蕉叶 又潇潇了几夜[03:47.36]我等春雷 来提醒你爱谁'
          },
          {
            title: '告白气球',
            artist: '周杰伦',
            src: 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_7149583&response=res&type=convert_url',
            pic: 'https://y.qq.com/music/photo_new/T002R300x300M000003RMaRI1iFoYd_1.jpg?max_age=2592000',
            lrc: '[00:0.73]\u544a\u767d\u6c14\u7403 - \u5468\u6770\u4f26\n[00:3.17]\u8bcd\uff1a\u65b9\u6587\u5c71\n[00:5.03]\u66f2\uff1a\u5468\u6770\u4f26\n[00:23.56]\u585e\u7eb3\u6cb3\u7554  \u5de6\u5cb8\u7684\u5496\u5561\n[00:26.28]\u6211\u624b\u4e00\u676f  \u54c1\u5c1d\u4f60\u7684\u7f8e\n[00:29.27]\u7559\u4e0b\u5507\u5370\u7684\u5634\n[00:34.08]\u82b1\u5e97\u73ab\u7470  \u540d\u5b57\u5199\u9519\u8c01\n[00:36.8]\u544a\u767d\u6c14\u7403  \u98ce\u5439\u5230\u5bf9\u8857\n[00:39.86]\u5fae\u7b11\u5728\u5929\u4e0a\u98de\n[00:44.03]\u4f60\u8bf4\u4f60\u6709\u70b9\u96be\u8ffd\n[00:46.66]\u60f3\u8ba9\u6211\u77e5\u96be\u800c\u9000\n[00:49.32]\u793c\u7269\u4e0d\u9700\u6311\u6700\u8d35\n[00:51.53]\u53ea\u8981\u9999\u69ad\u7684\u843d\u53f6\n[00:54.48]\u5594\uff5e\u8425\u9020\u6d6a\u6f2b\u7684\u7ea6\u4f1a\n[00:56.81]\u4e0d\u5bb3\u6015\u641e\u7838\u4e00\u5207\n[00:59.56]\u62e5\u6709\u4f60\u5c31\u62e5\u6709  \u5168\u4e16\u754c\n[01:08.23]\u4eb2\u7231\u7684  \u7231\u4e0a\u4f60  \u4ece\u90a3\u5929\u8d77\n[01:18.82]\u751c\u871c\u7684\u5f88\u8f7b\u6613\n[01:26.02]\u4eb2\u7231\u7684  \u522b\u4efb\u6027  \u4f60\u7684\u773c\u775b\n[01:36.67]\u5728\u8bf4\u6211\u613f\u610f\n[01:81.3]\u585e\u7eb3\u6cb3\u7554  \u5de6\u5cb8\u7684\u5496\u5561\n[01:85.72]\u6211\u624b\u4e00\u676f  \u54c1\u5c1d\u4f60\u7684\u7f8e\n[01:91.35]\u7559\u4e0b\u5507\u5370\u7684\u5634\n[01:99.05]\u82b1\u5e97\u73ab\u7470  \u540d\u5b57\u5199\u9519\u8c01\n[02:03.35]\u544a\u767d\u6c14\u7403  \u98ce\u5439\u5230\u5bf9\u8857\n[02:08.68]\u5fae\u7b11\u5728\u5929\u4e0a\u98de\n[02:15.57]\u4f60\u8bf4\u4f60\u6709\u70b9\u96be\u8ffd\n[02:19.53]\u60f3\u8ba9\u6211\u77e5\u96be\u800c\u9000\n[02:23.88]\u793c\u7269\u4e0d\u9700\u6311\u6700\u8d35\n[02:28.12]\u53ea\u8981\u9999\u69ad\u7684\u843d\u53f6\n[02:32.68]\u5594\uff5e\u8425\u9020\u6d6a\u6f2b\u7684\u7ea6\u4f1a\n[02:36.92]\u4e0d\u5bb3\u6015\u641e\u7838\u4e00\u5207\n[02:41.53]\u62e5\u6709\u4f60\u5c31\u62e5\u6709  \u5168\u4e16\u754c\n[02:50.4]\u4eb2\u7231\u7684  \u7231\u4e0a\u4f60  \u4ece\u90a3\u5929\u8d77\n[02:61.22]\u751c\u871c\u7684\u5f88\u8f7b\u6613\n[02:68.22]\u4eb2\u7231\u7684  \u522b\u4efb\u6027  \u4f60\u7684\u773c\u775b\n[02:78.9]\u5728\u8bf4\u6211\u613f\u610f\n[02:86.02]\u4eb2\u7231\u7684  \u7231\u4e0a\u4f60  \u604b\u7231\u65e5\u8bb0\n[02:96.87]\u98d8\u9999\u6c34\u7684\u56de\u5fc6\n[03:03.82]\u4e00\u6574\u74f6  \u7684\u68a6\u5883  \u5168\u90fd\u6709\u4f60\n[03:14.73]\u6405\u62cc\u5728\u4e00\u8d77\n[03:21.42]\u4eb2\u7231\u7684\u522b\u4efb\u6027  \u4f60\u7684\u773c\u775b\n[03:35.28]\u5728\u8bf4\u6211\u613f\u610f\n',
          },
          {
            title: '夜曲',
            artist: '周杰伦',
            src: 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&response=res&type=convert_url&rid=MUSIC_118980',
            pic: 'https://y.qq.com/music/photo_new/T002R300x300M0000024bjiL2aocxT_3.jpg?max_age=2592000',
            lrc: '[00:00.00]夜曲 - 周杰伦[00:08.05]词：三本目[00:16.11]曲：周杰伦[00:24.16]清早多雾的孤城 车厢中极安宁[00:27.29]这忧伤表情 穿黑西装恭迎[00:30.32]这深情 只得哀悼心情[00:33.01]这深情 终于安息得极安静[00:35.80]即使多么不舍的感情[00:37.53]早给悲伤吞并[00:38.89]必须松开手的是宿命[00:41.27]我以这韵脚[00:42.21]替我厚葬与你过去甜蜜爱情[00:44.65][00:46.45]无常的哀乐悲鸣凄楚的回声[00:49.06]伴着白鲜花和风铃不忍不愿听[00:51.80]痛哪里会放过我[00:53.37]已带你去到了冥冥[00:54.87]来生怎可知晓如今先哭为敬[00:57.56]没回应绝望并没回应[00:59.65]无凭无证当天色彩怎辩认[01:01.76]失色的失色的生命[01:03.34]是多温柔曾经为何只可和残影[01:05.98]徒留一人孤清[01:07.53][01:08.45]弹着你最爱听那夜曲声[01:11.36]曲中的心痛不能停[01:14.18]陷进记忆的旧风景[01:16.97]牵挂便更致命[01:19.58]哪个听见夜曲声[01:22.55]仿佛漆黑里的流萤[01:25.09]伸手想抓紧偏没记认[01:28.82][01:29.53]弹着你最爱听那夜曲声[01:33.43]曲中的心痛不能停[01:35.66][01:36.25]满载脑海消逝声影[01:38.95]心碎是已注定[01:41.69]哪个听见夜曲声[01:44.41]即使当天爱多虔诚[01:47.20]今天消失于虚空没记认[01:50.98][02:14.90]伤似贪心的秃鹰撕开心口偷听[02:17.82]这回忆留声不愿不愿清醒[02:20.56]这深情终于不敌天命[02:23.13]这深情怎么安息不能相认[02:26.10]即使多么不舍的感情早给悲伤吞并[02:29.33]偷心者心死仿如幽灵[02:31.68]我以这语句[02:32.62]替我拼凑那已破碎磨灭爱情[02:35.17][02:36.56]弹着你最爱听那夜曲声[02:39.65]曲中的心痛不能停[02:42.40]陷进记忆的旧风景[02:45.15]牵挂便更致命[02:47.31][02:48.03]哪个听见夜曲声[02:50.70]仿佛漆黑里的流萤[02:52.92][02:53.43]伸手想抓紧偏没记认[02:57.85]弹着你最爱听那夜曲声[03:01.67]曲中的心痛不能停[03:04.50]满载脑海消逝声影[03:07.22]心碎是已注定[03:09.79]哪个听见夜曲声[03:12.73]即使当天爱多虔诚[03:15.44]今天消失于虚空没记认[03:19.29][03:20.77]清早多雾的孤城车厢中极安宁[03:23.89]这忧伤表情穿黑西装恭迎[03:26.83]这深情只得哀悼心情[03:29.29]这深情终于安息得极安静[03:32.33]即使多么不舍得感情早给悲伤吞并[03:35.57]必须松开手的是宿命[03:37.81]我以这韵脚[03:38.69]替我厚葬与你过去甜蜜爱情',
          },
        ]"
/>

appearance