<template>
<div>
<audio
ref="audio"
src="https://wdd.js.org/element-audio/static/falling-star.mp3"
controls="controls"
@pause="onPause"
@play="onPlay"
@timeupdate="onTimeupdate"
@loadedmetadata="onLoadedmetadata"
/>
<!-- 音頻播放控件 -->
<div>
<el-button type="text" @click="startPlayOrPause">{{ audio.playing | transPlayPause }}</el-button>
<el-tag type="info">{{ audio.currentTime | formatSecond }}</el-tag>
<el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>
</div>
</div>
</template>
<script>
// 將整數(shù)轉(zhuǎn)換成 時(shí)：分：秒的格式
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 hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
} else {
return '0:00:00'
}
}
export default {
filters: {
// 使用組件過(guò)濾器來(lái)動(dòng)態(tài)改變按鈕的顯示
transPlayPause(value) {
return value ? '暫停' : '播放'
},
// 將整數(shù)轉(zhuǎn)化成時(shí)分秒
formatSecond(second = 0) {
return realFormatSecond(second)
}
},
data() {
return {
audio: {
// 該字段是音頻是否處于播放狀態(tài)的屬性
playing: false,
// 音頻當(dāng)前播放時(shí)長(zhǎng)
currentTime: 0,
// 音頻最大播放時(shí)長(zhǎng)
maxTime: 0
}
}
},
methods: {
// 控制音頻的播放與暫停
startPlayOrPause() {
return this.audio.playing ? this.pause() : this.play()
},
// 播放音頻
play() {
this.refs.audio1.play()
},
// 暫停音頻
pause() {
this.$refs.audio.pause()
},
// 當(dāng)音頻播放
onPlay() {
this.audio.playing = true
},
// 當(dāng)音頻暫停
onPause() {
this.audio.playing = false
},
// 當(dāng)timeupdate事件大概每秒一次嚣艇，用來(lái)更新音頻流的當(dāng)前播放時(shí)間
onTimeupdate(res) {
console.log('timeupdate')
console.log(res)
this.audio.currentTime = res.target.currentTime
},
// 當(dāng)加載語(yǔ)音流元數(shù)據(jù)完成后，會(huì)觸發(fā)該事件的回調(diào)函數(shù)
// 語(yǔ)音元數(shù)據(jù)主要是語(yǔ)音的長(zhǎng)度之類的數(shù)據(jù)
onLoadedmetadata(res) {
console.log('loadedmetadata')
console.log(res)
this.audio.maxTime = parseInt(res.target.duration)
}
}
}
</script>
<style>
</style>
