因為原生audio 播放器太丑了 重新整理 百度綜合完成了播放器，
基于element ui 組件書寫的 需要的自取

<template><div class="audio-player"><!-- :src="require(`${list[index].url}`) closeIcon --><audio controls ref="audio-player"></audio><div class="audio-mock-player" v-if="isShowAudioPlayer"><img :src="closeIcon" class="closeicon" @click="closeAudioPlay" /><!-- 上一首 --><img@click="musicPlay('pre')"src="./asset/leftwhite.png"class="preicon"/><!-- "暫停" : "播放" --><img@click="musicPlay('play')"class="play-sty":src="play ? plozeIcon : playIcon"/><!-- 下一首 --><img @click="musicPlay('next')" src="./asset/next.png" class="preicon" /><div class="right-menu"><div class="song-name">{{ list[index].name }}</div><div class="bottom"><!-- 播放進度條 --><el-sliderclass="progress"v-model="sliderVal":format-tooltip="formatTooltip":min="sliderMin":max="sliderMax"@change="spliderSelect"/><span class="current">{{ currentTime }}</span><span class="duration">/{{ duration }}</span><div class="vulumn" @click="changeVolumns"><!-- <img :src="require('./asset/vulumn.png')" alt=""/> --><!-- 有時候我們在對于一些hover定位元素，當離開時候就沒了，這個時候可以使用ctrl+shift+c的快捷鍵來獲取。 --><el-popoverplacement="top-start"trigger="hover"popper-class="poppervulumn-class"><el-sliderclass="vulumn-progress"verticalheight="100px":step="0.1"v-model="sliderValVolumn":format-tooltip="formatTooltipVolumn":min="0":max="1"@change="spliderSelectVolumn"/><imgslot="reference":src="sliderValVolumn ? vulumnIcon : mutedIcon"alt=""style="width: 18.5px; height: 15px"/></el-popover></div></div></div></div></div> </template><script> export default {props: {// 顯示隱藏isShowAudioPlayer: {default: true,},// 播放列表list: {default: function () {return [//數據格式{id: 1,name: "美人魚",url: "./asset/1.mp3",cover: "ChenYou",singer: "林俊杰",},{id: 2,name: "起風了",url: "./asset/2.mp3",cover: "ChenYou",singer: "林俊杰",},];},},// 播放索引// index},data() {return {playIcon: require("./asset/play.png"),plozeIcon: require("./asset/ploze.png"),vulumnIcon: require("./asset/vulumn.png"),mutedIcon: require("./asset/muted3.png"),closeIcon: require("./asset/close.png"),box: undefined,index: 0, // 當前播放的音樂素質索引play: false, // 播放狀態，true為正在播放sliderVal: 0, // 這個對接當前時長。sliderMin: 0,sliderMax: 0, // 這個對接總時長。sliderValVolumn: 0.5, // 音量copySliderValVolumn: 0.5,duration: undefined, // 音樂總時長currentTime: undefined, //當前播放時長};},mounted() {this.init();},methods: {init() {this.box = this.$refs["audio-player"];this.box.src = require(`${this.list[this.index].url}`);console.log(this.box, "音頻播放器DOM");const that = this;// this.duration = this.formatTime(this.box.duration)// 綁定三個觸發方法// 當時長有變化時觸發，由"NaN"變為實際時長也算this.box.ondurationchange = function () {console.log("時長發生了變化");console.log(that.box.duration);// that.// that.duration = that.formatTime(that.box.duration)that.sliderMax = Math.floor(that.box.duration);that.updateTime();};// 當前數據可用是觸發this.box.oncanplay = function () {console.log("已經可以播放了");};// 播放位置發送改變時觸發。this.box.ontimeupdate = function () {console.log("播放位置發送了變動");that.updateTime();};// 音頻播放完畢this.box.onended = function () {console.log("播放完畢，謝謝收聽");};// 音頻播放完畢this.box.onerror = function () {console.log("加載出錯！");};},changeVolumns() {// 靜音切換if (this.sliderValVolumn > 0) {this.sliderValVolumn = 0;} else {this.sliderValVolumn = this.copySliderValVolumn;}},// 播放musicPlay(flag) {switch (flag) {case "pre":if (this.list[this.index - 1]) {this.box.src = this.list[this.index - 1].url;this.index -= 1;} else {this.box.src = this.list[this.list.length - 1].url;this.index = this.list.length - 1;}this.init();if (this.play) {this.box.play();} else {this.box.pause();}break;case "play":this.play = !this.play;if (this.play) {this.box.play();} else {this.box.pause();}break;case "next":if (this.list[this.index + 1]) {this.box.src = this.list[this.index + 1].url;this.index += 1;} else {this.box.src = this.list[0].url;this.index = 0;}this.init();if (this.play) {this.box.play();} else {this.box.pause();}break;}},formatTooltip(val) {// 格式化毫秒數，由于組件提示為純數字，所以這里需要將數字轉化為我們所需要的的格式，string類型的。'03:45',const time = this.formatTime(val);return `${time.min}:${time.sec}`;},// 音量顯示100%formatTooltipVolumn(val) {return val * 100 + "%";},spliderSelectVolumn() {this.box.volume = this.sliderValVolumn;// 備份音量this.copySliderValVolumn = this.sliderValVolumn;},updateTime() {const total = this.formatTime(this.box.duration);const current = this.formatTime(this.box.currentTime);this.duration = `${total.min}:${total.sec}`;this.currentTime = `${current.min}:${current.sec}`;// 值為xx.xxxxx 需要取整this.sliderVal = Math.floor(this.box.currentTime);},formatTime(time) {// 格式化毫秒，返回String型分秒對象if (!time) return { min: "00", sec: "00" };return {min: Math.floor(time / 60).toString().padStart(2, "0"),sec: Math.floor(time % 60).toString().padStart(2, "0"),};},closeAudioPlay() {this.isShowAudioPlayer = false;},spliderSelect() {// 滑塊松動后觸發。更新當前時長，// 時長發生變動會init里的方法進行更新數據this.box.currentTime = this.sliderVal;},}, }; </script><style lang='scss'> .poppervulumn-class {min-width: 20px !important;padding: 12px 5px !important; } .audio-player {.audio-mock-player {position: relative;width: 580px;padding: 20px;background: rgba(34, 34, 34, 0.8);border: 1px solid rgba(34, 34, 34, 1);border-radius: 8px;display: flex;align-items: center;.play-sty {margin: 0 16px;width: 52px;height: 52px;}.preicon {width: 32px;height: 32px;}.closeicon {position: absolute;right: -10px;top: -10px;width: 20px;height: 20px;}.right-menu {margin-left: 40px;flex: 1;.bottom {display: flex;align-items: center;.progress {flex: 1;}.current {font-family: PingFangSC-Regular;font-size: 12px;color: #ffffff;text-align: left;font-weight: 400;margin-left: 12px;}.duration {opacity: 0.6;font-family: PingFangSC-Regular;font-size: 12px;color: #ffffff;text-align: left;font-weight: 400;margin-right: 16px;}.vulumn {position: relative;img {width: 18.5px;height: 15px;}.vulumn-progress {position: absolute;top: -73px;left: -12px;}}}.song-name {height: 25px;font-family: PingFangSC-Regular;font-size: 18px;color: #ffffff;text-align: left;font-weight: 400;margin-bottom: 15px;}}} } </style>

總結

以上是生活随笔為你收集整理的vue音频播放器组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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