在 Safari 中链接 .connect() 方法时获取 "undefined is not an object"

Question

我正在尝试将 .connect 方法链接到我的 AudioNode。就像这个例子：https://googlechrome.github.io/samples/webaudio-method-chaining/

它在 Chrome 和 Firefox 中有效，但我在 Safari 中得到 "TypeError: undefined is not an object (evaluating 'source.connect(gainNode).connect')"。有什么办法可以解决吗？

const $audioPlayer = document.querySelector('.audio-player')
const audio = new AudioContext()
const gainNode = audio.createGain()
const source = audio.createMediaElementSource($audioPlayer)
source.connect(gainNode).connect(audio.destination)

Answer 1

而不是创建

const audio = new AudioContext()

尝试使用此代码：

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

这适用于大多数浏览器。

Answer 2

Safari 的 Web Audio 实现 API 不仅有前缀，而且不幸的是也非常过时。 connect() 方法在 Safari 中总是 return undefined。

要使您的示例在 Safari 中运行，您可以重写第 2 行并将第 5 行拆分为两个调用。

const $audioPlayer = document.querySelector('.audio-player'); // unchanged

const audio = new webkitAudioContext();

const gainNode = audio.createGain(); // unchanged
const source = audio.createMediaElementSource($audioPlayer); // unchanged

source.connect(gainNode);
gainNode.connect(audio.destination);

如果你想编写你的代码，就好像它针对的是网络音频的最新迭代API，你可以使用一个库。

我是 standardized-audio-context. There is also web-audio-api-shim 的作者，它也填充了 connect() 方法。

要使用标准化音频上下文库，您只需在代码中添加一个导入语句。

import { AudioContext } from 'standardized-audio-context';

// everything else can be left unchanged
const $audioPlayer = document.querySelector('.audio-player');
const audio = new AudioContext();
const gainNode = audio.createGain();
const source = audio.createMediaElementSource($audioPlayer);

source
    .connect(gainNode)
    .connect(audio.destination);

在 Safari 中链接 .connect() 方法时获取 "undefined is not an object"

Getting "undefined is not an object" when chaining .connect() methods in Safari

javascript

safari

web-audio-api