2015-03-24 8 views
5

sto cercando di caricare e riprodurre un file audio in cromo con successo, ma non posso giocare a ritroso:Riproduzione audio all'indietro con 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() 

Questo non emette alcun suono e un solo evento timeupdate sparare.

+2

Sembra che ci siano informazioni contrastanti qui. [Questa pagina] (https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/WebAudio_playbackRate_explained) (in basso) indica che "I valori negativi non riproducono attualmente i supporti all'indietro", tuttavia [ HTMLMediaElement docs] (https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement) dice 'Se il playbackRate è negativo, il supporto viene riprodotto all'indietro' – CodingIntrigue

+0

Quindi questa specifica non è stata ancora implementata dalla maggior parte i browser? –

+0

Sembra così. C'è una "soluzione alternativa" qui: http://stackoverflow.com/questions/16045812/jquery-why-the-rewind-playbackrate-doesnt-work – CodingIntrigue

risposta

6

L'utilizzo di valori negativi non è attualmente supportato, pertanto è necessario caricare e invertire manualmente i buffer.

Si noti che ciò richiederà la sorgente audio abilitata per CORS (quella nell'esempio non lo è, quindi non è stato possibile impostare una demo live). Ecco un modo di fare questo:

  • Caricare i dati tramite AJAX (questo richiede CORS attivata per il file audio)
  • Diamo il browser analizza il buffer in un buffer audio
  • Prendi il buffer di canale (s) (riferimenti)
  • Reverse buffer (s)
  • inizializzare il buffer audio e giocare

ovviamente questo si limita alcuni come non si può usa l'elemento Audio più. Dovrai supportare le funzionalità che desideri aggiungendo controlli e codice per loro manualmente.

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