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

Okay, all good so far.

Recently I discovered - to my surprise - that IE9 actually supports playbackRate. I eagerly gave it a try. Even more surprising, it actually worked. I tried the same in Chrome, and while it worked it was horribly grating when I set it to 0.5. I've already ditched Firefox because it doesn't support MP3.

Moving on, here's my question: both IE and Chrome apply pitch correction when changing the playbackRate. IE does a great job, Chrome does a horrible one. Either way, I don't want this, I want the sounds to change pitch. With that kind of power I can delete 650 files I had to procedurally generate to have an alternate pitch, and will have far more freedom with my projects. Heck, I could even make a MOD track player in HTML5 (minus the Effects channel) if I really wanted to.

So, is there anything in the HTML5 specification that allows me to turn pitch correction off, and just have the sound be played as if the samples had literally been stretched apart of squeezed together?

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

Okay, all good so far.

Recently I discovered - to my surprise - that IE9 actually supports playbackRate. I eagerly gave it a try. Even more surprising, it actually worked. I tried the same in Chrome, and while it worked it was horribly grating when I set it to 0.5. I've already ditched Firefox because it doesn't support MP3.

Moving on, here's my question: both IE and Chrome apply pitch correction when changing the playbackRate. IE does a great job, Chrome does a horrible one. Either way, I don't want this, I want the sounds to change pitch. With that kind of power I can delete 650 files I had to procedurally generate to have an alternate pitch, and will have far more freedom with my projects. Heck, I could even make a MOD track player in HTML5 (minus the Effects channel) if I really wanted to.

So, is there anything in the HTML5 specification that allows me to turn pitch correction off, and just have the sound be played as if the samples had literally been stretched apart of squeezed together?

• javascript
• html
• html5-audio
• pitch-shifting

• 4 seriously verbose question :D – Lloyd Commented Feb 1, 2012 at 12:04
• Have you checked the HTML5 Aduio API? – Lee Goddard Commented Sep 18, 2012 at 11:00

3 Answers 3

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.

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       = new XMLHttpRequest(),

          _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 = new webkitAudioContext(),         //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

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.