Vue3自定義封裝音頻播放組件（帶拖拽進度條）

描述

該款自定義組件可作為音頻、視頻播放的進度條，用于控制音頻、視頻的播放進度、暫停開始、拖拽進度條拓展性極高。

實現效果

具體效果可以根據自定義內容進行位置調整

項目需求

1. 有播放暫停按鈕
2. 進度條可以跟隨播放絲滑更新
3. 有當前播放時間和總時間可以根據播放更新當前時間
4. 可以點擊進度條的某一處跳轉到指定處進行播放

技術棧

vue3+elementUI || elementPlus || vant

功能實現

  <template><div class="audio_wrap_content" :style="[{ backgroundColor: bgColor }]"><audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc"@loadedmetadata="onLoadedmetadata" @ended="handleEnd"><source :src="audioSrc" /></audio><div class="cudio_control_content"><img @click="startPlayOrPause" class="state_img" :src="audio.playing ? stopImg : playImg" alt="" /><div class="slider"><span>{{ formattedCurrentTime }}</span><div><el-slider v-model="sliderTime" :show-tooltip="false" @change="onChange"></el-slider></div><span>{{ formattedMaxTime }}</span></div></div></div>
</template><script>
function formatTime(second) {let m = parseInt(second / 60);let s = parseInt(second % 60);let formatTime = "";if (second == 0) {return "0'00''";}if (m == 0) {if (s >= 10) {formatTime = "0'" + s + "''";} else {formatTime = "0'0" + s + "''";}} else {if (s >= 10) {formatTime = m + "'" + s + "''";} else {formatTime = m + "'0" + s + "''";}}return formatTime;
}
export default {name: "AudioPlay",props: {bgColor: {type: String,default: "rgba(255,255,255,0.15)",},audioSrc: {type: String,default: require("@/assets/music/offer_des.mp3"),},themeColor: {type: String,default: "#ffb900",},},data() {return {value1: 1,playImg: require("@/assets/images/play.png"),stopImg: require("@/assets/images/stop.png"),sliderTime: 0,audio: {maxTime: 0,currentTime: 0,playing: false,},};},computed: {formattedCurrentTime() {return formatTime(this.audio.currentTime);},formattedMaxTime() {return formatTime(this.audio.maxTime);},},methods: {play() {console.log("觸發 播放");this.$refs.audio.play();},pause() {this.$refs.audio.pause();},playFunc() {this.audio.playing = true;},pauseFunc() {this.audio.playing = false;},handleEnd() {this.sliderTime = 0;this.audio.playing = false;this.audio.currentTime = 0;},timeupdateFunc(res) {this.audio.currentTime = res.target.currentTime;this.sliderTime = parseInt((this.audio.currentTime / this.audio.maxTime) * 100);},onLoadedmetadata(res) {console.log(111, "首次加載完成");this.audio.maxTime = parseInt(res.target.duration);},startPlayOrPause() {console.log("bof", "暫停-播放");this.audio.playing ? this.pause() : this.play();},onChange(value) {console.log(value, "values");this.$refs.audio.currentTime = parseInt((value / 100) * this.audio.maxTime);},},
};
</script><style scoped lang="less">
.audio_wrap_content {height: 26px;border-radius: 15px;
}.cudio_control_content {margin: 0 auto;width: 90%;height: 100%;display: flex;.slider {flex: 1;width: 100%;display: flex;align-items: center;}.slider div {flex: 1;}.slider span {margin: 0 15px;font-size: 10px;color: rgba(34, 34, 34, 0.3);}justify-content: space-between;align-items: center;.state_img {width: 18px;height: 18px;margin-right: 15px;}.custom-button {width: 8px;background-color: #ffb900;height: 8px;border-radius: 8px;}.state_time {font-family: "BIGJOHN";font-size: 10px;color: rgba(34, 34, 34, 0.3);margin-right: 3px;margin-left: 3px;}}
</style>