Javascript ShaderToy如何将声音加载到纹理中

我一直在尝试shadertoy使用three.js将音频/波形传递到着色器中的方法

在本例中，IQ似乎将频率/波形音频数据放入图像中，然后在着色器中将其作为纹理进行采样。如何在Javascript中创建音频纹理

为了清楚起见，我不需要帮助将纹理均匀加载到着色器中。我只是不知道如何从音频文件创建音频纹理

var texture = new THREE.Texture();

shader.uniforms = {
     iChannel0:  { type: 't', value: texture }
};

---

我猜我需要以某种方式将音频数据放入纹理，我只是不知道如何操作。

您可以通过创建Analyzer节点从Web音频API获取音频数据

const audioContext = new window.AudioContext();
const analyser = audioContext.createAnalyser();

然后创建一个缓冲区来接收数据

const numSamples = analyser.frequencyBinCount;
const audioData = new Uint8Array(numSamples);

然后在渲染循环中获取数据并将其放入纹理中

analyser.getByteFrequencyData(audioData);
...
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, numSamples, 1, 0,
              gl.LUMINANCE, gl.UNSIGNED_BYTE, audioData);

或者在three.js中使用

DataTexture

---

这是简短的版本。较长的版本是音频需要在同一个域上，否则您将遇到CORS问题。要获取音频流（如

）的数据，您是否有一个如何使用three.js
DataTexture
的示例-特别是如何插入
Uint8Array
以及使用哪些参数？（在我的案例中，从音频分析器获得UINT8阵列）。列出一系列参数。
const source = audioContext.createMediaElementSource(audio);