webentwicklung-frage-antwort-db.com.de

Einstellen der HTML5-Audioposition

Wie springe ich zu bestimmten Zeitversätzen in HTML5 Audio Elementen?

Sie sagen, Sie können einfach ihre currentTime -Eigenschaft (Hervorhebung meiner) festlegen:

Das currentTime -Attribut muss beim Abrufen die aktuelle Wiedergabeposition in Sekunden zurückgeben. Wenn das Medienelement bei Einstellung über einen aktuellen Mediencontroller verfügt, muss eine INVALID_STATE_ERR-Ausnahme ausgelöst werden. Andernfalls muss das Benutzerprogramm nach dem neuen Wert suchen (der möglicherweise eine Ausnahme auslöst).

Leider scheint es nicht zu funktionieren (ich brauche es in Chrome).

Es gibt ähnliche Fragen, aber keine Antworten.

61
katspaugh

Funktioniert auf mein Chrom ...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});
51
marko

Um eine Audiodatei zu umgehen, muss Ihr Server ordnungsgemäß konfiguriert sein.

Der Client sendet Byte Range Requests , um bestimmte Bereiche einer Datei zu suchen und abzuspielen, sodass der Server angemessen reagieren muss:

Um das Suchen und Wiedergeben von Bereichen des Mediums zu unterstützen, die noch nicht heruntergeladen wurden, verwendet Gecko HTTP 1.1-Bytebereichsanforderungen, um das Medium von der Zielposition für das Suchen abzurufen. Wenn Sie keine X-Content-Duration-Header bereitstellen, sucht Gecko mithilfe von Bytebereichsanforderungen bis zum Ende des Mediums (sofern Sie den Content-Length-Header bereitstellen), um die Dauer des Mediums zu bestimmen.

Wenn der Server dann korrekt auf Bytebereichsanforderungen reagiert, können Sie die Audioposition über currentTime festlegen:

audio.currentTime = 30;

Siehe MDNs Server für Ogg-Medien konfigurieren (das Gleiche gilt auch für andere Formate).

Siehe auch Konfigurieren von Webservern für HTML5 Ogg-Video und -Audio .

64
katspaugh

Du kannst den ... benutzen #t URI Zeitraum Eigenschaft
und das gilt für Audio und Video Medien.

stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec.
var a = new Audio();
a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5";
a.play();

Wenn Sie dynamisch überspringen möchten zu einem bestimmten Bereich, dann verwenden Sie HTMLMediaElement. currentTime :

audio.currentTime = 8.5;
16
Roko C. Buljan

Eine viel einfachere Lösung ist

var element = document.getElementById('audioPlayer');

//first make sure the audio player is playing
element.play(); 

//second seek to the specific time you're looking for
element.currentTime = 226;
9
Cedric Dahl

Stellen Sie sicher, dass Sie versuchen, die Eigenschaft currentTime zu setzen after das Audioelement ist spielbereit. Sie können Ihre Funktion an das in der Spezifikation definierte Ereignisattribut oncanplay binden.

Können Sie ein Beispiel des fehlgeschlagenen Codes posten?

8
dragon

Firefox stellt auch Bytebereichsanforderungen, wenn nach noch nicht geladenem Inhalt gesucht wird. Dies ist nicht nur ein Problem mit chrome. Setzen Sie den Antwortheader "Accept-Ranges: bytes" und geben Sie einen 206 Partial Content-Statuscode zurück, damit jeder Client Bytebereichsanforderungen stellen kann.

Siehe https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

7
user3834658

Ich hatte das Problem, dass der Fortschrittsbalken für Audio nicht funktionierte, aber Audio richtig funktionierte. Dieser Code funktioniert für mich. Hoffe es wird dir auch helfen. Hier ist das Lied das Objekt der Audiokomponente.

HTML-Teil

<input type="range" id="seek" value="0" max=""/>

JQuery Part

    $("#seek").bind("change", function() {
            song.currentTime = $(this).val();               
        });

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

    $("#seek").attr("max", song.duration);
    $('#seek').val(song.currentTime);
    });
5
Anuj Sharma

Die Antwort von @ katspaugh ist korrekt, es gibt jedoch eine Problemumgehung, für die keine zusätzliche Serverkonfiguration erforderlich ist. Die Idee ist, die Audiodatei als Blob abzurufen, in dataURL umzuwandeln und als src für das audio -Element zu verwenden.

Hier ist die Lösung für angular $http, aber bei Bedarf kann ich auch die Vanilla JS-Version hinzufügen:

$http.get(audioFileURL,
        {responseType:'blob'})
        .success(function(data){
            var fr = new FileReader;
            fr.readAsDataURL(data);
            fr.onloadend = function(){
                domObjects.audio.src = fr.result;
            };
        });

vorsichtshinweise

  1. Diese Problemumgehung eignet sich nicht für große Dateien.
  2. Origin-übergreifend funktioniert es nur, wenn CORS richtig eingestellt ist.
4
artur grzesiak

Stellen Sie die Zeitposition auf 5 Sekunden ein:

var vid = document.getElementById("myAudio");
vid.currentTime = 5;
2
Jijo Paulose