在连接到网络音频 api 的音频元素上设置播放速率

Posted 2023-02-25

【中文标题】在连接到网络音频 api 的音频元素上设置播放速率

【英文标题】：Setting playbackRate on audio element connected to web audio api

【发布时间】：2012-04-20 03:15:11

【问题描述】：

我一直在尝试使用 createMediaElementSource 将音频元素连接到网络音频 api 并让它工作，但我需要做的一件事是更改音频标签的播放速率，但我无法让它工作.

如果您尝试运行下面的代码，您会发现它可以正常工作，直到您取消注释我们设置播放速率的行。当这条线在音频中时，音频会被静音。

我知道我可以使用 source.playbackRate.value 在 AudioBufferSourceNode 上设置播放速率，但这不是我想做的，我需要在连接到网络音频时设置音频元素的播放速率api 使用 createMediaElementSource 所以我没有任何 AudioBufferSourceNode。

有人做到了吗？

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);

【问题讨论】：

奇怪，这在 Chrome 中似乎对我有用。 jsfiddle.net/9gLKM -- Chrome：版本 22.0.1229.94 m

这在 Safari 中仍然是一个问题（至少 v13.0.0，但可能更早）； Chrome/Firefox 工作正常。连接Web Audio API 节点后，无法再在audio tag 上设置音量和播放速率。对于音量，连接一个GainNode，正如你已经提到的，对于playbackRate，连接一个AudioBufferSourceNode。

【参考方案1】：

您必须在音频开始播放后设置播放速率。我发现使这项工作的唯一可移植方法是等到您收到带有有效currentTime 的timeupdate 事件：

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

请注意，android 目前不支持播放速率，Chrome（桌面版）不支持低于 0.5 的播放速率。

【讨论】：

这似乎是一个错误。规范在哪里指定在初始播放后才能设置音频的播放速率？

当我阅读规范 (w3.org/html/wg/drafts/html/master/…) 时，其目的是在播放开始时defaultPlaybackRate 将（重新）设置playbackRate。在此之后，可以使用playbackRate 动态设置播放速率。必须按照我上面写的那样做有点奇怪，但可惜 - 这是唯一有效的方法。相信我 :)（我是github.com/Notalib/LYT 的当前作者，仅在这个问题上就花了大约 40 个小时。）

设置defaultPlaybackRate怎么样？

我并不是说您在播放后必须设置它是不正确的。我只是不明白为什么会这样。浏览器应该能够抽象出这个需求，规范应该把责任放在浏览器供应商身上。

规范中提到浏览器可以向用户公开可视控件，其中浏览器可以让用户更改播放速率。首先，让浏览器可以公开浏览器特定的控制界面是一个非常糟糕的主意，但这就是规范的措辞。我认为与此界面的交互表明需要同时拥有playbackRate 和defaultPlaybackRate。

【参考方案2】：

您使用哪个浏览器进行测试？这似乎还没有在 Firefox 中实现，但应该可以在 Chrome 上运行。

实现播放速率的 Mozilla 错误： https://bugzilla.mozilla.org/show_bug.cgi?id=495040

【讨论】：

我正在使用 chrome。 Firefox 支持音频标签，但不支持网络音频 api，我的代码同时使用这两种技术，因此无法在 Firefox 上运行。

在 chrome 中，playbackRate 确实适用于独立的音频标签，但我想做的是让它适用于使用 createMediaElementSource 连接到网络音频 api 的音频元素。那是我无法工作的部分。