HTML5 Audio API 打造自己的音频播放器

老毛 - 2022-02-28 12:04:27

---

播放器大概有一下功能 ：

可以点击展示开关（展示/关闭歌词）鼠标悬浮到小喇叭 调节音量点击进度条上方的歌名、歌手名区域可以切换播放器的形态如果你在自己的博客中引入播放器，在播放歌曲的时候切换页面，播放器的播放状态会被记录在localStorage，当新的页面加载完毕，会自动按上个页面的进度播放你可以自己维护歌单，如果恰好你懂一些前端知识，只要把约定格式的数据传给播放器组件就可以了，详见 源码

我们将会用到的音频接口如下：

play 当音频/视频已开始或不再暂停时触发。pause 当音频/视频已暂停时触发。timeupdate 当目前的播放位置已更改时触发。waiting 当视频由于需要缓冲下一帧而停止时触发。playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。timeupdate 当目前的播放位置已更改时触发。

成品演示地址

<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

Tags 标签

前端vue.jshtml5audio-player音频

扩展阅读