Festlegen der HTML5-Audioposition

69

Wie springe ich zu bestimmten Zeitversätzen in HTML5-Audioelementen ?

Sie sagen, Sie können einfach ihre currentTimeEigenschaft festlegen (Hervorhebung meiner):

Das currentTimeAttribut muss beim Abrufen die aktuelle Wiedergabeposition in Sekunden zurückgeben. Wenn das Medienelement beim Einstellen über einen aktuellen Mediencontroller verfügt, muss es eine INVALID_STATE_ERR-Ausnahme auslösen. Andernfalls muss der Benutzeragent nach dem neuen Wert suchen (was möglicherweise eine Ausnahme auslöst).

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

Es gibt ähnliche Fragen, aber keine Antworten.

katspaugh
quelle

Antworten:

56

Funktioniert auf meinem Chrom ...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});
Marko
quelle
6
soemarko, danke! Nachdem Sie die URL des Audios auf die URL eingestellt haben, die Sie in Ihrem jsbin angegeben haben, currentTimebegann die Arbeit. Ich denke, es war die Serversache, weil ich früher python -m SimpleHTTPServereine Audiodatei bereitgestellt habe .
Katspaugh
73

Um in einer Audiodatei herumzuspringen, muss Ihr Server ordnungsgemäß konfiguriert sein.

Der Client sendet Bytebereichsanforderungen , um bestimmte Bereiche einer Datei zu suchen und abzuspielen. Daher muss der Server angemessen reagieren:

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 Suchzielposition abzurufen. Wenn Sie keine X-Content-Duration-Header bereitstellen, verwendet Gecko außerdem Bytebereichsanforderungen, um das Ende des Mediums zu ermitteln (vorausgesetzt, Sie bedienen den Content-Length-Header), um die Dauer des Mediums zu bestimmen.

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

audio.currentTime = 30;

Siehe MDNs Konfigurieren von Servern für Ogg-Medien (dasselbe gilt tatsächlich für andere Formate).

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

katspaugh
quelle
8
+1, um das eigentliche Problem zu lösen: SimpleHTTPServer ist nur ein HTTP 1.0-Server, der Bytebereichsanforderungen nicht versteht.
Daniel Lubarov
3
+1 für die Beantwortung einer JavaScript-Frage mit JavaScript und nicht mit einem Framework, bei dem alle von einer Brücke springen können, weil alle anderen ein Framework sind.
John
5
Soweit ich es herausfinden konnte, funktioniert die Suche nach WebKit / Chrome nur bei Verwendung Accept-Ranges: bytes, selbst für Daten, die bereits gepuffert sind (Einstellung Content-Lengthoder X-Content-Durationnicht hilfreich) ... Dies ist ziemlich seltsam, da nicht alle Backends in der Lage sind zur Unterstützung von Inhaltsbereichen (meiner nicht, da wir Dateien im laufenden Betrieb konvertieren) ... Firefox ist vernünftiger und funktioniert wie erwartet (Sie können nach gepuffertem Inhalt und nicht nach ungepuffertem Inhalt suchen).
Martin Tournoij
1
Genau das, womit ich es zu tun hatte - Djangos Webserver ist nicht in der Lage, Bytebereichsanforderungen zu verarbeiten, und die Wiedergabe wurde in Chrome immer von vorne begonnen, unabhängig vom geladenen Status oder dem übergebenen aktuellen Zeitwert.
Marek Jalovec
1
Also, zusammenfassend, setzen Sie Header set Accept-Ranges bytes Ihre .htaccessJungs, danke. Ich bin seit 2013 dabei: |
yPhil
18

Beide Audio- und Video - Medien nehmen die #tURI Zeitbereich Immobilien

song.mp3 # t = 8.5

Verwenden Sie HTMLMediaElement, um dynamisch zu einem bestimmten Punkt zu springen. currentTime :

audio.currentTime = 8.5;
Roko C. Buljan
quelle
1
Scheint nicht in allen Browsern als direkter Link zu funktionieren, ist aber dennoch hilfreich.
Joseph Coco
Ich denke der Link ist veraltet. Hier ist der Link, den ich gefunden habe: developer.mozilla.org/de/docs/Web/HTML/…
Kurt Mueller
@ KurtMueller beide Links sind OK. Vielen Dank
Roko C. Buljan
Ich glaube nicht, dass der erste Link, den Sie gepostet haben, Ihnen sagt, wie Sie den Zeitbereich für eine Audiodatei einstellen.
Kurt Mueller
11

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;
Cedric Dahl
quelle
8

Stellen Sie sicher, dass Sie versuchen, die currentTimeEigenschaft festzulegen, nachdem das Audioelement zur Wiedergabe bereit ist. Sie können Ihre Funktion an das oncanplayin der Spezifikation definierte Ereignisattribut binden .

Können Sie ein Beispiel für den fehlgeschlagenen Code veröffentlichen?

Drachen
quelle
Drache, ich werde das Ereignis versuchen, danke! Obwohl ich currentTimevon der Konsole aus eingestellt habe, wenn das Audio bereits abgespielt wird.
Katspaugh
7

Firefox stellt auch Bytebereichsanforderungen, wenn nach Inhalten gesucht wird, die noch nicht geladen wurden. Dies ist nicht nur ein Chrome-Problem. 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

user3834658
quelle
6

Ich hatte das Problem, dass der Fortschrittsbalken für Audio nicht funktionierte, aber Audio ordnungsgemäß 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-Teil

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

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

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

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 zu bekommen, verwandelt sie dataURLund sie als die Verwendung srcfür das audioElement.

Hier ist eine Lösung für Winkel $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;
            };
        });

Vorsichtsmaßnahmen

  1. Diese Problemumgehung ist nicht für große Dateien geeignet.
  2. Cross-Origin funktioniert nur, wenn CORS richtig eingestellt ist.
artur grzesiak
quelle
Interessant, obwohl ich nicht sicher bin, ob Sie eine dataURL benötigen, könnten Sie möglicherweise einfach eine Blob-URL generieren: URL.createObjectURL (data)?
Bluejayke
@bluejayke ja, nachdem Sie die Daten abgerufen haben, können Sie: URL.createObjectURL(new Blob([data]))aber Sie müssen ein neues Blob-Objekt aus Ihren Blob-Daten haben
Lucas Andrade
1

Stellen Sie die Zeitposition auf 5 Sekunden ein:

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