vue+element实现⾳乐播放（已修正elementslider⾃动滑动的bug）
最近项⽬⾥需要⽤到⾳乐播放器，但是h5⾃带audio标签样式太丑，于是便⾃⼰实现⼀个。
关于使⽤vue+element实现audio的⽂章有很多，这⾥不作赘述，直接上效果图和第⼀版源代码。
初始版本
<template>
<div>
<audio ref="audio" id="audio" src="../../assets/audio/audio.mp3"
@pause="onPause"
@play="onPlay"
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata">
您的浏览器不⽀持audio标签
</audio>
<div class="custom-audio clearfix">
<div class="audio-item play" @click="play" v-if="!audio.playing">
<img src="../../assets/audio/play.png" width="20"/>
</div>
<div class="audio-item play" @click="pause" v-if="audio.playing">
<img src="../../assets/audio/pause.png" width="20"/>
</div>
<div class="audio-item mute" @click="mute" v-if="!audio.muted">
<img src="../../assets/audio/cancleMute.png" width="20"/>
</div>
<div class="audio-item mute" @click="cancelMute" v-if="audio.muted">
<img src="../../assets/audio/mute.png" width="20"/>
</div>
<div class="audio-item play-time">{{ audio.currentTime | formatSecond}}</div>
<div class="audio-item progress">
<el-slider @change="progressChange" v-model="audio.currentTime":format-tooltip="realFormatSecond"
:max="audio.maxTime"></el-slider>
</div>
<div class="audio-item total-time">{{ audio.maxTime | formatSecond}}</div>
</div>
</div>
</template>
<script>
function 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;
return('0'+ mimute).slice(-2)+':'+('0'+ second).slice(-2)
}else{
return'00:00'
}
}
export default{
export default{
name:"CustomAudio",
data(){
return{
value:20,
audio:{
// 播放状态
playing:false,
// 静⾳状态
muted:false,
// ⾳频当前播放时长
currentTime:0,
// ⾳量
volume:1,
/
/ ⾳频最⼤播放时长
maxTime:0
},
cacheCurrent:0,
cacheVoice:1,
}
},
methods:{
// ⾳频相关⽅法
// 播放⾳频
play(){
this.$refs.audio.play()
},
// 暂停⾳频
pause(){
this.$refs.audio.pause()
},
// 当⾳频播放
onPlay(){
this.audio.playing =true
},
// 当⾳频暂停
onPause(){
this.audio.playing =false
},
// 静⾳
mute(){
this.audio.volume =0;
this.audio.muted =true;
this.$refs.audio.muted =true;
},
// 取消静⾳
cancelMute(){
vue element admin
this.audio.muted =false;
this.$refs.audio.muted =false;
},
// 拖动进度滚动条
progressChange(){
console.log('拖动滚动条触发',this.cacheCurrent);
this.$refs.audio.currentTime =this.cacheCurrent;
this.audio.currentTime =this.cacheCurrent
},
// 当timeupdate事件⼤概每秒⼀次，⽤来更新⾳频流的当前播放时间onTimeupdate(res){
this.audio.currentTime = res.target.currentTime
},
// 获取⾳频长度
onLoadedmetadata(res){
this.audio.maxTime =parseInt(res.target.duration)
},
realFormatSecond(second){
console.log('⾃动播放触发', second);
console.log('⾃动播放触发', second);
this.cacheCurrent = second;
return realFormatSecond(second);
},
},
filters:{
// 将整数转化成时分秒
formatSecond(second =0){
return realFormatSecond(second)
}
}
}
</script>
<style scoped lang="scss">
.custom-audio {
line-height:68px;
border:1px solid #6779ff;
padding:015px;
text-align: center;
.audio-item {
float: left;
img {
vertical-align: middle;
}
&.play {
width:50px;
cursor: pointer;
}
&.mute {
width:20px;
margin-left:8px;
cursor: pointer;
line-height:30px;
margin-top:19px;
}
&.play-time {
width:80px;
}
&.progress {
width:calc(100%-238px);
padding-top:16px;
}
&.total-time {
width:80px;
}
}
}
</style>
复制粘贴就完事了。
附赠⼏张⽤到的图⽚。
到这⾥⼤体结构就已经出来，播放暂停静⾳功能可以正常使⽤。
⼀个⼩bug
// html修改
<el-slider @change="progressChange" @mouseup.native="mouseupChangeTime" v-model="audio.currentTime":format-tooltip="realFormatSecond"
:max="audio.maxTime"></el-slider>
// ⽅法修改
// ⿏标抬起改变当前时间点
mouseupChangeTime(){
this.progressChange(this.cacheCurrent)
},
// 拖动进度滚动条
progressChange(value){
this.$refs.audio.currentTime = value >=0? value :this.cacheCurrent;
this.audio.currentTime = value >=0? value :this.cacheCurrent
},
由于change⽅法会默认传⼀个对象，所以⽤value>=0来判断⼀下是否从使⽤传⼊的值，这样⽆论是怎样拖动或是点击都可以正常使⽤。加个⾳量调节器
⾳量调节器也是⽤slider实现的，外⾯套⼀层弹出层，代码：
// html 部分使⽤el-tooltip把原来的两张声⾳图⽚包住
<el-tooltip class="item" effect="light" placement="top">
<div slot="content">
<el-slider vertical height="120px":step="0.01":max="1" v-model="audio.volume" @input="voiceChange()"
:format-tooltip="handelVoice"></el-slider>
</div>
<div class="audio-item mute" @click="mute" v-if="!audio.muted">
<img src="../../assets/audio/cancleMute.png" width="20"/></div>
<div class="audio-item mute" @click="cancelMute" v-if="audio.muted">
<img src="../../assets/audio/mute.png" width="20"/></div>
</el-tooltip>
// js⽅法部分
// 拖动⾳量滚动条
voiceChange(){
this.$refs.audio.volume =this.audio.volume;
},
// 处理⾳量显⽰
handelVoice(){
return parseInt(this.Fixed(2)*100);
}
这⾥的slider没有⾃动变化的情况，正常使⽤即可。
优化⼀下：
1. 当声⾳调整为0的时候，置为静⾳
2. 静⾳的时候调节声⾳改为取消静⾳
3. 点击取消静⾳的时候回到原来的⾳量
// 拖动⾳量滚动条
voiceChange(){
this.cancelMute(false);
if(this.audio.volume ===0){
this.mute(false)
}
this.$refs.audio.volume =this.audio.volume;
},
// 静⾳
mute(event){
// 正常点击静⾳和取消静⾳的时候把当前⾳量存下来，拖动触发的静⾳⽅法只需要改变状态
event &&(this.cacheVoice =this.audio.volume);
this.audio.volume =0;
this.audio.muted =true;
this.$refs.audio.muted =true;
},
// 取消静⾳
cancelMute(event){
event &&(this.audio.volume =this.cacheVoice);
this.audio.muted =false;
this.$refs.audio.muted =false;
},
到这⾥基本功能已经实现，如需更多功能，⾃⾏添加⼀下即可，难点主要在slider的滑动那⾥，但是解决⽅案也异常简单，只是不太容易想到。
o
如果⽂章帮助到了您，还请帮忙点个赞！()/
最终版本
<template>
<div>
<audio ref="audio" id="audio" src="../../assets/audio/audio.mp3"
@pause="onPause"
@play="onPlay"
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata">
您的浏览器不⽀持audio标签
</audio>
<div class="custom-audio clearfix">
<div class="audio-item play" @click="play" v-if="!audio.playing">
<img src="../../assets/audio/play.png" width="20"/></div>
<div class="audio-item play" @click="pause" v-if="audio.playing">
<img src="../../assets/audio/pause.png" width="20"/></div>
<el-tooltip class="item" effect="light" placement="top">
<div slot="content">
<el-slider vertical height="120px":step="0.01":max="1" v-model="audio.volume" @input="voiceChange()"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。