vue使用H5的audio標(biāo)簽問題

更新時間：2022年12月05日 10:04:23 作者：nao兒

這篇文章主要介紹了vue使用H5的audio標(biāo)簽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用H5的audio標(biāo)簽

template代碼：

<audio ref="audio" :src="audioUrl"></audio>

data里綁定audioUrl為audio的路徑

audioUrl: 'static/audio/notify.wav' // 聲音源

按鈕播放聲音：

click () {
? ? this.$refs.audio.play()
}

vue中自定義audio

一個頁面上創(chuàng)建很多audio標(biāo)簽并且自定義樣式播放。

首先創(chuàng)建可以增刪的播放列表css就不再顯示了

<div class="d_andio_wrap">
          
          <div class="d_audio" v-for="(item,index) in audioList" :key="index">
            <audio id="audioMedia"  :src="item.src" @timeupdate="updateTime" ref='audioMedia' @ended="end"></audio>
            <img v-if="!item.isplay" class="img" src="../../../assets/images/icon_play.png" alt="" @click="playAudio(index)">
            <img v-if="item.isplay" class="img" src="../../../assets/images/icon_pause.png" alt="" @click="pauseAudio(index)">
            <div class="audio_body">
              <div class="audio_title">
                <span>{{item.title}}</span>
              </div>
              <div class="audio_info">
                <span class="audio_live">{{item.play_live | audioTime}}</span>
                <div class="audio_progress"  @mousedown.self="mousedown($event,index)">
                  <div class="audio_progress_line" :style="{width:item.play_live/item.play_time*100+'%'}" @mousedown.self="mousedownP($event,index)"></div>
                  <div class="audio_progress_dot" :style="{left:item.play_live/item.play_time*100+'%'}"  @mousedown.self="drag('audio_progress_dot',index)"></div>
                </div>
                <span class="audio_live">{{item.play_time | audioTime}}</span>
              </div>
            </div>
            <i class="el-icon-error"  @click="deleteAudio(index)"></i>
          </div>
        </div>

data數(shù)據(jù)

        audioList:[
        {
          title:'龍的傳人',
          key:0,
          videoid:'',
          src:"ssssss.mp3",
          play_live:0,
          play_time:'154',
          isplay:false,//是否播放
        },
        {
          title:'龍的傳人',
          key:0,
          videoid:'',
          src:"sssssss.mp3",
          play_live:0,
          play_time:'154',
          isplay:false,//是否播放
        }
      ],

刪除音頻，增加音頻就不再寫了

 //刪除音頻
    deleteAudio(index){
      this.audioList.splice(index, 1);
    },

然后點擊播放、暫停、監(jiān)聽音頻當(dāng)前時間以及播放完畢

//播放音頻
    playAudio(index){
      let _this =this;
      let audioMedia = this.$refs.audioMedia;//獲取所有audio對象
      this.audioList[this.playAudioIndex].isplay = false;//上一個播放的audio圖片換為暫停
      audioMedia[this.playAudioIndex].pause();//上一個播放的audio暫停
      this.audioList[index].isplay = true;//把當(dāng)前audio圖片設(shè)置為播放狀態(tài)
      //當(dāng)前audio延時播放--此處處理是由于updateTime在獲取當(dāng)前播放時長時，會獲取一次上個audio的播放時長，才能獲取到當(dāng)前時長，頁面播放進(jìn)度會跳一下
      setTimeout(()=>{
        audioMedia[index].currentTime = this.audioList[index].play_live;
        audioMedia[index].play();
        _this.playAudioIndex = index;
      },100)
      // console.log(this.audioList[index].play_live)
    },
    //暫停音頻
    pauseAudio(index){
      let audioMedia = this.$refs.audioMedia;
      this.audioList[index].isplay = false;
      audioMedia[index].pause();
    },
    //音頻監(jiān)測當(dāng)前時間
    updateTime(e){
        let _this = this;
        // _this.$set(_this.audioList[_this.playAudioIndex],"play_live",_this.audioList[_this.playAudioIndex].play_live);
        //用秒數(shù)來顯示當(dāng)前播放進(jìn)度
        // console.log(e.target.currentTime)
        let timeDisplay = Math.floor(e.target.currentTime);//獲取實時時間
        _this.$set(_this.audioList[_this.playAudioIndex],"play_live",timeDisplay);
    },
    //音頻監(jiān)測播放完畢
    end(e){
      console.log(e)
      this.audioList[this.playAudioIndex].isplay = false;
    },

實現(xiàn)了播放之后，再處理點擊播放

這里注意的e.clientX offsetLeft e.target.offsetLeft

//點擊的是未拖動過進(jìn)度的進(jìn)度條
    mousedown(e,index){
      let audioMedia = this.$refs.audioMedia;
      //父級
      let fdrag = document.getElementsByClassName("d_andio_wrap")[0];
      //點擊時離左邊框距離  e.clientX點擊的那個點離瀏覽器左邊距  fdrag.offsetLeft父級離瀏覽器距離  e.target.offsetLeft事件源離父級左邊框距離
      let targetLeft = e.clientX-fdrag.offsetLeft-e.target.offsetLeft;
      //獲取事件源的寬度
      let targetWidth = e.target.offsetWidth;
      //根據(jù)百分比轉(zhuǎn)化成音頻想要的秒數(shù)
      let play_live = Math.floor((targetLeft/targetWidth)*this.audioList[index].play_time);

      // console.log(targetLeft,targetWidth);
      this.audioList[index].play_live = play_live;
        
      //判斷播放狀態(tài)時直接跳轉(zhuǎn)播放
      if(!audioMedia[index].paused){
        // console.log('播放')
        audioMedia[index].currentTime = play_live;
      }
      
    },
    //點擊已經(jīng)播放的進(jìn)度條 但是要使用class = audio_progress的寬度以及距左邊的距離
     mousedownP(e,index){
      let audioMedia = this.$refs.audioMedia;
      //父級
      let fdrag = document.getElementsByClassName("d_andio_wrap")[0];
      //進(jìn)度條底色的總長度作為進(jìn)度條總寬度
      let zdrag = document.getElementsByClassName("audio_progress")[0];
      //點擊時離左邊框距離  e.clientX點擊的那個點離瀏覽器左邊距  fdrag.offsetLeft父級離瀏覽器距離  zdrag.offsetLeft事件源離父級左邊框距離
      let targetLeft = e.clientX-fdrag.offsetLeft-zdrag.offsetLeft;
      //獲取事件源的寬度
      let targetWidth = zdrag.offsetWidth;
      //根據(jù)百分比轉(zhuǎn)化成音頻想要的秒數(shù)
      let play_live = Math.floor((targetLeft/targetWidth)*this.audioList[index].play_time);
      // console.log(play_live);
      this.audioList[index].play_live = play_live;
      //判斷播放狀態(tài)時直接跳轉(zhuǎn)播放
      if(!audioMedia[index].paused){
        // console.log('播放')
        audioMedia[index].currentTime = play_live;
      }
    },

拖動進(jìn)度條

 drag(element,index) {
      let elementIndex = index;
      let audioMedia = this.$refs.audioMedia;
      //事件源
      let _this = this;
      let drag = document.getElementsByClassName(element)[index];
      let dragOffsetLeft = drag.offsetLeft;
      //父級容器的寬高 -- 避免在容器外拖拽
      let fdrag = document.getElementsByClassName("audio_progress")[index];
       //獲取事件源的寬度  這里是因為圓點的寬度為drag.offsetWidth  不減去本身寬度不能夠精確地表示出音頻長短  也可以在moveX 加上drag.offsetWidth
      let fdragWidth = fdrag.offsetWidth - drag.offsetWidth;
      let diffX;//fdrag離瀏覽器左邊的固定距離
      let diffY;
      let play_live;
      drag.onmousedown = function(event) {
        let e = event || window.event;
        //e.clientX 鼠標(biāo)離瀏覽器邊框的距離  drag.offsetLeft鼠標(biāo)離事件源左邊框距離
        e.preventDefault();
        diffX = e.clientX - drag.offsetLeft;
        if (typeof drag.setCapture !== "undefined") {
          drag.setCapture();
        }
         document.onmousemove = function(event) {
          let e = event || window.event;
          let moveX = e.clientX - diffX;//移動時的距離
          if (moveX <= 0) {
            moveX = 0;
          } else if (moveX > fdrag.offsetWidth - drag.offsetWidth) {
            moveX = fdrag.offsetWidth - drag.offsetWidth;
          }
          
          play_live = Math.floor((moveX/fdragWidth)*_this.audioList[elementIndex].play_time);
          _this.audioList[elementIndex].play_live = play_live;
          
        };
        document.onmouseup = function(event) {
          
          this.onmousemove = null;
          this.onmouseup = null;
          if (typeof drag.setCapture !== "undefined") {
            drag.setCapture();
          }
          //判斷播放狀態(tài)時直接跳轉(zhuǎn)播放
            if(!audioMedia[elementIndex].paused){
              // console.log('播放')
              audioMedia[elementIndex].currentTime = play_live;
            }
        };
      };
      
    },

小結(jié)：同一個頁面如果只創(chuàng)建一個audio時，也可以實現(xiàn)切換src進(jìn)行播放，但是在跳轉(zhuǎn)時間點播放時失效，可能的原因是在切換src后，音頻沒有緩存，導(dǎo)致從0開始播放了。

在點擊跳轉(zhuǎn)時，點擊進(jìn)度條上面時要注意事件源的不同，從而導(dǎo)致獲取的距瀏覽器距離已經(jīng)距左邊框距離的錯誤。