共计 3899 个字符，预计需要花费 10 分钟才能阅读完成。
播放器大略有一下性能：
- 能够点击展现开关（展现 / 敞开歌词）
- 鼠标悬浮到小喇叭 调节音量
- 点击进度条上方的歌名、歌手名区域能够切换播放器的状态
- 如果你在本人的博客中引入播放器，在播放歌曲的时候切换页面，播放器的播放状态会被记录在 localStorage，当新的页面加载结束，会主动按上个页面的进度播放
- 你能够本人保护歌单，如果恰好你懂一些前端常识，只有把约定格局的数据传给播放器组件就能够了，详见 源码
<template>
<div>
<LeoMusic
ref="player"
:radar="radarImg"
:songs="songs"
/>
</div>
</template>
<script>
import LeoMusic from "../components/LeoMusic";
export default {
name: "H5Player",
components: {LeoMusic},
data() {
return {
radarImg: 'https://www.iicoom.top/_nuxt/img/player.1e21e0f.png',
songs: [{"name":"秋的怀念","singer":"赵陆地","url":"https://www.iicoom.top/1645364770733.mp3","cover":"https://img0.baidu.com/it/u=3110628663,1493621922&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500","duration":"3:32","lyric":null},{"name":"幻听","singer":"许嵩","url":"https://www.iicoom.top/1643984465445.mp3","cover":"https://iknow-pic.cdn.bcebos.com/5243fbf2b211931361ef4ddd68380cd791238d2b?x-bce-process%3Dimage%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_jpg","duration":"4:33","lyric":"[00:00.00]《幻听》\n[00:08.00] 词 / 曲 / 唱：许嵩 \n[00:16.00]\n[00:18.00] 歌词编辑：孟德良 \n[00:25.00]2013 年 04 月 20 日 \n[00:32.00]\n[00:34.57] 在远方的时候 \n[00:38.02]“又想你到泪流”\n[00:42.18] 这矫情的 措辞构造 \n[00:45.74] 经验过的人会懂 \n[00:50.30] 那些不堪言 的疼痛 \n[00:54.19] 也就是我 自作自受 \n[00:58.83] 你没有装聋 你真没打动 \n[01:06.08]\n[01:07.25] 一个人的时候 \n[01:10.38] 偷偷看你的微博 \n[01:14.92] 你转播的歌 好耳熟 \n[01:18.50] 咱们坐一起听过 \n[01:22.62] 当日嫌它的 唱法做作 \n[01:26.63] 当初听起来 居然很活泼 \n[01:31.20] 可能是时光 让耳朵变得宽容 \n[01:38.23]\n[01:39.35] 现在一个人听歌 总是会感觉失落 \n[01:44.28] 幻听你 在我的耳边 微微诉说 \n[01:48.08] 夜色多温顺 你有多爱我 \n[01:55.56] 现在一个人听歌 总是会感觉惆怅 \n[02:00.70] 爱已不在这里 我却还没走脱 \n[02:04.23] 列表里的歌 随过往流动 \n[02:11.88](Music)\n[02:28.46] 一个人的时候 \n[02:31.64] 偷偷看你的微博 \n[02:36.18] 你每天 做了些什么 \n[02:39.80] 我都了然于胸 \n[02:44.08] 过后嫌你的 蠢话太多 \n[02:48.00] 当初回想起 画面已泛旧 \n[02:52.60] 可能是孤单 让情绪变得软弱 \n[02:59.62]\n[03:00.82] 现在一个人听歌 总是会感觉失落 \n[03:05.78] 幻听你 在我的耳边 微微诉说 \n[03:09.58] 夜色多温顺 你有多爱我 \n[03:16.68] 现在一个人听歌 总是会感觉惆怅 \n[03:22.03] 爱已不在这里 我却还没走脱 \n[03:25.86] 列表里的歌 随过往流动 \n[03:32.60]\n[03:33.30] 现在一个人听歌 总是会感觉失落 \n[03:40.10] 幻听你 在我的耳边 微微诉说 \n[03:43.88] 夜色多温顺 你有多爱我 \n[03:51.63] 现在一个人听歌 总是会感觉惆怅 \n[03:56.50] 爱已不在这里 我却还没走脱 \n[04:00.34] 如果你回头 不要放下我 \n[04:09.28](The end)www.22lrc.com ★\n[10:00.00]LRC 歌词下载：www.22lrc.com"},{"name":"有你多美妙","singer":"赵陆地","url":"https://www.iicoom.top/1643961020555.mp3","cover":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fshp.qpic.cn%2Fqqvideo_ori%2F0%2Fp08627jhzae_496_280%2F0&refer=http%3A%2F%2Fshp.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646551586&t=24ad737ba853891646bfb5af3699f834","duration":"3:49","lyric":null},{"name":"水中花","singer":"郁可唯","url":"https://www.iicoom.top/1643960600581.mp3","cover":"https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/pic/item/dbb44aed2e738bd46a03ab31ad8b87d6277ff994.jpg","duration":"3:30","lyric":"[00:00.000] 作词 : 娃娃 \n[00:01.000] 作曲 : 简宁 \n[00:02.000] 编曲 : GavinRiFF@Soulkidz\n[00:03.000] 制作人 : 荒井十一 \n[00:15.99] 凄雨冷风中 \n[00:18.93] 多少热闹如梦 \n[00:22.71] 已经姹紫嫣红 \n[00:27.00] 随风吹落 \n[00:31.38] 蓦然回首中 \n[00:34.11] 欢爱宛如烟云 \n[00:37.83] 似水年华流走 \n[00:42.24] 不留影踪 \n[00:45.84] 我看见水中的花朵 \n[00:49.29] 强要留住一抹红 \n[00:53.70] 奈何辗转在风尘 \n[00:57.48] 不再有来日色彩 \n[01:01.02] 我看见泪光中的我 \n[01:04.62] 有力留住些什么 \n[01:08.85] 只在恍惚醉意中 \n[01:12.66] 还有些旧梦 \n[01:16.68] 这纷纷飞花已坠落 \n[01:20.37] 来日深情早已成空 \n[01:24.39] 这流水悠悠匆匆过 \n[01:27.87] 谁能将它片刻挽留 \n[01:31.77] 感怀飘零的花朵 \n[01:35.01] 尘世中无从寄托 \n[01:39.36] 任那雨打风吹也缄默 \n[01:43.23] 好像是我 \n[01:48.00] 飘呀飘呀 \n[01:51.78] 飘呀飘呀 \n[01:55.59] 飘呀飘呀 \n[02:02.01] 我看见水中的花朵 \n[02:05.52] 强要留住一抹红 \n[02:09.84] 奈何辗转在风尘 \n[02:13.62] 不再有来日色彩 \n[02:17.22] 我看见泪光中的我 \n[02:20.76] 有力留住些什么 \n[02:25.05] 只在恍惚醉意中 \n[02:28.89] 还有些旧梦 \n[02:32.88] 这纷纷飞花 \n[02:36.75] 这纷纷飞花已坠落 \n[02:40.32] 来日深情早已成空 \n[02:44.34] 这流水悠悠匆匆过 \n[02:47.82] 谁能将它片刻挽留 \n[02:51.78] 感怀飘零的花朵 \n[02:54.99] 尘世中无从寄托 \n[02:59.37] 任那雨打风吹也缄默 \n[03:03.21] 好像是我 \n[03:07.98] 飘呀飘呀 \n[03:11.82] 飘呀飘呀 \n[03:16.53] 飘呀飘呀"},{"name":"童话","singer":"光良","url":"https://www.iicoom.top/1643786973770.mp3","cover":"https://img1.baidu.com/it/u=1950650744,1277385819&fm=253&fmt=auto&app=138&f=JPEG?w=541&h=500","duration":"4:05","lyric":null}],
}
},
created() {},
mounted() {this.$refs.player.init()
}
}
</script>
<style scoped>
</style>demo
正文完