Analysieren und zeigen HTML-Audio aktuelle Zeit mit Javascript

Question

Ich arbeite an einem einfachen JavaScript + HTML-Audio-Player und zu diesem Zeitpunkt möchte ich eine Schnittstelle erstellen, die die aktuelle Zeit des Audios in der Form "MM: SS" anzeigen . Für das, was ich suchen konnte, hat die HTML Audio/Video DOM Reference nur eine native Funktion - audio|video.currentTime - die die aktuelle Audiozeit in Sekunden mit einer großen Dezimalgenauigkeit zurückgeben.

Um diesen I-Code zu tun:

HTML

<audio id='audio' src="http://www.stephaniequinn.com/Music/Canon.mp3" controls></audio> 
<div id="timer">00:00</div> 

JavaScript

var audio = document.getElementById('audio'), 
     timer = document.getElementById('timer'); 

var update = setInterval(function() { 

    timer.innerHTML = audio.currentTime; 
}, 10); 

habe ich versucht, eine Reihe von Dingen, aber ich konnte die Ausgabe so, wie ich wollte nicht formatiert werden. Hoffen einige von euch können etwas Licht auf diese bringen.

Codepen sample

Answer 1

Arbeits CodePen

Nur ein wenig Mathematik benötigt bearbeitet! JS unten:

var update = setInterval(function() { 
     var mins = Math.floor(audio.currentTime/60); 
     var secs = Math.floor(audio.currentTime % 60); 
     if (secs < 10) { 
     secs = '0' + String(secs); 
     } 
     timer.innerHTML = mins + ':' + secs; 
    }, 10); 

Answer 2

Ich denke, dies ist die Art und Weise elegent ist:

var seconds = audio.currentTime % 60; 
var minutes = Math.floor(audio.currentTime/60); 

timer.innerHTML = ('0' + minutes).substr(-2) + ':' + ('0' + seconds).substr(-2);