与 THREE.AudioListener 共享 HTML DOM 音频元素

Question

我有一个 WebGL 体验，它有一个组件可以对正在播放的音频做出反应。我们还有需要收听音频的标准 HTML DOM 元素，以便我们可以渲染字幕。

在 THREE 中，我们可以像这样创建一个 THREE.AudioListener：

// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );

// create a global audio source
const sound = new THREE.Audio( listener );

// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
    sound.setBuffer( buffer );
    sound.setLoop(true);
    sound.setVolume(0.5);
    sound.play();
});

有没有办法从 DOM 获取音频源而不是用 THREE.AudioLoader 加载它？或者告诉 THREE.AudioListener 改为收听来自 DOM 元素的音频？

Answer 1

Three.js Audio 对象（及其所有相关类）使用 WebAudio API. I believe you can get the WebAudio context via the Audio.context property，它使您可以访问任何本机 WebAudio 命令。

其次，根据“加载声音”部分 from this demo，您似乎可以 select 一个 <audio> 标签并将其传递给 WebAudio API 通过createMediaElementSource():

// create a global audio source
const listener = new THREE.AudioListener();
camera.add( listener );
const audio = new THREE.Audio( listener );

// Get WebAudio context
const audioContext = audio.context;

// get the <audio> element
const audioElement = document.querySelector('audio');

// pass it into the audio context
const track = audioContext.createMediaElementSource(audioElement);

编辑：

我刚刚意识到 Three.js 已经为您完成了此操作，而无需通过 the Audio.setMediaElementSource method 手动访问上下文，因此您可以跳过一个步骤：

// create a global audio source
const listener = new THREE.AudioListener();
camera.add( listener );
const audio = new THREE.Audio( listener );

// get the <audio> element
const audioElement = document.querySelector('audio');
const track = audio.setMediaElementSource(audioElement);

与 THREE.AudioListener 共享 HTML DOM 音频元素

Share HTML DOM audio element with THREE.AudioListener

three.js

html5-audio

编辑：