Html5 display audio currentTime

Я хотел бы отобразить текущее время аудио-элемента html 5 и продолжительность этого элемента. Я просматриваю интернет, но не могу найти функциональный script, который позволяет мне отображать, как долго звуковые файлы и какое время в настоящий момент является, например, 1:35/3:20.

У кого-нибудь есть идеи:)?

Ответы

Ответ 1

Вот пример:

<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, для других браузеров вам, вероятно, потребуется добавить альтернативные кодировки.

Ответ 2

здесь простое использование. имейте в виду, что элементы html5 все еще находятся в работе, поэтому все может измениться:

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

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

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

вот ссылка HTML5 Audio

чтобы получить текущее время во время воспроизведения звука, вы должны прикрепить событие timeupdate и обновить текущее время в функции обратного вызова.

простой учебник аудио/видео html5 на dev.opera

Ответ 3

версия 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() из того, что нашел здесь:

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;
}

Ответ 4

для тех, кто хочет реализовать timeupdate в вашем jquery.

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

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

Ответ 5

Когда вы используете 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; Весь код останется таким же.

Ответ 6

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);

Ответ 7

чтобы найти длину аудиофайла просто!:

<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>

Ответ 8

В TypeScript:

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;
}

Не забудьте заменить магические числа на константы. Это пример.