Question

我正在使用THREE.Audio来创建音频可视化器，并想知道是否（一旦加载了音频文件）是否可以将媒体事件监听器canplaythrough附加到元素，以便可以将整个媒体连续播放。

loadAudio() {
  // Create AudioListener and add it to the camera
  this.listener = new THREE.AudioListener();
  this.camera.add(this.listener);

  // Create global audio source
  this.sound = new THREE.Audio(this.listener);

  // Load a sound and set it as the audio object's buffer
  this.audioLoader = new THREE.AudioLoader();
  this.audioLoader.load('../../audio/maceo-plex.mp3', (buffer) => {
    this.sound.setBuffer(buffer);
    this.animate();
    console.log('audio is loaded');
  });

  // Create an AudioAnalyser, passing in the sound and desired fftSize
  this.fftSize = 128;
  this.analyser = new THREE.AudioAnalyser(this.sound, this.fftSize);
}

Answer 1

通过THREE.AudioLoader加载音频时，可以有效地加载音频缓冲区，该缓冲区是Web Audio API的一部分。缓冲区本身以及相应的AudioBufferSourceNode没有canplaythrough事件。

对于您的用例，最好按以下方式创建音频对象：

const audio = new THREE.Audio( listener );

const mediaElement = new Audio( 'path/to/my/audio.ogg' );
mediaElement.loop = true;
mediaElement.play();

audio.setMediaElementSource( mediaElement );

通过这种方式，您可以将事件侦听器附加到mediaElement。此外，使用AudioLoader时并不需要一次下载整个文件。我建议您研究以下官方示例，其中包含音频可视化器的所有基本元素：

https://threejs.org/examples/webaudio_visualizer

three R105

有什么方法可以访问THREE.Audio上加载的音频元素以附加媒体事件侦听器？

1 个答案: