vue3 自定义 audio音频播放效果

Posted 2021-10-24 嘴巴嘟嘟

在vue3中使用自定义audio

界面的audio标签中src或缺的是后端传来的mp3文件，只需要隐藏，然后自定义样式并且绑定事件

setup(){
   audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
        minTime: 0,
        step: 0.1,
      },
      lefticon: "",
      play: false, // 播放暂停按钮
      sliderTime:"",
      customColor:"#3abb94"
}


   // 将整数转换成 时：分：秒的格式
    const realFormatSecond=(second) =>{
      var secondType = typeof second;
    
      if (secondType === "number" || secondType === "string") {
        second = parseInt(second);
    
        var hours = Math.floor(second / 3600);
        second = second - hours * 3600;
        var mimute = Math.floor(second / 60);
        second = second - mimute * 60;
        // hours + ':' +
        return ("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2);
      } else {
        return "0:00:00";
      }
    }
    // 开始播放
    const play = ()=>{
      audioMedia.value.play()
    }
    // 暂停播放
    const onPause =()=>{
      state.audio.playing = false;
      audioMedia.value.pause();
      let startTime = parseInt(state.audio.currentTime);
      console.log(
        "audio.playing",
        state.audio.playing,
        "maxTime",
        state.audio.maxTime
      );
      state.play = false;
      if (startTime == state.audio.maxTime) {
        state.sliderTime = 0;
        state.audio.currentTime = "00:00";

      }
    }
    // 进度条
    const onTimeupdate =(res)=>{
      state.audio.currentTime = res.target.currentTime;
      console.log(state.audio.currentTime)
      state.sliderTime = parseInt(
        (state.audio.currentTime / state.audio.maxTime) * 100
      );
      // state.sliderTime= formatProcessToolTip(state.sliderTime)
    }
    // 进度条格式化toolTip
   const  formatProcessToolTip=(index) =>{
      index = parseInt((state.audio.maxTime / 100) * index);
      return "进度条: " + realFormatSecond(index);
    }

    const onLoadedmetadata=(res)=> {
      state.audio.maxTime = parseInt(res.target.duration);
    }