html5顯示音頻currentTime

我想顯示html5音頻元素的當前時間和該元素的持續時間。我一直在看互聯網，但找不到一個功能腳本，它允許我顯示音頻文件的時間以及當前的時間， 1:35/3:20。html5顯示音頻currentTime

任何人有任何想法:)？

2011-02-14 Lenny Magico

嘗試audio.currentTime給什麼？我不確定它是否會起作用。 – c2h2 2011-02-14 14:32:17

我會如何補充它？ – 2011-02-14 14:36:26

我將如何添加？？ – 2011-02-14 14:37:02

下面是一個例子：

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" 
     ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + '/' + Math.floor(this.duration);"> 
    <p>Your browser does not support the audio element</p> 
</audio> 
<span id="tracktime">0/0</span> 
<button onclick="document.getElementById('track').play();">Play</button>

這應該在Firefox和Chrome瀏覽器，其他瀏覽器，你可能需要添加替代編碼。

來源

2011-02-14 14:57:24 robertc

這裏使用簡單。記住HTML5元素仍然在工作，是使任何事情都可能發生變化：

audio = document.getElementsByTagName("audio")[0]; 

    //functions 
    audio.load(); 
    audio.play(); 
    audio.pause(); 

    //properties 
    audio.currentSrc 
    audio.currentTime 
    audio.duration

這裏是參考HTML5 Audio

得到currentTime的同時，音頻播放，您必須附上timeupdate事件和更新您的當前時間在回調函數內。

simple tutorial audio/video html5 on dev.opera

來源

2011-02-14 14:50:41 kjy112

robertc的版本會正常工作，除非它不會將您從math.floor()獲得的秒數轉換爲適當的時間值。

這裏是我的功能時ontimeupdate被稱爲所謂：

<audio id='audioTrack' ontimeupdate='updateTrackTime(this);'> 
    Audio tag not supported in this browser</audio> 
<script> 
function updateTrackTime(track){ 
    var currTimeDiv = document.getElementById('currentTime'); 
    var durationDiv = document.getElementById('duration'); 

    var currTime = Math.floor(track.currentTime).toString(); 
    var duration = Math.floor(track.duration).toString(); 

    currTimeDiv.innerHTML = formatSecondsAsTime(currTime); 

    if (isNaN(duration)){ 
    durationDiv.innerHTML = '00:00'; 
    } 
    else{ 
    durationDiv.innerHTML = formatSecondsAsTime(duration); 
    } 
} 
</script>

我修改formatSecondsAsTime()從東西我發現here：

function formatSecondsAsTime(secs, format) { 
    var hr = Math.floor(secs/3600); 
    var min = Math.floor((secs - (hr * 3600))/60); 
    var sec = Math.floor(secs - (hr * 3600) - (min * 60)); 

    if (min < 10){ 
    min = "0" + min; 
    } 
    if (sec < 10){ 
    sec = "0" + sec; 
    } 

    return min + ':' + sec; 
}

來源

2012-06-27 20:16:47 KStensland

對於那些誰正在尋找實現你的jQuery timeupdate。

<audio id="myAudio"> 
    <source src='test.mp3' type="audio/mp3" /> 
</audio> 

$("audio#myAudio").get(0).addEventListener("timeupdate",function(){ 
     // do your stuff here 
    });

來源

2013-11-12 10:05:48 yourkishore

當您使用audio.duration（）。它會在幾秒鐘內給你結果。你只需要在幾分鐘和幾秒鐘內改變它。代碼演示在這裏，希望它能幫助你。

song.addEventListener('timeupdate',function(){ 

    var duration = song.duration; //song is object of audio. song= new Audio(); 

    var sec= new Number(); 
    var min= new Number(); 
    sec = Math.floor(duration);  
    min = Math.floor(sec/60); 
    min = min >= 10 ? min : '0' + min;  
    sec = Math.floor(sec % 60); 
    sec = sec >= 10 ? sec : '0' + sec; 

    $("#total_duration").html(min + ":"+ sec); //Id where i have to print the total duration of song. 

    });

這段代碼肯定會在總持續時間內工作。要獲得當前時間，您只需使用song.currentTime;代替song.duration; 整個代碼將保持不變。

來源

2014-02-21 09:53:13

找到一個音頻文件的長度很簡單！：

<html> 
<head> 
</head> 
<body> 
    <audio controls="" id="audio"> 
     <source src="audio.mp3"> 
    </audio> 
    <button id="button"> 
    <p id="p"></p> 
     GET LENGTH OF AUDIO 
    </button> 
<script> 
    var MYAUDIO = document.getElementById(audio); 
    var MYBUTTON = document.getElementById(button); 
    var PARA = document.getElementById(p); 
    function getAudioLength() { 
     PARA.innerHTML = duration.MYAUDIO 
    } 
MYBUTTON.addEventListener(click, getAudioLength); 
</script> 
</body> 
</html>

來源

2015-09-20 06:18:31

在打字稿：

formatTime(seconds: number): string { 

    let minutes: any = Math.floor(seconds/60); 
    let secs: any = Math.floor(seconds % 60); 

    if (minutes < 10) { 
     minutes = '0' + minutes; 
    } 

    if (secs < 10) { 
     secs = '0' + secs; 
    } 

    return minutes + ':' + secs; 
}

記得用常量來取代幻數。這是一個例子。

來源

2017-01-10 14:55:13

ES6

 const audio = new Audio(); 
     audio.src = document.querySelector('#audio').src; 
     audio.play(); 
     audio.addEventListener('timeupdate', (event) => { 
      const currentTime = Math.floor(audio.currentTime); 
      const duration = Math.floor(audio.duration); 
     }, false);

來源

2017-07-16 10:21:37

html5顯示音頻currentTime

回答

相關問題