当添加到 THREE.AudioListener 对象的函数与创建它的位置不同时，音频无法在 Safari 中播放

Question

我目前正在开发 Three.JS 项目，该项目涉及将新音频添加到 THREE.AudioListener 对象并在单击鼠标后播放它。我意识到这个新音频只有在添加到在同一函数中创建的 THREE.AudioListener 对象时才能在 Safari 上播放。这就是我的意思：

• 适用于任何地方：

//This is all within the same function, triggered by a mouse click.
const listener = new THREE.AudioListener();
const audio = new THREE.Audio(listener);
const file = <audio file>;
const loader = new THREE.AudioLoader();
loader.load( file, function ( buffer ) {
    audio.setBuffer( buffer );
    audio.play();
    } );

• 不适用于 Safari：

const listener = new THREE.AudioListener();

//Function triggered by a mouse click.
function f(){
        //<listener> is successfully made available within this function
        const audio = new THREE.Audio(listener);
        const file = <audio file>;
        const loader = new THREE.AudioLoader();
        loader.load( file, function ( buffer ) {
            audio.setBuffer( buffer );
            audio.play();
            } );
        };

我不确定为什么会发生这种情况。到目前为止，代码可以在桌面版 Chrome 和 Firefox 上运行，但不能在 Safari 上运行。 我本质上想做的是，使用相同的 THREE.AudioListener 对象在每次单击鼠标时播放生成的音频文件。音频文件在鼠标点击之间发生变化。

我希望能对 Safari 上的这种行为做出解释。

Answer 1

Safari 在用户激活方面非常严格。我想这就是导致问题的原因。

当您调用

new THREE.AudioListener()

时，它将在内部创建一个新的

AudioContext

。

https://github.com/mrdoob/ Three.js/blob/ce0b3d0415c4bc87a8b4ad01c5d21cc26c6ec5eb/src/audio/AudioListener.js#L20

如果该

AudioContext

是为了响应用户操作而创建的，则通常会被解锁。如果它是之前通过从由单击事件触发的函数中调用

resume()

创建的，您可能必须手动解锁它。

listener.context.resume();