element + vue 写的 音乐播放器 可以控制进度条 暂停播放 声音大小 倍速

播放器 可以控制进度条 暂停播放 声音大小 倍速"/>

element + vue 写的 音乐播放器 可以控制进度条 暂停播放 声音大小 倍速

element + vue 写的音乐播放器 可以控制进度条 暂停播放 声音大小 倍速

下边的播放器我没有隐藏  可以隐藏掉

复制在编辑器里删除多余的代码  

大概样子

音乐播放器操作

<template><div class="box"><div class="header"><div class="h_left"><i class="el-icon-video-play" @click="play(true)" v-if="!isPlay"></i><i class="el-icon-video-pause" @click="play(false)" v-else></i></div><div class="h_right"><div class="progress_box"><el-sliderv-model="currentTime":max="duration"@change="sliderPlay"@input="sliderStop":format-tooltip="(val) => transTime(val)"@mousedown.native="isChange = true"@mouseup.native="isChange = false"></el-slider></div><div class="multimedia_box"><div class="time"><span>{{ transTime(currentTime) }}</span><span> / </span><span>{{ transTime(duration) }}</span></div><div class="operate"><el-dropdowntrigger="click"placement="top"szie="mini"@command="handleSpeed"><span class="el-dropdown-link"><span style="color: #bfbfbf; cursor: pointer">倍速</span></span><el-dropdown-menu slot="dropdown"><el-dropdown-item :command="i" v-for="i in 5" :key="i">{{ i * 0.5 }}倍速</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown trigger="click" placement="top" szie="mini"><span class="el-dropdown-link"><i></i></span><el-dropdown-menu slot="dropdown"><el-sliderv-model="sound"@input="changeSound"verticalheight="100px"></el-slider></el-dropdown-menu></el-dropdown><i></i></div></div></div></div><div class="footer"><audio :src="url" ref="audio" controls></audio></div></div>
</template><script>
export default {props: {url: {type: String,default: ".mp3",},params: {default: "",},},data() {return {isPlay: false, //播放状态duration: 0, //进度条最大值currentTime: 0, //进度条当前值sound: 100, //音量大小timer: "", //定时器isChange: false, //是否正在被拖动};},created() {this.$nextTick(() => {//获取音乐总时长this.getDuration();});},methods: {//   获取总播放时长getDuration() {let audio = this.$refs.audio;audio.oncanplay = () => {this.duration = this.$refs.audio.duration; this.sound = audio.volume * 100;};},// 改变音量changeSound(val) {console.log(val);let audio = this.$refs.audio;audio.volume = val / 100;},//正在被拖动时改变当前播放值sliderStop() {if (this.isChange) {clearInterval(this.timer);let audio = this.$refs.audio;audio.pause();this.isPlay = false;}},//继续播放sliderPlay(value) {let audio = this.$refs.audio;audio.currentTime = value;this.play(true);this.isChange = false;},//播放按钮play(flag = this.isPlay) {clearInterval(this.timer);if (this.duration === 0) return;let audio = this.$refs.audio;if (flag) {audio.play();this.isPlay = true;this.timer = setInterval(() => {console.log(this.transTime(audio.currentTime));if(audio.ended || audio.paused){ //暂停或者结束清除定时器this.isPlay = false,clearInterval(this.timer);}this.currentTime = audio.currentTime;}, 500);} else {audio.pause();this.isPlay = false;}},// 倍速按钮handleSpeed(val) {console.log(val * 0.5);let audio = this.$refs.audio;audio.playbackRate = val * 0.5;},/*** 音频播放时间换算* @param {number} value - 音频当前播放时间，单位秒*/transTime(time) {var duration = parseInt(time);var minute = parseInt(duration / 60);var sec = (duration % 60) + "";var isM0 = ":";if (minute === 0) {minute = "00";} else if (minute < 10) {minute = "0" + minute;}if (sec.length === 1) {sec = "0" + sec;}return minute + isM0 + sec;},},
};
</script><style lang="scss" scoped>
.box {background-color: #f1f3f7;width: 100%;height: 440px;border-radius: 15px;.header {display: flex;width: 100%;height: 60px;background-color: black;border-radius: 15px 15px 0 0;.h_left {width: 15%;i {font-size: 40px;text-align: center;display: block;line-height: 60px;color: white;}}.h_right {width: 85%;.progress_box {width: 95%;height: 50%;}.multimedia_box {width: 95%;height: 50%;display: flex;justify-content: space-between;.time {color: #bfbfbf;}.operate {color: #bfbfbf;font-size: 14px;i {position: relative;top: -2px;vertical-align: middle;display: inline-block;width: 20px;height: 20px;margin-left: 10px;background-image: url("../../../../assets/icons/voice.png");background-size: 100% 100%;}> i:last-child {background-image: url("../../../../assets/icons/download.png");top: -3px;}}}}}
}
</style>

一个声音 一个下载 图标