javascript - Setting playbackRate on audio element connected to web audio api - Stack Overflow

admin管理员组

文章数量:1391850

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 unment 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(".LOFI.mp3");

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

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 unment 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./items/volumes/volume2/items/3000000/200000/40000/9000/400/60/3249465.LOFI.mp3");

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

• javascript
• html
• html5-audio
• web-audio-api

Share Improve this question Follow asked Apr 20, 2012 at 3:15 skissskiss 21333 silver badges1010 bronze badges 2

• Odd, this seems to work for me in Chrome. jsfiddle/9gLKM -- Chrome: Version 22.0.1229.94 m – Achal Dave Commented Oct 31, 2012 at 9:54
• This is still an issue in Safari (at least v13.0.0, but perhaps earlier); Chrome/Firefox work fine. upon hooking up Web Audio API nodes, the volume and playbackRate can no longer be set on the audio tag. For volume, connect a GainNode and, as you have already mentioned, for playbackRate, connect a AudioBufferSourceNode. – Alexander Turinske Commented Oct 25, 2019 at 20:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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/show_bug.cgi?id=495040

本文标签： javascriptSetting playbackRate on audio element connected to web audio apiStack Overflow