在vue3中使用自定义audio
界面的audio标签中src或缺的是后端传来的mp3文件，只需要隐藏，然后自定义样式并且绑定事件
<audio :src="audiobox.url" ref="audio" @pause="onPause" @play="onPlay" @timeupdate="onTimeupdate"@canplay="onLoadedmetadata" controls style="display: none;"></audio>setup(){audio: {// 该字段是音频是否处于播放状态的属性playing: false,// 音频当前播放时长currentTime: 0,// 音频最大播放时长maxTime: 0,minTime: 0,step: 0.1,},lefticon: "",play: false, // 播放暂停按钮sliderTime:"",customColor:"#3abb94"}// 将整数转换成 时：分：秒的格式const realFormatSecond=(second) =>{var secondType = typeof second;if (secondType === "number" || secondType === "string") {second = parseInt(second);var hours = Math.floor(second / 3600);second = second - hours * 3600;var mimute = Math.floor(second / 60);second = second - mimute * 60;// hours + ':' +return ("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2);} else {return "0:00:00";}}// 开始播放const onPlay = ()=>{audioMedia.value.play()}// 暂停播放const onPause =()=>{state.audio.playing = false;audioMedia.value.pause();let startTime = parseInt(state.audio.currentTime);console.log("audio.playing",state.audio.playing,"maxTime",state.audio.maxTime);state.play = false;if (startTime == state.audio.maxTime) {state.sliderTime = 0;state.audio.currentTime = "00:00";}}// 进度条const onTimeupdate =(res)=>{state.audio.currentTime = res.target.currentTime;console.log(state.audio.currentTime)state.sliderTime = parseInt((state.audio.currentTime / state.audio.maxTime) * 100);// state.sliderTime= formatProcessToolTip(state.sliderTime)}// 进度条格式化toolTipconst formatProcessToolTip=(index) =>{index = parseInt((state.audio.maxTime / 100) * index);return "进度条: " + realFormatSecond(index);}const onLoadedmetadata=(res)=> {state.audio.maxTime = parseInt(res.target.duration);}
