javascript - Playing audio backwards with HTMLMediaElement - Stack Overflow

admin管理员组

文章数量:1420929

I am trying to load and play an audio file in chrome successfully, but I can't play it backwards:

      audio = new Audio('.mp3');
      audio.playbackRate = -1;
      audio.currentTime = audio.duration; // I have tried ommiting this line
      audio.play()

This produces no sound and only one timeupdate event firing.

I am trying to load and play an audio file in chrome successfully, but I can't play it backwards:

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

This produces no sound and only one timeupdate event firing.

• javascript
• html
• audio
• streaming
• html5-audio

Share Improve this question Follow asked Mar 24, 2015 at 16:55 Gabriel RatenerGabriel Ratener 60588 silver badges2121 bronze badges 4

• 2 Seems there is conflicting information here. This page (at the bottom) states that Negative values don't currently play the media backwards, however the HTMLMediaElement docs says If the playbackRate is negative, the media is played backwards – CodingIntrigue Commented Mar 24, 2015 at 17:08
• So has this spec just not yet been implemented by most browsers? – Gabriel Ratener Commented Mar 24, 2015 at 17:23
• It seems that way. There is a "workaround" here: stackoverflow./questions/16045812/… – CodingIntrigue Commented Mar 24, 2015 at 17:26
• Thank you, it seems however, that workaround would only work for video, not audio. – Gabriel Ratener Commented Mar 24, 2015 at 17:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Using negative values is currently not supported so you will have to load and reverse the buffers manually.

Note that this will require CORS enabled audio source (the one in the example isn't, so I couldn't set up a live demo). Here is one way of doing this:

• Load the data via AJAX (this requires CORS enabled for the audio file)
• Let the browser parse the buffer into an audio buffer
• Get the channel buffer(s) (references)
• Reverse the buffer(s)
• Initialize the audio buffer and play

This will of course limit you some as you cannot use the Audio element anymore. You will have to support the features you want by adding controls and code for them manually.

// load audio as a raw array buffer:
fetch("http://mathweirdo./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)}
}

本文标签： javascriptPlaying audio backwards with HTMLMediaElementStack Overflow