<template>
<div class="audio-container">
<audio :src="audiourl" ref="audioRef" @timeupdate="updateProgress" muted></audio>
<div class="trumpet" @click="playAudio()">
<img src="/img/btn-trumpet.png" class="labaPic" v-show="audioPlay" >
<img src="/img/btn-mute.png" class="labaPic" v-show="!audioPlay">
</div>
<div class="slider-runnable-background">
<div class="slider-runnable">
<input type="range" :value=sliderValue ref="silderAudio" :style="sliderStyle" @change="aduioChange">
</div>
<div class="timer">
{
{audioStart}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "audioPlayerSelf",
props:{
audiourl: {
type: String,
default: "/static/mp3/语音待添加.mp3"
}
},
data(){
return {
audioPlay: false,
audioStart: '00:00',
audioDuration: '00:00',
sound: false,
sliderValue: 0,
sliderStyle:{
backgroundSize: '0% 100%'
}
}
},
mounted() {
this.$refs.audioRef.volume = 1; // 获取audio元素
this.updateTimeAudio();
this.fetch();
// 修改初始 值为null 的bug
this.sliderValue=0
},
created() {
},
methods:{
fetch() {
let that = this
var myVid = this.$refs.audioRef
myVid.loop = false
if (myVid != null) {
myVid.oncanplay = function () {
that.audioDuration = that.transTime(myVid.duration) // 计算音频时长
}
myVid.volume = 1 // 设置音量100%
}
},
aduioChange(){
let silder = this.$refs.silderAudio
let curVal = parseFloat(silder.value);
this.sliderValue = curVal
this.sliderStyle = {
backgroundSize: `${
curVal}%, 100%`
}
let audio = this.$refs.audioRef
audio.currentTime = audio.duration * curVal /100
audio.play()
this.audioPlay=true
},
// 更新进度条与当前播放时间
updateProgress(e) {
var value = e.target.currentTime / e.target.duration
if (this.$refs.silderAudio) {
this.sliderValue = value * 100
if (e.target.currentTime === e.target.duration) {
this.audioPlay = false
}
} else {
this.audioPlay = false
}
this.audioStart = this.transTime(this.$refs.audioRef.currentTime)
},
// 播放暂停控制
playAudio() {
let recordAudio = this.$refs.audioRef // 获取audio元素
if (this.audioPlay) {
recordAudio.pause()
this.audioPlay = false
} else {
recordAudio.play()
this.audioPlay = true
}
},
// 暂停语音
YuYinPause(){
let recordAudio = this.$refs.audioRef // 获取audio元素
if(recordAudio.playing){
recordAudio.pause()
this.audioPlay = false
}
},
/**
* 音频播放时间换算
* @param {number} value - 音频当前播放时间，单位秒
*/
transTime(time) {
var duration = parseInt(time)
var minute = parseInt(duration / 60)
var sec = (duration % 60) + ''
var isM0 = ':'
if (minute === 0) {
minute = '00'
} else if (minute < 10) {
minute = '0' + minute
}
if (sec.length === 1) {
sec = '0' + sec
}
return minute + isM0 + sec
},
},
watch:{
sliderValue(){
this.sliderStyle = {
backgroundSize: `${
this.sliderValue}%, 100%`
}
},
}
}
</script>
<style lang="scss" scoped>
.audio-container{
display: flex;
justify-content: space-between;
.labaPic{
width: 62px;
height: 62px;
}
}
.slider-runnable-background{
width: 629px;
height: 62px;
background-color: #dddede;
border-radius: 100px;
margin-left: 20px;
display: flex;
align-items: center;
.slider-runnable{
display: flex;
margin-left: 8px;
}
.timer{
margin-left: 10px;
font-size: 16px;
}
}
input[type="range"] {
width: 495px;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background-image: -webkit-linear-gradient(#727272, #727272);
background-repeat: no-repeat;
background-color: white;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #fff;
width: 30px;
height: 30px;
border-radius: 30px;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover {
background: #666;
}
</style>
参考資料：
HTMLMediaElement：abortイベント
HTML5新機能 - カスタムスライダー（input[type="range"]）
vue カスタムオーディオ オーディオスタイルと操作パネル