benutzerdefinierte Start- und Endpunkte für HTML-Audio-Element

Question

Ich habe ein HTML-Audio-Element spielt meine Spur. Es ist ein ziemlich einfaches Setup:

<audio controls loop="loop"> 
    <source type="audio/wav" src="song.wav"> 
</audio> 

Ich dachte, es wäre genauso einfach, benutzerdefinierte Start- und Endpunkte zu machen. I.e. Wenn mein Track 10 Sekunden lang ist, möchte ich ein wenig trimmen, so dass nur die Mitte des Songs wiedergegeben wird.

Von the W3 audio tag doc scheint es keine Optionen zur Angabe einer Start- und Endzeit zu geben.

Ich frage nicht, ob jemand Code für mich schreibt; Ich suche nach einem konzeptionellen Leitfaden für die Vorgehensweise. Ich brauche es, um mit der Schleife zu arbeiten, d. H. Es sollte bei jeder Schleife in meinen spezifizierten Werten beginnen und enden. Ich suche nach einem Ansatz, der völlig Client-Seite ist und das funktioniert in Chrome

Answer 1

ich habe etwas herauszufinden, das funktioniert.

Das Ereignis canplaythrough reicht nicht aus, da das Audio eine Schleife bildet; Dieses Ereignis wird nur einmal

Als Alternative gefeuert, ich bin mit der timeupdate Veranstaltung: (dies in Coffeescript)

window.playbackStart = 2 
    window.playbackEnd = 4 

    $("audio").off("timeupdate").on "timeupdate", (e) -> 
     audio = e.currentTarget 
     if audio.currentTime > playbackEnd 
     audio.currentTime = playbackStart 

dies einfach genug scheint, aber ich hatte ein wenig Debugging zu tun, weil currentTime = Aufruf funktionierte nicht (es wurde nur die Zeit auf Null gesetzt, egal was). Es stellt sich heraus, dass das Problem tatsächlich serverseitig war (siehe https://stackoverflow.com/a/32667819/2981429).

Ich musste:

1. meinem Server konfigurieren HTTP 1,1

   • mit Nginx zu verwenden, ich

     hinzugefügt

     proxy_http_version 1.1; 
     proxy_set_header Connection ""; 
     

     meiner location { } Block

2. Setzen Sie in meiner Anwendung die Kopfzeile Accept-Ranges: bytes mit der Antwort.

Answer 2

Ich würde die .wav-Datei trimmt sich

Answer 3

Dieser etwas Code aus der Antwort geändert wird, i in den Kommentaren verknüpft ... siehe commments für Informationen

http://jsfiddle.net/mNPCP/313/

// set start and end times 
    var startTime = 12; 
    var endTime = 15; 
    myAudio=document.getElementById('audio2'); 
    myAudio.addEventListener('canplaythrough', function() { 

     // start it at the start time 
     this.currentTime = startTime; 
     this.play(); 
     // let it play to the end time and then reset the play time 
     setTimeout(function(){ 
     this.currentTime = startTime; 
     }, (endTime-startTime)*1000) 
    });