自定义audio

play()播放事件
pause()暂停事件
currentTime获取播放时长
duration音频总时长

<template>
  <div class="container_box" id="audio_detail">
    <div style="width: 70px; color: #4880FF;">文章音频</div>
    <van-slider style="width: calc(100% - 175px);" v-model="audioTime"
      @change="onChange" bar-height="4px" :disabled="disabled"/>
    <div style="width: 40px; color: #999999;">{{audioAllTime}}</div>

    <!-- <audio :src="url" ref="audioPlayer"></audio> -->
    <audio :src="url" ref="audioPlayer"></audio>

    <van-icon v-if="!isPlay" @click="playAudio" name="play-circle"
      style="margin-left: 10px;"/>
    <van-icon v-if="isPlay" @click="pauseAudio" name="pause-circle"
      style=" margin-left: 10px;"/>

  </div>
</template>
<script type="text/javascript">
let audioInterval;
export default {
  props: {
    url: {
      type: String,
      default: ''
    },
    width: {
      type: Number
    }
  },
  data() {
    return {
      audioCurrentTime: "",
      audioAllTime: "--:--",
      audioTime: 0,
      isPlay: false,
      disabled: true
    };
  },
  watch: {
    url(newV, oldV) {
      this.disabled = true;
      this.pauseAudio();
      this.audioAllTime = "--:--";
      this.audioTime = 0;
      this.audioCurrentTime = "--:--";
    },
  },
  mounted() {
    //监听audio是否加载完毕
    let audioPlayer = this.$refs.audioPlayer;
    audioPlayer.addEventListener("canplay", _=> {
      this.disabled = false;
      this.getAudioTime();
    });
  },
  methods: {
    //设置定时检测
    setAudioInterval() {
      let audioInterval = setInterval(_=> {

        let audioPlayer = this.$refs.audioPlayer;
        if (audioPlayer.ended) {
          //播放结束后重置数据
          clearInterval(audioInterval);

          this.audioTime = 0;
          audioPlayer.currentTime = 0;
          this.audioCurrentTime = "00:00";
          this.isPlay = false;
        }
        if(!this.isPlay) { clearInterval(audioInterval); return; }

        this.getAudioTime();
      }, 1000);
    },
    //播放
    playAudio() {
      if(this.disabled) { return; }
      this.$refs.audioPlayer.play();
      this.isPlay = true;
      this.setAudioInterval();
    },
    //暂停
    pauseAudio() {
      this.$refs.audioPlayer.pause();
      this.isPlay = false;
    },
    //获取播放时间
    getAudioTime() {
      let audioPlayer = this.$refs.audioPlayer;
      //展示用
      this.audioAllTime = realFormatSecond(audioPlayer.duration);
      this.audioAllDuration = audioPlayer.duration;
      this.audioCurrentTime = realFormatSecond(audioPlayer.currentTime);
      //计算当前进度百分比
      this.audioTime =Number(((audioPlayer.currentTime * 100) / audioPlayer.duration).toFixed(3));
    },
    //滑动进度条
    onChange(value) {
      // 设置播放时间
      let audioPlayer = this.$refs.audioPlayer;
      this.audioCurrentTime = realFormatSecond((this.audioAllDuration * (value / 1)) / 100);
      audioPlayer.currentTime = parseInt((this.audioAllDuration * (value / 1)) / 100);
    },
    //设置倍速播放
    changeMultiple() {
      if (this.multipleIndex < 3) {
        this.multipleIndex++;
      } else {
        this.multipleIndex = 0;
      }
      let audioPlayer = this.$refs.audioPlayer;
      audioPlayer.playbackRate = this.multipleArray[this.multipleIndex];
    }
  }
};
//格式化秒
function realFormatSecond(second) {
  var secondType = typeof second;
  if (secondType === "number" || secondType === "string") {
    second = parseInt(second);
    second = second;
    var mimute = Math.floor(second / 60);
    second = second - mimute * 60;
    return ("0" + mimute).slice(-2) + ":" + ("0" + second).slice(-2);
  } else {
    return "00:00";
  }
}
</script>

<style scoped>
/* 开始暂停 */
.aduioStart {
  background: url("../../assets/img/pageRisk/start.png") no-repeat;
  background-size: 100% 100%;
  width: 17px;
  height: 17px;
  margin: 0 10px 0 5px;
}
.aduioSuspend {
  background: url("../../assets/img/pageRisk/suspend.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 10px 0 5px;
  width: 17px;
  height: 17px;
}
/* 修改 */
.container_box /deep/ .van-slider__button {
  width: 6px;
  height: 6px;
}
.container_box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  /* line-height: 25px; */
  width: 100%;
  align-items: center;
  display: flex;
}
.container_box > p {
  width: 55px;
  height: 7px;
  font-size: 7px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #4880FF;
  line-height: 4px;
  margin-right: 5px;
}
.audioBox_right {
  width: 15px;
  height: 4px;
  font-size: 6px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #4880FF;
  line-height: 4px;
}
img{
  width: 16px;
  height: 16px;
  margin: 0 5px;
}
.van-icon {
  font-size: .4rem;
  color: #4880FF;
}
</style>

最后

以上就是满意冬瓜为你收集整理的自定义audio的全部内容，希望文章能够帮你解决自定义audio所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。