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-slider
            v-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-dropdown
              trigger="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-slider
                  v-model="sound"
                  @input="changeSound"
                  vertical
                  height="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: "http://m10.music.126.net/20220602105434/92e63120017899c61e3e7ef80585d64d/ymusic/f7be/e8f1/7152/b3a08d8f37e441b3f8fff9877ba0c7d5.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>

一个声音 一个下载 图标