Playbackrate On Audio And Pitch

Little bit of background: People like games. People use the internet. The internet needs games. Games use sound. HTML5 has

Solution 1:

From the Mozilla bug tracker issue on implementing playbackRate

WebKit solves this by exporting an additional (prefixed) attribute "preservesPitch" (proposed to the WhatWG here: http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-July/021100.html)

Presumably you can set preservesPitch (webkitPreservesPitch for webkit) to false to turn off this feature in Webkit at least. I'm not familiar with other browser support for this property.

Solution 2:

Chrome currently supports the Web Audio API ( http://www.w3.org/TR/webaudio/ ) which has a playbackRate audioParam that you can set. It's not as simple as the <audio> tag, but allows for all sorts of cool stuff. I'm currently using it to play with pitch-shifting / time-stretching distortion.

Here's an example of what you could do:

//build a request and fire it off
    speedChanger.loader = (function(){

      var _request       = newXMLHttpRequest(),

          _handleRequest = function(url){
            _request.open('GET',url,true);
            _request.responseType = 'arraybuffer';
            _request.onload = function(){
              SpeedChanger.audioGraph.context.decodeAudioData(_request.response, function(buffer){
                _loadedBuffer = buffer;
                SpeedChanger.audioGraph.setBuffer(buffer);
                SpeedChanger.audioGraph.setBufferCache(buffer);

              },function(){//error stuff});
            };
            _request.send();
          };

      _handleRequest("audio/file.mp3");

  }());//loader

  grainTable.audioGraph = (function(){
    var _context = newwebkitAudioContext(),         //this is the container for your entire audio graph
        _source = _context.createBufferSource(),     //your buffer will sit here
        _bufferCache,                                //buffer needs to be re-initialized before every play, so we'll cache what we've loaded here//for chaching / retrieving the buffer
        _getBufferCache = function(){
          return _bufferCache;  
        },
        _setBufferCache = function(_sound){
          _bufferCache = _sound;
        },

        //for setting the current instance of the buffer 
        _setBuffer = function(_sound){
          _source.buffer = _sound;
        },

        _setPlaybackRate = function(rate){
          _source.playbackRate.value = rate;
        },

        _setRate = function(myRate){
            _rate = myRate;
        }

        //play it
        _playSound = function(){

          _source.noteOff(0);                       //call noteOff to stop any instance already playing before we play ours

          _source = _context.createBufferSource();  //init the source_setBuffer(_bufferCache);                 //re-set the buffer_setPlaybackRate(_rate);                  //here's your playBackRate check

          _source.connect(_context.destination);    //connect to the speakers 
          _source.noteOn(0);                        //pass in 0 to play immediately
        },

}

    return{

      context        :_context,
      setBuffer      :_setBuffer,
      setBufferCache :_setBufferCache,
      playSound      :_playSound,
      setRate        :_setRate

    }

  }());//audioGraph

Solution 3:

No, there's currenly nothing in the HTML5 specification that allows you such fine tuning with audio.

But.

Why do you care about "power" and "freedom with projects" when you're already limiting yourself by deciding to ditch Firefox? Incidentally Opera also doesn't support MP3.

Unless of course it's a personal project where no-one but yourself will be using it and therefore it's a moot point. In which case if you want to target Chrome for example, you could check out the Web Audio API which might have something you want.