vue2播放音频组件mp3

贴代码直接使用，配合了el-slider组件完成

效果图：

 

　　父组件

data(){
  return{
        queryParams{
                visitTapesList:[{url:'xxxxxx'},{url:'xxxxxx'},{url:'xxxxxx'}]
            }
    }      
}

<Audio
              v-for="(item,index) in queryParams.visitTapesList"
              :key="index"
              :audioObj="item"
              style="display: inline-block;margin-right:20px"
            ></Audio>

 

　　子组件

<template>
  <div>
    <audio
      controls
      ref="audio"
      class="audio"
      @timeupdate="updateTime"
      @durationchange="shichang"
      hidden="true"
    >
      <source :src="ausc" />
    </audio>
    <div class="audio-box">
      <div class="subassembly">
        <div
          class="control"
          @click="palyAuto"
          :style="{backgroundImage: 'url(' + (coverImgUrl ?    paused:play) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}"
        ></div>
        <div class="content">
          <div class="aduion-name">{{ auname }}</div>
          <div class="aduion-tiem">
            <el-slider
              class="aduion-slider"
              v-model="prsValue"
              :show-tooltip="false"
              @change="changeLong"
              @mousedown.native="progressState = true"
              @mouseup.native="progressState = false"
            ></el-slider>
            {{ totaltime }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    audioObj: {
      type: Object
    }
  },
  data() {
    return {
      paused: require("@/assets/audio/paused.png"),
      play: require("@/assets/audio/play.png"),
      coverImgUrl: false, //暂停还是播放
      prsValue: 0, //播放进度
      // slider是否处于拖动状态 解决鼠标拖拽slider滑块滑动到指定位置无效
      progressState: false,
      totaltime: 0,
      musicAny: {},
      ausc: "",
      auname: ""
    };
  },
  watch: {
    isAudio(newV, oldV) {
      console.log(newV, oldV, "新旧值");
    }
  },
  computed: {
    isAudio() {
      this.ausc = this.audioObj.url;
      this.auname = this.audioObj.url.substring(
        this.audioObj.url.lastIndexOf("/") + 1
      );
      console.log(this.audioObj, this.ausc, "音频");
      return this.audioObj;
    }
  },
  methods: {
    // 原生当前播放进度
    updateTime(e) {
      //解决拖放回滚问题
      if (!this.progressState) {
        //获取进度进行计算
        this.currenttime = this.s_to_hs(parseInt(e.target.currentTime));
        this.suanshu();
      }
    },
    // 计算音乐进度
    suanshu() {
      let length = (this.musicAny.currentTime / this.musicAny.duration) * 100;
      this.prsValue = length;
      if (this.prsValue == 100) {
        this.coverImgUrl = false;
      }
    },
    //原生获取时长
    shichang(e) {
      this.totaltime = this.s_to_hs(parseInt(e.target.duration));
    },
    // 自定义组件播放暂停
    palyAuto() {
      this.coverImgUrl = !this.coverImgUrl;
      if (this.coverImgUrl) {
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
    },
    // 自定义组拖拽音乐进度
    changeLong(e) {
      console.log(e, "+++++++++++");
      this.$refs.audio.currentTime = Math.round(
        (e / 100) * this.musicAny.duration
      );
      console.log(this.$refs.audio.currentTime, "进度——————————————————————");
    },
    //解决拖放回滚问题
    changeProgressState(e) {
      this.progressState = false;
    },
    // 秒数转换分+秒
    s_to_hs(s) {
      var h;
      h = Math.floor(s / 60);
      s = s % 60;
      h += "";
      s += "";
      h = h.length == 1 ? "0" + h : h;
      s = s.length == 1 ? "0" + s : s;
      if (isNaN(h)) {
        return "&infin;";
      }
      return h + ":" + s;
    }
  },
  created() {},
  mounted() {
    this.musicAny = this.$refs.audio;
  }
};
</script>
<style lang="scss" scoped>
.audio-box {
  width: 351px;
  height: 62px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  position: relative;
  .audio {
    position: absolute;
    z-index: 0;
  }
  .subassembly {
    position: absolute;
    z-index: 10;
    display: flex;
    height: 100%;
    align-items: center;
    width: 100%;
    .control {
      width: 40px;
      height: 40px;
      cursor: pointer;
      margin: auto 20px;
    }
    .content {
      flex: 1;
      height: 100%;
      margin-right: 20px;
      line-height: normal;
      padding: 11.5px 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .aduion-name {
        display: inline;
      }
      .aduion-tiem {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .aduion-slider {
          // height: 3px !important;
          width: 90%;
          margin-right: 4.33px;
        }
      }
    }
  }
}

::v-deep .el-slider__bar {
  background-color: #666666;
}
</style>