audio 自定义UI样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了audio 自定义UI样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

audio 自定义UI样式

<template>
  <div class="audio-container">
    <audio :src="audiourl" ref="audioRef" @timeupdate="updateProgress" muted></audio>
    <div class="trumpet" @click="playAudio()">
        <img src="/img/btn-trumpet.png" class="labaPic" v-show="audioPlay" >
        <img src="/img/btn-mute.png" class="labaPic" v-show="!audioPlay">
    </div>
    <div class="slider-runnable-background">
      <div class="slider-runnable">
          <input type="range" :value=sliderValue ref="silderAudio" :style="sliderStyle" @change="aduioChange">
      </div>
      <div class="timer">
        {{audioStart}}
      </div>
    </div>

  </div>

</template>

<script>

export default {
  name: "audioPlayerSelf",
  props:{
    audiourl: {
      type: String,
      default: "/static/mp3/语音待添加.mp3"
    }
  },
  data(){
    return {
      audioPlay: false,
      audioStart: '00:00',
      audioDuration: '00:00',
      sound: false,
      sliderValue: 0,
      sliderStyle:{
       backgroundSize: '0% 100%'
      }
    }
  },
  mounted() {
    this.$refs.audioRef.volume = 1; // 获取audio元素
    this.updateTimeAudio();
    this.fetch();
    // 修改初始 值为null 的bug
    this.sliderValue=0
  },
  created() {

  },
  methods:{
    fetch() {
      let that = this
      var myVid = this.$refs.audioRef
      myVid.loop = false
      if (myVid != null) {
        myVid.oncanplay = function () {
          that.audioDuration = that.transTime(myVid.duration) // 计算音频时长
        }
        myVid.volume = 1 // 设置音量100%
      }
    },

    aduioChange(){
      let silder = this.$refs.silderAudio
      let curVal = parseFloat(silder.value);
      this.sliderValue = curVal
      this.sliderStyle = {
        backgroundSize: `${curVal}%, 100%`
      }
      let audio = this.$refs.audioRef
      audio.currentTime = audio.duration * curVal /100
      audio.play()
      this.audioPlay=true
    },
  
    // 更新进度条与当前播放时间
    updateProgress(e) {
      var value = e.target.currentTime / e.target.duration
      if (this.$refs.silderAudio) {
        this.sliderValue = value * 100
        if (e.target.currentTime === e.target.duration) {
      
          this.audioPlay = false
        }
      } else {
  
        this.audioPlay = false
      }
      this.audioStart = this.transTime(this.$refs.audioRef.currentTime)
    },

    // 播放暂停控制
    playAudio() {
      let recordAudio = this.$refs.audioRef // 获取audio元素

      if (this.audioPlay) {
        recordAudio.pause()
        this.audioPlay = false
      } else {
        recordAudio.play()
        this.audioPlay = true
      }
    },
    // 暂停语音
    YuYinPause(){
      let recordAudio = this.$refs.audioRef // 获取audio元素
      if(recordAudio.playing){
        recordAudio.pause()
        this.audioPlay = false
      }
    },
    /**
     * 音频播放时间换算
     * @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
    },
  },
  watch:{
    sliderValue(){
      this.sliderStyle = {
        backgroundSize: `${this.sliderValue}%, 100%`
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.audio-container{
  display: flex;
  justify-content: space-between;

  .labaPic{
  width: 62px;
  height: 62px;
  }
}

.slider-runnable-background{

  width: 629px;
  height: 62px;
  background-color: #dddede;
  border-radius: 100px;
  margin-left: 20px;

  display: flex;
  align-items: center;


  .slider-runnable{
    display: flex;
    margin-left: 8px;
  }

  .timer{
    margin-left: 10px;
    font-size: 16px;
  }
}

input[type="range"] {
  width: 495px;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(#727272, #727272);
  background-repeat: no-repeat;
  background-color: white;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #666;
}
</style>