Setting playbackRate on audio element connected to web audio api

Question

I've been experimenting with connecting an audio element to the web audio api using createMediaElementSource and got it to work but one thing I need to do is change the playback rate of the audio tag and I couldn't get that to work.

If you try to run the code below, you'll see that it works until you uncomment the line where we set the playback rate. When this line is in the audio gets muted.

I know I can set the playback rate on an AudioBufferSourceNode using source.playbackRate.value but this is not what I'd like to do, I need to set the playback rate on the audio element while it's connected to the web audio api using createMediaElementSource so I don't have any AudioBufferSourceNode.

Has anyone managed to do that?

var _source,
     _audio,
     _context,
     _gainNode;

_context = new webkitAudioContext();

function play(url) {
    if (_audio) {
        _audio.pause();
    }
    _audio = new Audio(url);
    //_audio.playbackRate = 0.6;

    setTimeout(function() {
        if (!_gainNode) {
            _gainNode = _context.createGainNode();
            _gainNode.gain.value = 0.1;
            _gainNode.connect(_context.destination);
        }

        _source = _context.createMediaElementSource(_audio);
        _source.connect(_gainNode);

        _audio.play();
    }, 0);

}

play("http://geo-samples.beatport.com/items/volumes/volume2/items/3000000/200000/40000/9000/400/60/3249465.LOFI.mp3");

setTimeout(function () {
    _audio.pause();
}, 4000);

Answer 1

You have to set the playback rate after the audio has started playing. The only portable way I have found to make this work, is by waiting until you get a timeupdate event with valid currentTime:

_audio.addEventListener('timeupdate', function(){
    _if(!isNaN(audio.currentTime)) {
        _audio.playbackRate = 0.6;
    }
});

Note that playback rate isn't currently supported on android and that Chrome (on desktop) doesn't support playback rates lower than 0.5.

Answer 2

Which browser are you using to test this? It seems this is not yet implemented in Firefox, but should be working on Chrome.

Mozilla bug for implementing playbackRate: https://bugzilla.mozilla.org/show_bug.cgi?id=495040