Wie springe ich zu bestimmten Zeitversätzen in HTML5-Audioelementen ?
Sie sagen, Sie können einfach ihre currentTime
Eigenschaft festlegen (Hervorhebung meiner):
Das
currentTime
Attribut 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.
javascript
google-chrome
html5-audio
katspaugh
quelle
quelle
audioelement.onloadedmetadata = function(){ audioelement.currentTime = time; }
Antworten:
Funktioniert auf meinem Chrom ...
$('#audio').bind('canplay', function() { this.currentTime = 29; // jumps to 29th secs });
quelle
currentTime
begann die Arbeit. Ich denke, es war die Serversache, weil ich früherpython -m SimpleHTTPServer
eine Audiodatei bereitgestellt habe .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:
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 .
quelle
Accept-Ranges: bytes
, selbst für Daten, die bereits gepuffert sind (EinstellungContent-Length
oderX-Content-Duration
nicht 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).Header set Accept-Ranges bytes
Ihre.htaccess
Jungs, danke. Ich bin seit 2013 dabei: |Beide Audio- und Video - Medien nehmen die
#t
URI Zeitbereich ImmobilienVerwenden Sie HTMLMediaElement, um dynamisch zu einem bestimmten Punkt zu springen. currentTime :
audio.currentTime = 8.5;
quelle
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;
quelle
Stellen Sie sicher, dass Sie versuchen, die
currentTime
Eigenschaft festzulegen, nachdem das Audioelement zur Wiedergabe bereit ist. Sie können Ihre Funktion an dasoncanplay
in der Spezifikation definierte Ereignisattribut binden .Können Sie ein Beispiel für den fehlgeschlagenen Code veröffentlichen?
quelle
currentTime
von der Konsole aus eingestellt habe, wenn das Audio bereits abgespielt wird.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
quelle
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); });
quelle
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
dataURL
und sie als die Verwendungsrc
für dasaudio
Element.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
quelle
URL.createObjectURL(new Blob([data]))
aber Sie müssen ein neues Blob-Objekt aus Ihren Blob-Daten habenStellen Sie die Zeitposition auf 5 Sekunden ein:
var vid = document.getElementById("myAudio"); vid.currentTime = 5;
quelle