I recently experimented with integrating an audio element into the web audio API using createMediaElementSource and achieved success. However, I encountered an issue when attempting to change the playback rate of the audio tag. Despite trying multiple approaches, I could not get it to work.
If you uncomment the line that sets the playback rate in the code below, you will notice that everything runs smoothly except that the audio becomes muted.
While I am aware that it is possible to set the playback rate on an AudioBufferSourceNode using source.playbackRate.value, this is not what I desire. My intention is to adjust the playback rate on the audio element while it remains connected to the web audio API through createMediaElementSource, without utilizing any AudioBufferSourceNode.
Therefore, my question is: Has anyone successfully accomplished this task?
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);