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>