相關技巧，詳見注釋

<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">原創面板</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">獲取時長</el-button><el-button @click="getCurrentTime" type="primary" size="small">獲取播放進度</el-button><el-button @click="getPlayStatus" type="primary" size="small">獲取播放狀態</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: {// 監聽audio標簽的音頻加載完成事件loadeddata() {// 需等音頻加載完成，才能獲取到音頻的時長this.marks["100"] = this.s_to_MS(this.$refs.Ref_audioPlayer.duration);},// 監聽audio標簽的播放事件onPlay() {this.msg = "播放中";this.playstatus = true;},// 監聽audio標簽的暫停事件onPause() {this.msg = "已暫停";this.playstatus = false;},// 監聽audio標簽的停止播放事件overAudio() {this.msg = "播放結束";this.playstatus = false;},// 監聽audio標簽的播放進度改變事件timeupdate(e) {// 使用this.isDraging來控制，當拖拽進度條的過程中，停止對進度的更新——用于解決bug:拖動進度條自動回彈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 "&infin;";}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: "當前播放狀態",message: this.$refs.Ref_audioPlayer.paused ? "已暫停" : "播放中",});},// 獲取播放進度getCurrentTime() {// 已播放時長（單位秒s）let totalSeconds = this.$refs.Ref_audioPlayer.currentTime;// 分鐘數let minites = Math.floor(totalSeconds / 60);// 秒數let seconds = Math.floor(totalSeconds % 60);this.$notify.info({title: "當前進度",message: `${minites}分${seconds}秒`,});},// 獲取音頻時長getLength() {// 時長（單位秒s）let totalSeconds = this.$refs.Ref_audioPlayer.duration;// 分鐘數let minites = Math.floor(totalSeconds / 60);// 秒數let seconds = Math.floor(totalSeconds % 60);this.$notify.info({title: "時長",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>

獲取播放狀態

this.$refs.Ref_audioPlayer.paused

• true 為暫停
• false 為播放

獲取音頻總時長

單位為秒s

this.$refs.Ref_audioPlayer.duration

獲取播放進度

單位為秒s

this.$refs.Ref_audioPlayer.currentTime

開始播放

this.$refs.Ref_audioPlayer.play();

暫停播放

this.$refs.Ref_audioPlayer.pause();

改變播放進度–前進、后退

// 原創面板——前進、后退——改變當前播放位置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標簽的事件

通過監聽事件實現

play:音頻或視頻文件已經就緒可以開始播放時觸發
playing:音頻或視頻已開始播放時觸發
ended:音頻或視頻文件播放完畢后觸發
pause:音頻或視頻文件暫停時觸發
ratechange:播放速度改變進觸發
seeked:指示定位已結束時觸發
seeking:正在進行指示定位時觸發
timeupdate:播放位置改變時觸發
volumechange:音量改變時觸發
waiting:需要緩沖下一幀而停止時觸發
loadstart:瀏覽器開始尋找指定的音頻或視頻
progress:瀏覽器正在下載指定的音頻或視頻
durationchange:音頻或視頻的時長已改變
loadedmetadata:音頻或視頻的元數據已加載
loadeddata:音頻或視頻的當前幀已加載，但沒有足夠數據播放下一幀
canplay:瀏覽器能夠開始播放指定的音頻或視頻
canplaythrough:音頻或視頻能夠不停頓地一直播放
progress:瀏覽器正在下載指定的音頻或視頻
abort:在音頻或視頻終止加載時觸發
error:在音頻或視頻加載發生錯誤時觸發
stalled:在瀏覽器嘗試獲取媒體數據，但數據不可用時觸發
suspend:在音頻或視頻數據被阻止加載時觸發
empted:在發生故障并且文件突然不可用時觸發
play:音頻或視頻文件已經就緒可以開始播放時觸發
playing:音頻或視頻已開始播放時觸發
ended:音頻或視頻文件播放完畢后觸發
pause:音頻或視頻文件暫停時觸發
ratechange:播放速度改變進觸發
seeked:指示定位已結束時觸發
seeking:正在進行指示定位時觸發
timeupdate:播放位置改變時觸發
volumechange:音量改變時觸發
waiting:需要緩沖下一幀而停止時觸發

語音條

請參考
https://www.jianshu.com/p/11a6101d9656

總結

以上是生活随笔為你收集整理的vue + element UI【实战】音乐播放器/语音条（内含音频的加载、控制，事件监听，信息获取，手机网页阴影的去除等技巧）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。