webentwicklung-frage-antwort-db.com.de

html5 Anzeige audio currentTime

Ich möchte die aktuelle Uhrzeit eines html 5-Audioelements und die Dauer dieses Elements anzeigen. Ich habe über das Internet gesucht, kann aber kein funktionales Skript finden, mit dem ich anzeigen kann, wie lange die Audiodateien sind und wie viel Zeit derzeit z. 1:35/3:20.

Hat jemand irgendwelche Ideen :)?

26
Lenny Magico

Hier ist ein Beispiel:

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

Dies sollte in Firefox und Chrome funktionieren. Für andere Browser müssen Sie wahrscheinlich alternative Kodierungen hinzufügen.

22
robertc

hier ist die Verwendung einfach. Denken Sie daran, dass HTML5-Elemente noch in Arbeit sind, sodass sich alles ändern kann:

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

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

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

hier ist die Referenz HTML5 Audio

um die aktuelle Zeit während der Audiowiedergabe abzurufen, müssen Sie das Ereignis timeupdate anhängen und Ihre aktuelle Uhrzeit innerhalb der Rückruffunktion aktualisieren.

einfaches Tutorial Audio/Video html5 auf dev.opera

26
KJYe.Name

die Version von robertc funktioniert einwandfrei, mit der Ausnahme, dass die Anzahl der Sekunden, die Sie von math.floor() erhalten, nicht in korrekte Zeitwerte umgewandelt wird. 

Hier ist meine Funktion, wenn ontimeupdate aufgerufen wird:

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

Ich habe formatSecondsAsTime() von etwas geändert, das ich gefunden habe hier :

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

Wenn Sie audio.duration () verwenden. Sie erhalten in Sekunden ein Ergebnis. Sie müssen dies nur in Minuten und Sekunden ändern. Demo des Codes ist da, ich hoffe, es wird Ihnen helfen.

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.

    });

Dieser Code funktioniert definitiv für die Gesamtdauer. Um die aktuelle Uhrzeit zu erhalten, müssen Sie nur song.currentTime; anstelle von song.duration;____ verwenden.

3
Anuj Sharma

für diejenigen, die timeupdate in Ihre Jquery implementieren möchten.

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

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

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

die Länge einer Audiodatei zu ermitteln ist einfach !:

<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>
0
Smit Shilpatul

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

Vergiss nicht, magische Zahlen durch Konstanten zu ersetzen. Es ist ein Beispiel.

0
Ivan Lencina