基于原生 JavaScript 的小巧优雅的音乐播放器

预览地址: https://bigggge.github.io/MPlayer/
源代码：https://github.com/bigggge/MPlayer

1. 进度控制
2. 音量控制
3. 频谱展示
4. 歌词展示
5. 歌曲列表

    <script>
      var options = {
        el: 'app',
        autoplay: true,
        music: [
          {
            title: 'Letter Song',
            author: 'ヲタみん',
            src: 'https://7xq3d5.com1.z0.glb.clouddn.com/%E3%83%B2%E3%82%BF%E3%81%BF%E3%82%93%20-%20Letter%20Song.mp3',
            cover: 'http://pic.xiami.net/images/album/img75/87975/6615037721361503772.jpg',
            lrc: 'https://7xq3d5.com1.z0.glb.clouddn.com/letter-song.lrc'
          },
          {
            title: '光るなら',
            author: 'Goose house',
            src: 'https://7xq3d5.com1.z0.glb.clouddn.com/Goose%20house%20-%20%E5%85%89%E3%82%8B%E3%81%AA%E3%82%89.mp3',
            cover: 'https://p3.music.126.net/R3ndkz84v-nDZKVCBjXArw==/7834020348181215.jpg?param=130y130'
          },
          {
            title: '君だったら',
            author: 'HAPPY BIRTHDAY',
            src: 'https://7xq3d5.com1.z0.glb.clouddn.com/HAPPY%20BIRTHDAY%20-%20%E5%90%9B%E3%81%9F%E3%82%99%E3%81%A3%E3%81%9F%E3%82%89.mp3',
            cover: 'https://pic.xiami.net/images/album/img99/21699/216991364021699.jpg'
          },
          {
            title: 'あの頃~ジンジンバオヂュオニー~',
            author: 'whiteeeen',
            src: 'https://7xq3d5.com1.z0.glb.clouddn.com/whiteeeen%20-%20%E3%81%82%E3%81%AE%E9%A0%83~%E3%82%B7%E3%82%99%E3%83%B3%E3%82%B7%E3%82%99%E3%83%B3%E3%83%8F%E3%82%99%E3%82%AA%E3%83%81%E3%82%99%E3%83%A5%E3%82%AA%E3%83%8B%E3%83%BC~.mp3',
            cover: 'https://pic.xiami.net/images/album/img8/1726043308/21002132941444187076.jpeg'
          },
          {
            title: '童话镇',
            author: '陈一发儿',
            src: 'https://7xq3d5.com1.z0.glb.clouddn.com/%E9%99%88%E4%B8%80%E5%8F%91%E5%84%BF%20-%20%E7%AB%A5%E8%AF%9D%E9%95%87.mp3',
            cover: 'https://pic.xiami.net/images/album/img57/129/580987cd1634f_6451457_1477019597.png',
            lrc: '[00:20.300]编曲:暗杠 [00:21.300]制作人：暗杠 [00:21.500]器乐演奏：暗杠 [00:22.300]和声编写：暗杠 [00:23.300]听说白雪公主在逃跑 [00:26.810]小红帽在担心大灰狼 [00:30.110]听说疯帽喜欢爱丽丝 [00:33.570]丑小鸭会变成白天鹅 [00:37.050]听说彼得潘总长不大 [00:40.360]杰克他有竖琴和魔法 [00:43.780]听说森林里有糖果屋 [00:46.960]灰姑娘丢了心爱的玻璃鞋 [00:51.030]只有睿智的河水知道 [00:53.900]白雪是因为贪玩跑出了城堡 [00:57.890]小红帽有件抑制自己 [01:00.890]变成狼的大红袍 [01:04.290]总有一条蜿蜒在童话镇里七彩的河 [01:11.350]沾染魔法的乖张气息 [01:14.820]却又在爱里曲折 [01:18.190]川流不息扬起水花 [01:21.260]又卷入一帘时光入水 [01:24.920]让所有很久很久以前 [01:28.410]都走到幸福结局的时刻 [01:47.410]听说睡美人被埋藏 [01:50.740]小人鱼在眺望金殿堂 [01:54.210]听说阿波罗变成金乌 [01:57.520]草原有奔跑的剑齿虎 [02:01.100]听说匹诺曹总说着谎 [02:04.400]侏儒怪拥有宝石满箱 [02:07.920]听说悬崖有颗长生树 [02:11.140]红鞋子不知疲倦地在跳舞 [02:14.740]只有睿智的河水知道 [02:18.100]睡美人逃避了生活的煎熬 [02:21.700]小人鱼把阳光抹成眼影 [02:24.910]投进泡沫的怀抱 [02:28.040]总有一条蜿蜒在童话镇里七彩的河 [02:35.450]沾染魔法的乖张气息 [02:38.780]却又在爱里曲折 [02:42.260]川流不息扬起水花 [02:45.310]又卷入一帘时光入水 [02:48.950]让所有很久很久以前 [02:52.260]都走到幸福结局的时刻 [02:55.980]总有一条蜿蜒在童话镇里梦幻的河 [03:02.780]分隔了理想分隔现实 [03:06.120]又在前方的山口汇合 [03:09.610]川流不息扬起水花 [03:12.640]又卷入一帘时光入水 [03:16.330]让所有很久很久以前 [03:19.780]都走到幸福结局的时刻 又陌生 [03:25.370]啊~~啊~~啊~~啊~~'
          },
          {
            title: '成都',
            author: '赵雷',
            src: 'https://7xq3d5.com1.z0.glb.clouddn.com/%E8%B5%B5%E9%9B%B7%20-%20%E6%88%90%E9%83%BD.mp3',
            cover: 'https://pic.xiami.net/images/album/img87/181/585a3226db20e_9076087_1482306086.jpg'
          }
        ]

      }

      var player = new MPlayer(options)

    </script>