Setting playbackRate on audio element connected to web audio api
html, html5-audio, javascript, web-audio-api
Solution
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.
Problem
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); ```