Welcome to join the group and discuss and learn together

Wechat public account, every day to provide you with technical dry goods

Address of the technical platform of the blogger

Blogger open source microserver architecture front and back end separation technology blog project source address, welcome everyone star

Vue introduces music player plugins

npm install @moefe/vue-aplayer
Copy the code

Introduced the main. Js

import APlayer from '@moefe/vue-aplayer'
Vue.use(APlayer, {
    defaultCover: 'https://github.com/u3u.png',
    productionTip: true});Copy the code

test

<aplayer :audio="audio" :lrcType="1" fixed />

data() {
    return {
      audio: [
        {
          name: "Listen to your mother.",
          artist: "Jay Chou",
          url:
            "http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_138243&response=res&format=mp3|aac&type=convert_url&br=128k mp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",
          cover: 'http://img1.kuwo.cn/star/starheads/240/42/97/3914752958.jpg'.// prettier-ignore
          lrc:
            [00:11.64] do you have a lot of questions kid? [00:14.26] Why are other people reading comics? [00:16.89] Why am I talking to the piano while I'm learning to draw [00:22.38] I said I wanted a big plane, n[00:24.91] but I got an old screw machine, n[00:27.48] Why listen to your mother, n[00:29.79] When you grow up, you'll understand that, hum, n[00:32.26] When I grow up, I understand \n[00:35.23] Why do I run faster than others \n[00:36.64] fly higher than others \n[00:37.88] In the future everyone will see my cartoons \n[00:40.23] everyone will sing my songs \n[00:42.95] Mom's hard work don't let you see [00:45.57] warm things are in her heart \n[00:48.01] have time to touch her hand \n[00:50.70] hold hands together sleepwalking \n[00:53.10] listen to your mother don't let her hurt \n[01:03.14] want to grow up quickly to protect her \n[01:12.93] beautiful white hair sprout in happiness \n[01:23.96] Angel magic warm kind \n[01:34.43] in your future music is your trump card \n[01:36.21] that trump card talk love \n[01:37.68] and I don't want to teach you bad \n[01:39.21] listen to your mother \n[01:40.52] later in love \n[01:41.96] I know your future \n[01:44.09] why better than ME \n[01:45.40] you because too many students study \n[01:46.53] write something here \n[01:47.50] But I suggest you listen to mom \n[01:49.10] I'll study hard \n[01:50.23] study hard how can it come out of my mouth \n[01:52.34] I don't want you to lose so I want you to study hard \n[01:55.47] You should take all the faults your mother gives you \n[01:57.56] because I don't know it is I who should tell her I still have \n[01:59.91] By the way, I will meet Chow Yun-fat \n[02:02.31] so you can show off to your classmates \n[02:03.38] The future is your father \n[02:04.47] I can't find your love letter \n[02:06.94] Admit what you like \n[02:08.02] because I'll know you'll hold her on the playground \n[02:09.40] You'll start to like singing pop songs \n[02:12.81] Because Cheung Began to sing kiss goodbye \n[02:15.43] Listen to your mother don't let her hurt \n[02:26.22] want to grow up quickly to protect her \n[02:36.16] beautiful white hair sprout in happiness \n[02:46.66] Angel magic warm in kindness \n[02:56.68] Listen to your mother don't let her get hurt \n[03:07.46] Want to grow up fast to protect her \n[03:17.27] As I grow up I began to understand why I \n[03:20.81] run faster than others fly higher than others \n[03:22.56] In the future everyone will see my cartoons \n[03:25.52] everyone will sing my songs \n[03:28.31] Mother's hard work she does not let you see \n[03:30.72] warm things are in her heart \n[03:33.31] Have time to touch her hand more \n[03:36.15] hold hands sleepwalk \n[03:38.34] Listen to your mother don't let her hurt \n[03:48.72] Want to grow up quickly to protect her \n[03:59.10] beautiful white hair sprout in happiness \n[04:09.32] Angel magic Warm in kindness",
        },
        {
          name: "In the name of the father",
          artist: "Jay Chou",
          url:
            "http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_28386348&response=res&format=mp3|aac&type=convert_url&br=12 8kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",
          cover: 'http://img1.kuwo.cn/star/starheads/240/42/97/3914752958.jpg?param=300y300'.// prettier-ignore
          lrc:
            "\n[00:18.80] in the name of my father \n[00:35.80] Jay Chou [00:52.80] 285552115 \n[01:09.80] \n[01:26.56] cool morning dew wet black dress \n[01:29.67] flagstone road misty father in low voice \n[01:32.52] but the realization can only be more cruel \n[01:35.33] All for the road to the church [01:47.15] [01:48.69] Every one of us is guilty [01:51.77] I can decide who is against [01:53.15] and who should sleep [01:54.53] Arguments cannot be settled [01:55.76] in the night that never ends [01:57.35] Shut your mouth [01:58.69] only favor n[01:59.88] Those who stand in the way are guilty n[02:01.18] regret and no way back n[02:02.64] sentence in the name of the father n[02:03.96] It feels like there are no words n[02:05.59] it's like laughing and crying \n[02:07.04] gaze at perfect black \n[02:08.42] Stop the spread of tragedy tragedy will make me drunk \n[02:10.72] bow to kiss my left hand \n[02:12.17] for the promise of forgiveness \n[02:13.50] old pipe organ in the corner \n[02:14.93] all the time all the time play \n[02:16.25] The black curtain is blown by the wind \n[02:17.66] The sun is silent through \n[02:19.18] to the herd of animals that I have tamed \n[02:21.88] Silent cry silent cry \n[02:23.55] Lonely began to ferment \n[02:24.88] kept laughing at me \n[02:26.29] memories gradually burning \n[02:27.66] once pure picture \n[02:28.77] cruel gentle appear \n[02:30.21] fragile time to \n[02:31.33] Let's pray \n[02:32.95] Merciful Father I've fallen into \n[02:35.73] the land of innocence \n[02:38.77] Please forgive my conceit \n[02:41.68] \n[02:43.77] No one can say no one can say \n[02:46.59] It's hard to bear \n[02:48.67] Behind the glory is carved a lonely \n[02:52.52] \n[02:54.66] WHEN I close my eyes I see \n[02:57.67] the picture of that dream \n[03:00.59] the sky is misty \n[03:03.56] \n[03:05.76] My father took my hands \n[03:08.66] gently walked \n[03:10.67] the quiet flagstones of the morning \n[03:14.58] \n[03:46.34] Bent his head and kissed my left hand \n[03:47.88] for a promise of forgiveness \n[03:49.21] Old pipe organ in the corner \n[03:50.68] playing all the time \n[03:52.21] Black curtain blown by the wind \n[03:53.55] Sunshine wordless through \n[03:54.88] to the group of animals that I have tamed \n[03:57.56] silent shout silent shout \n[03:59.21] Lonely began to ferment \n[04:00.68] kept laughing at me \n[04:01.77] memories gradually burning \n[04:03.33] once innocent picture \n[04:04.54] ruthlessly gentle emerge \n[04:05.69] Fragile time \n[04:06.88] Let's pray \n[04:08.65] Merciful Father I have fallen \n[04:11.90] into the land where sin is invisible \n[04:14.58] Please forgive my conceit \n[04:17.97] \n[04:19.88] No one can say no one can say \n[04:22.85] It's hard to bear \n[04:24.66] Behind the glory is a lonely \n[04:27.67] [04:30.84] Merciful Father I have fallen into n[04:36.44] The land of innocence n[04:42.07] Please forgive me my conceit n[04:47.36] Engraved with a lonely n[04:52.74] Merciful Father I have fallen into [04:55.56] A country without sin [04:58.28] Please forgive my conceit [05:01.75] n[05:03.58] No one can say No one can say It's hard to bear n[05:06.49] N [05:08.66] Behind the glory there is a loneliness \n[05:12.29] \n[05:14.32] I spent the night polishing the mottled coat of arms (I see it again when I close my eyes) \n[05:17.45] Lonely glow a feeling I only know (the picture of that dream in those days) \n[05:20.13] Candlelight constantly shaking (the sky is misty) \n[05:22.41] Owl peered out from the window lattice \n[05:25.50] corridor leading to the hall (my father took my hands) \n[05:28.42] An indescribable change of life (passing gently)",
        },
        {
          name: "Wayward One",
          artist: "Jillian Rae",
          url:
            "http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_72217588&response=res&format=mp3|aac&type=convert_url&br=12 8kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300'.// prettier-ignore
          lrc: "",
        },
        {
          name: "All the way (Cover: Yang Zongwei) - The Face of Bamboo",
          artist: "Yang Zongwei",
          url:
            "http://www.170mv.com/kw/antiserver.kuwo.cn/anti.s?rid=MUSIC_150691890&response=res&format=mp3|aac&type=convert_url&br=1 28kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3",
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300'.// prettier-ignore
          lrc: "",
        },
        {
          name: "I must love you.",
          artist: "Sun terrace",
          url:
            "https://sharefs.yun.kugou.com/202011071130/3810fcfa192d477d9adc3c2e0b037d8e/G206/M07/14/07/Dg4DAF5gb2WAC_wFAEIUFnm0ih06 46.mp3",
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300'.// prettier-ignore
          lrc: "",}]}; },Copy the code