前端根据Aduio标签实现音频自定义播放控件

• 前言

---

原生<audio>html标签的样式会存在不同浏览器之间的样式冲突，如：谷歌和safari两种浏览器上控件风格不一致，所以想基于audio标签来实现一个自定义的播放控件。

功能清单

• 基础的播放、暂停功能
• 音频播放的音轨，可拖拽，且拖拽声音同步进度
• 播放的进度时长，音频的总时长
  [其他功能后续有时间再维护]

大致的效果长这样

实现步骤

audio标签

audio标签的controls属性那个控制是否显示标签自带的控件面板，如果不加该属性，页面就不会显示自带的面板。

				controlslist="nofullscreen nodownload noplaybackrate noremoteplayback" 
				oncontextmenu="return false"
				ref="audioRef" @loadedmetadata="handleDataLoaded"
				src='https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3' />

如果不需要标签自带的控件，以下属性可不用配置

1. controlslist
   用于设置控件右方...菜单的内容, 可选值：

• nodownload关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。
• nofullscreen关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。
• noremoteplayback关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。
  见MDN说明。
  

2. oncontextmenu
   接受一个回调函数，返回值为false则代表禁用右击菜单事件
   https://developer.mozilla.org/zh-CN/docs/Web/API/Element/contextmenu_event

3. src
   资源地址，可为具体的路径，也可以用blob流的形式 见文档

   audio.src = URL.createObjectURL(this.recorderManager.blobURL)
   

4. loadedmetadata
   回调函数，事件在元数据（metadata）被加载完成后触发,可以利用这个回调获取音频的时长 duration。

   this.audioDuration = this.$refs.audioRef.duration * 1000
   

5. timeupdate
   回调函数，当currentTime更新时会触发timeupdate事件，需要考虑触发频率问题。

   handleOnTimeUpdate(e) {
   		// console.log(e, 'djwdhuehfuyegu'); // 毫秒
   		// let curProcess = e.target.currentTime * 1000; // 当前播放进度s
   		this.curProcess = e.target.currentTime * 1000;
   	},
   

6. currentTime
   以 秒 为单位返回当前媒体元素的播放时间。设置这个属性会改变媒体元素当前播放位置。

音频进度条

使用vant的van-slider组件来实现。

<van-slider v-model="curProcessPercentage" bar-height="4px" active-color="#1F6FFF" inactive-color="rgba(0, 0, 0, 0.10)"@change="handleProcessChange">
		<template #button>
			<div class="custom-button"></div>
		</template>
</van-slider>

1. curProcessPercentage: 代表播放进度，百分数，可以拿currentTime/ this.audioDuration /100, 用computed实现

// 播放的进度
		curProcessPercentage: {
			get() {
				return this.curProcess / this.audioDuration * 100;
			},
			set(val) {
				this.curProcess = val * this.audioDuration / 100;
			}
		}

2. 当拖动进度条时，会触发slider的change事件，暴露拖动后总体的进度，需要注意它不是百分数,需要/100得到百分比。

handleProcessChange(e) {
			// console.log(e, '拖动进度');
			let p = this.audioDuration / 100 * e;
			this.$refs.audioRef.currentTime = p / 1000;
			this.curProcess = p;
		},