快捷導(dǎo)航

JS指定音頻audio在某個(gè)時(shí)間點(diǎn)進(jìn)行播放

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

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

前言：

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

獲取音頻時(shí)長：

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

指定音頻audio在某個(gè)時(shí)間點(diǎn)進(jìn)行播放：

指定默認(rèn)從第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)前位置（以秒計(jì)）。
        // 當(dāng)設(shè)置該屬性時(shí)，播放會(huì)跳躍到指定的位置。
        myVid.currentTime = 20; //默認(rèn)指定音頻默認(rèn)從20s的時(shí)候開始播放（默認(rèn)時(shí)間為s）
        myVid.oncanplay = function () {
          //duration 屬性返回當(dāng)前音頻的長度，以秒計(jì)。
          console.log("音頻時(shí)間", myVid.duration);
          console.log("時(shí)分秒格式轉(zhuǎn)化：", timeToMinute(myVid.duration))
        }
      }
    }

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

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時(shí)分秒格式轉(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獲取某個(gè)mp3音頻文件的播放時(shí)長
      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)前位置（以秒計(jì)）。
        // 當(dāng)設(shè)置該屬性時(shí)，播放會(huì)跳躍到指定的位置。
        myVid.currentTime = 20; //默認(rèn)指定音頻默認(rèn)從20s的時(shí)候開始播放（默認(rèn)時(shí)間為s）
        myVid.oncanplay = function () {
          //duration 屬性返回當(dāng)前音頻的長度，以秒計(jì)。
          console.log("音頻時(shí)間", myVid.duration);
          console.log("時(shí)分秒格式轉(zhuǎn)化：", timeToMinute(myVid.duration))
        }
      }
    }

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

    // 秒轉(zhuǎn)換時(shí)分鐘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時(shí)分秒格式轉(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在某個(gè)時(shí)間點(diǎn)進(jìn)行播放的文章就介紹到這了,更多相關(guān)JS音頻audio長度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: