快捷導(dǎo)航

JS指定音頻audio在某個時間點進行播放

更新時間：2020年11月28日 08:56:15 作者：追逐時光者

這篇文章主要介紹了JS指定音頻audio在某個時間點進行播放,獲取當(dāng)前音頻audio的長度,音頻時長格式轉(zhuǎn)化,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言：

　　今天接到一個需求，需要獲取某個.mp3音頻文件的時間長度和指定音頻audio在某個時間點進行播放（比如說這個視頻有4分鐘，我要讓它默認從第2秒的時候開始播放），這里當(dāng)然想到了H5中的audio元素，當(dāng)然我們平時看這個標(biāo)簽上顯示的音頻時間格式是時:分:秒的格式的因此需要涉及到秒和時間格式的轉(zhuǎn)化。因為剛開始對這塊十分的陌生，最后通過查閱了網(wǎng)上的一些資料，最終完美的把這些功能點做好了。在這里分享一下，希望能夠幫助有需要的小伙伴。

獲取音頻時長：

function getAudioDuration(src) {
      let audio = document.createElement('audio') //生成一個audio元素 
      audio.src = src //音樂的路徑 
      audio.addEventListener("canplay", function () {
        console.log("音頻長度=>>>：", parseInt(audio.duration) + '秒', '音頻時分秒格式：', timeToMinute(parseInt(audio
          .duration)));
      });
    }

指定音頻audio在某個時間點進行播放：

指定默認從第20s開始播放效果圖：

// 音頻加載完成后的一系列操作
    function duration() {
      var myVid = document.getElementById("videoDiv");
      console.log("duration ", myVid);
      if (myVid != null) {
        var duration;
        myVid.load(); //方法重新加載音頻/視頻元素
        // https://www.w3school.com.cn/tags/av_prop_currenttime.asp
        // currentTime 屬性設(shè)置或返回音頻/視頻播放的當(dāng)前位置（以秒計）。
        // 當(dāng)設(shè)置該屬性時，播放會跳躍到指定的位置。
        myVid.currentTime = 20; //默認指定音頻默認從20s的時候開始播放（默認時間為s）
        myVid.oncanplay = function () {
          //duration 屬性返回當(dāng)前音頻的長度，以秒計。
          console.log("音頻時間", myVid.duration);
          console.log("時分秒格式轉(zhuǎn)化：", timeToMinute(myVid.duration))
        }
      }
    }

秒轉(zhuǎn)換時分鐘00:00:00時分秒格式：

function timeToMinute(times) {
      var t;
      if (times > -1) {
        var hour = Math.floor(times / 3600);
        var min = Math.floor(times / 60) % 60;
        var sec = times % 60;
        if (hour < 10) {
          t = '0' + hour + ":";
        } else {
          t = hour + ":";
        }

        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(2);
      }
      t = t.substring(0, t.length - 3);
      return t;
    }

00:00:00時分秒格式轉(zhuǎn)化為秒：

function timeEvent(e) {
      let time = e;
      var len = time.split(':');
      if (len.length == 3) {
        var hour = time.split(':')[0];
        var min = time.split(':')[1];
        var sec = time.split(':')[2];
        return Number(hour * 3600) + Number(min * 60) + Number(sec);
      }
      if (len.length == 2) {
        var min = time.split(':')[0];
        var sec = time.split(':')[1];
        return Number(min * 60) + Number(sec);
      }
      if (len.length == 1) {
        var sec = time.split(':')[0];
        return Number(sec);
      }
    }

完整代碼：

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <audio controls autoplay start="01:00" id='videoDiv'>
    <source src="http://mp3.9ku.com/hot/2005/05-19/65937.mp3" type="audio/ogg">
  </audio>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //js獲取某個mp3音頻文件的播放時長
      getAudioDuration('http://mp3.9ku.com/hot/2005/05-19/65937.mp3');

      duration();
      console.log("轉(zhuǎn)化為多少秒=》》", timeEvent("00:14:36"));
    })

    // 音頻加載完成后的一系列操作
    function duration() {
      var myVid = document.getElementById("videoDiv");
      console.log("duration ", myVid);
      if (myVid != null) {
        var duration;
        myVid.load(); //方法重新加載音頻/視頻元素
        // https://www.w3school.com.cn/tags/av_prop_currenttime.asp
        // currentTime 屬性設(shè)置或返回音頻/視頻播放的當(dāng)前位置（以秒計）。
        // 當(dāng)設(shè)置該屬性時，播放會跳躍到指定的位置。
        myVid.currentTime = 20; //默認指定音頻默認從20s的時候開始播放（默認時間為s）
        myVid.oncanplay = function () {
          //duration 屬性返回當(dāng)前音頻的長度，以秒計。
          console.log("音頻時間", myVid.duration);
          console.log("時分秒格式轉(zhuǎn)化：", timeToMinute(myVid.duration))
        }
      }
    }

    function getAudioDuration(src) {
      let audio = document.createElement('audio') //生成一個audio元素 
      audio.src = src //音樂的路徑 
      audio.addEventListener("canplay", function () {
        console.log("音頻長度=>>>：", parseInt(audio.duration) + '秒', '音頻時分秒格式：', timeToMinute(parseInt(audio
          .duration)));
      });
    }

    // 秒轉(zhuǎn)換時分鐘00:00:00格式
    function timeToMinute(times) {
      var t;
      if (times > -1) {
        var hour = Math.floor(times / 3600);
        var min = Math.floor(times / 60) % 60;
        var sec = times % 60;
        if (hour < 10) {
          t = '0' + hour + ":";
        } else {
          t = hour + ":";
        }

        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(2);
      }
      t = t.substring(0, t.length - 3);
      return t;
    }

    // 00:00:00時分秒格式轉(zhuǎn)化為秒
    function timeEvent(e) {
      let time = e;
      var len = time.split(':');
      if (len.length == 3) {
        var hour = time.split(':')[0];
        var min = time.split(':')[1];
        var sec = time.split(':')[2];
        return Number(hour * 3600) + Number(min * 60) + Number(sec);
      }
      if (len.length == 2) {
        var min = time.split(':')[0];
        var sec = time.split(':')[1];
        return Number(min * 60) + Number(sec);
      }
      if (len.length == 1) {
        var sec = time.split(':')[0];
        return Number(sec);
      }
    }
  </script>
</body>

</html>

參考文章：

https://www.zhangxinxu.com/wordpress/2019/07/html-audio-api-guide/

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

https://blog.csdn.net/qq_31984879/article/details/84071245

https://www.w3school.com.cn/tags/av_prop_currenttime.asp

到此這篇關(guān)于JS指定音頻audio在某個時間點進行播放的文章就介紹到這了,更多相關(guān)JS音頻audio長度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: