Festlegen der HTML5-Audioposition

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.

Funktioniert auf meinem Chrom ...

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

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 .

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;

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;

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?

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

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

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.

Stellen Sie die Zeitposition auf 5 Sekunden ein:

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