Einstellen der HTML5-Audioposition

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 .

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;

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

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

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

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.

Stellen Sie die Zeitposition auf 5 Sekunden ein:

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