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

原生HTML audio UI

当我们用到的Web播放音频的时候，会发现原生的标签比较淳朴，多少感觉有点low，不信的话可以点上面的预览试一下。

那么我们能不能来自己美化播放器的UI呢？当然可以，这篇文章就是来介绍一下我们应该具备哪些知识，如何一步步自定义播放器的UI，起到一个抛砖引玉的作用。

首先罗列一下我们改造后的播放器大概有以下功能 ：

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

现在我已经把它封装成了vue 的组件发布到了npm官网，如果需要你可以直接npm i leo-player --save 使用。npm package 地址

完成上面的例子我们将会用到的音频接口如下：

• 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

大家有什么想法欢迎留言讨论