相關(guān)技巧，詳見注釋
<template><div class="container"><h2>{{ musicName }}
</h2><audioref="Ref_audioPlayer"controls:src="audioPathDic[musicName]"@ended="overAudio"@pause="onPause"@play="onPlay"@loadeddata="loadeddata"@timeupdate="timeupdate"></audio><div><el-tag>{{ msg }}
</el-tag></div><div class="listBox"><h3 class="subTitle">原創(chuàng)面板
</h3><div class="myPlayer"><el-slider@mousedown="isDraging = 'true'"@mouseup="isDraging = 'false'"@change="currentRateChange"v-model="currentRate":marks="marks":show-tooltip="false"></el-slider><div class="controlBox"><i @click="move(-5)" class="el-icon-d-arrow-left"></i><itype="primary"v-if="playstatus"@click="pause"class="el-icon-video-pause"></i><i type="primary" v-else @click="play" class="el-icon-video-play"></i><i @click="replay" class="el-icon-refresh-left"></i><i @click="move(5)" class="el-icon-d-arrow-right"></i></div></div><h3 class="subTitle">播放列表
</h3><ul><li@click="changeMusice(key)"class="musicItem"v-for="(value, key) in audioPathDic":key="key">{{ key }}
</li></ul><h3 class="subTitle">獲取信息
</h3><div class="btnBox"><el-button @click="getLength" type="primary" size="small">獲取時(shí)長(zhǎng)
</el-button><el-button @click="getCurrentTime" type="primary" size="small">獲取播放進(jìn)度
</el-button><el-button @click="getPlayStatus" type="primary" size="small">獲取播放狀態(tài)
</el-button></div></div></div>
</template><script>
export default {data() {return {playstatus: false,isDraging: false,marks: {0: "0",100: "100",},currentRate: 0,msg: "待播放",musicName: "祝福你",audioPathDic: {不再猶豫: require("@/pages/music/cantopop/audios/《不再猶豫》Beyond_粵語.mp3"),祝福你: require("@/pages/music/cantopop/audios/《祝福你》群星_粵語.mp3"),},};},methods: {loadeddata() {this.marks["100"] = this.s_to_MS(this.$refs.Ref_audioPlayer.duration);},onPlay() {this.msg = "播放中";this.playstatus = true;},onPause() {this.msg = "已暫停";this.playstatus = false;},overAudio() {this.msg = "播放結(jié)束";this.playstatus = false;},timeupdate(e) {if (!this.isDraging) {this.currentRate = Math.floor((e.target.currentTime / this.$refs.Ref_audioPlayer.duration) * 100);this.marks["0"] = this.s_to_MS(e.target.currentTime);}},s_to_MS(s) {let m;m = Math.floor(s / 60);s = Math.floor(s % 60);m += "";s += "";s = s.length == 1 ? "0" + s : s;if (isNaN(m)) {return "∞";}return m + ":" + s;},changeMusice(newMusicName) {this.musicName = newMusicName;this.$nextTick(() => {this.$refs.Ref_audioPlayer.play();});},play() {this.$refs.Ref_audioPlayer.play();},pause() {this.$refs.Ref_audioPlayer.pause();},replay() {this.$refs.Ref_audioPlayer.currentTime = 0;this.$refs.Ref_audioPlayer.play();},move(val) {this.$refs.Ref_audioPlayer.currentTime += val;this.$refs.Ref_audioPlayer.play();},currentRateChange(newVal) {this.$refs.Ref_audioPlayer.currentTime = Math.round((newVal / 100) * this.$refs.Ref_audioPlayer.duration);this.$refs.Ref_audioPlayer.play();},getPlayStatus() {this.$notify.info({title: "當(dāng)前播放狀態(tài)",message: this.$refs.Ref_audioPlayer.paused ? "已暫停" : "播放中",});},getCurrentTime() {let totalSeconds = this.$refs.Ref_audioPlayer.currentTime;let minites = Math.floor(totalSeconds / 60);let seconds = Math.floor(totalSeconds % 60);this.$notify.info({title: "當(dāng)前進(jìn)度",message: `${minites}分${seconds}秒`,});},getLength() {let totalSeconds = this.$refs.Ref_audioPlayer.duration;let minites = Math.floor(totalSeconds / 60);let seconds = Math.floor(totalSeconds % 60);this.$notify.info({title: "時(shí)長(zhǎng)",message: `${minites}分${seconds}秒`,});},},
};
</script><style scoped>
.btnBox {display: flex;justify-content: space-evenly;flex-wrap: wrap;align-content: space-around;
}
.container {text-align: center;max-width: 500px;margin: auto;
}
.listBox {text-align: left;
}
.subTitle {margin-left: 40px;
}
.musicItem {line-height: 40px;cursor: pointer;
}.myPlayer {border: 4px solid #409eff;border-radius: 10px;padding: 10px 20px;margin: 10px;
}
.controlBox {display: flex;justify-content: space-evenly;font-size: 30px;color: #409eff;
}
* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;
}
</style>
獲取播放狀態(tài)
this.$refs
.Ref_audioPlayer
.paused
獲取音頻總時(shí)長(zhǎng)
單位為秒s
this.$refs
.Ref_audioPlayer
.duration
獲取播放進(jìn)度
單位為秒s
this.$refs
.Ref_audioPlayer
.currentTime
開始播放
this.$refs
.Ref_audioPlayer
.play();
暫停播放
this.$refs
.Ref_audioPlayer
.pause();
改變播放進(jìn)度–前進(jìn)、后退
move(val) {this.$refs
.Ref_audioPlayer
.currentTime
+= val
;this.$refs
.Ref_audioPlayer
.play();},
重頭開始播放
this.$refs
.Ref_audioPlayer
.currentTime
= 0;this.$refs
.Ref_audioPlayer
.play();
audio標(biāo)簽的事件
通過監(jiān)聽事件實(shí)現(xiàn)
play:音頻或視頻文件已經(jīng)就緒可以開始播放時(shí)觸發(fā)
playing:音頻或視頻已開始播放時(shí)觸發(fā)
ended:音頻或視頻文件播放完畢后觸發(fā)
pause:音頻或視頻文件暫停時(shí)觸發(fā)
ratechange:播放速度改變進(jìn)觸發(fā)
seeked:指示定位已結(jié)束時(shí)觸發(fā)
seeking:正在進(jìn)行指示定位時(shí)觸發(fā)
timeupdate:播放位置改變時(shí)觸發(fā)
volumechange:音量改變時(shí)觸發(fā)
waiting:需要緩沖下一幀而停止時(shí)觸發(fā)
loadstart:瀏覽器開始尋找指定的音頻或視頻
progress:瀏覽器正在下載指定的音頻或視頻
durationchange:音頻或視頻的時(shí)長(zhǎng)已改變
loadedmetadata:音頻或視頻的元數(shù)據(jù)已加載
loadeddata:音頻或視頻的當(dāng)前幀已加載，但沒有足夠數(shù)據(jù)播放下一幀
canplay:瀏覽器能夠開始播放指定的音頻或視頻
canplaythrough:音頻或視頻能夠不停頓地一直播放
progress:瀏覽器正在下載指定的音頻或視頻
abort:在音頻或視頻終止加載時(shí)觸發(fā)
error:在音頻或視頻加載發(fā)生錯(cuò)誤時(shí)觸發(fā)
stalled:在瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時(shí)觸發(fā)
suspend:在音頻或視頻數(shù)據(jù)被阻止加載時(shí)觸發(fā)
empted:在發(fā)生故障并且文件突然不可用時(shí)觸發(fā)
play:音頻或視頻文件已經(jīng)就緒可以開始播放時(shí)觸發(fā)
playing:音頻或視頻已開始播放時(shí)觸發(fā)
ended:音頻或視頻文件播放完畢后觸發(fā)
pause:音頻或視頻文件暫停時(shí)觸發(fā)
ratechange:播放速度改變進(jìn)觸發(fā)
seeked:指示定位已結(jié)束時(shí)觸發(fā)
seeking:正在進(jìn)行指示定位時(shí)觸發(fā)
timeupdate:播放位置改變時(shí)觸發(fā)
volumechange:音量改變時(shí)觸發(fā)
waiting:需要緩沖下一幀而停止時(shí)觸發(fā)
語音條
請(qǐng)參考
https://www.jianshu.com/p/11a6101d9656
總結(jié)
以上是生活随笔為你收集整理的vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
