2015-03-24 13 views
5

Ich versuche, eine Audio-Datei in Chrom zu laden und spielen, aber ich kann es nicht rückwärts spielen:Abspielen von Audio rückwärts mit HTMLMediaElement

 audio = new Audio('http://mathweirdo.com/bingo/audio/buzzer.mp3'); 
     audio.playbackRate = -1; 
     audio.currentTime = audio.duration; // I have tried ommiting this line 
     audio.play() 

Dies erzeugt keinen Ton und nur ein timeupdate Ereignis zu feuern.

+2

Scheint hier widersprüchliche Informationen. [Diese Seite] (https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/WebAudio_playbackRate_explained) (unten) gibt an, dass 'Negative Werte die Medien derzeit nicht rückwärts abspielen ', jedoch die [ HTMLMediaElement docs] (https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement) sagt: 'Wenn der playbackRate negativ ist, wird das Medium rückwärts abgespielt. – CodingIntrigue

+0

Also wurde diese Spezifikation von den meisten noch nicht implementiert Browser? –

+0

Es scheint so. Es gibt einen "Workaround" hier: http://StackOverflow.com/Questions/16045812/Jquery-Why-the-Rewind-Playpackrate-doesnt-work – CodingIntrigue

Antwort

6

Die Verwendung negativer Werte wird derzeit nicht unterstützt, daher müssen Sie die Puffer manuell laden und zurücksetzen.

Beachten Sie, dass hierfür eine CORS-fähige Audioquelle benötigt wird (die im Beispiel nicht, so dass ich keine Live-Demo erstellen konnte). Hier ist eine Möglichkeit, dies zu tun:

  • laden die Daten über AJAX (dies erfordert CORS für die Audiodatei aktiviert)
  • Lassen Sie den Browser, um die Puffer in einen Audiopuffer analysieren
  • Holen Sie sich den Kanalpuffer (s) (Referenzen)
  • die Puffer umkehren (n)
  • die Audiopuffer initialisieren und

Dies wird natürlich einige spielen begrenzen, wie Sie können nicht Verwenden Sie das Audio-Element nicht mehr. Sie müssen die gewünschten Funktionen unterstützen, indem Sie manuell Steuerelemente und Code hinzufügen.

// load audio as a raw array buffer: 
fetch("http://mathweirdo.com/bingo/audio/buzzer.mp3", process); 

// then process the buffer using decoder 
function process(file) { 
    var actx = new (window.AudioContext || window.webkitAudioContext); 
    actx.decodeAudioData(file, function(buffer) { 

     var src = actx.createBufferSource(),  // enable using loaded data as source 
      channel, tmp, i, t = 0, len, len2; 

     // reverse channels 
     while(t < buffer.numberOfChannels) {  // iterate each channel 
     channel = buffer.getChannelData(t++); // get reference to a channel 
     len = channel.length - 1;    // end of buffer 
     len2 = len >>> 1;      // center of buffer (integer) 
     for(i = 0; i < len2; i++) {    // loop to center 
      tmp = channel[len - i];    // from end -> tmp 
      channel[len - i] = channel[i];  // end = from beginning 
      channel[i] = tmp;     // tmp -> beginning 
     } 
     } 

     // play 
     src.buffer = buffer; 
     src.connect(actx.destination); 
     if (!src.start) src.start = src.noteOn; 
     src.start(0); 
    }, 
    function() {alert("Could not decode audio!")} 
) 
} 

// ajax loader 
function fetch(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    try { 
    xhr.open("GET", url); 
    xhr.responseType = "arraybuffer"; 
    xhr.onerror = function() {alert("Network error")}; 
    xhr.onload = function() { 
     if (xhr.status === 200) callback(xhr.response); 
     else alert(xhr.statusText); 
    }; 
    xhr.send(); 
    } catch (err) {alert(err.message)} 
} 
Verwandte Themen