最近聽了一首很好聽的歌《一路生花》，于是就想用 Three.js 做個音樂頻譜的可視化，最終效果是這樣的：

代碼地址在這里：https://?github.com/Quark?GluonPlasma/threejs-exercize

這個效果的實現能學到兩方面的內容：

• AudioContext 對音頻解碼和各種處理
• Three.js 的 3d 場景繪制

那還等什么，我們開始吧。

思路分析

要做音樂頻譜可視化，首先要獲取頻譜數據，這個用 AudioContext 的 api。

AudioContext 的 api 可以對音頻解碼并對它做一系列處理，每一個處理步驟叫做一個 Node。

我們這里需要解碼之后用 analyser 來拿到頻譜數據，然后傳遞給 audioContext 做播放。所以有三個處理節點：Source、Analyser、Destination

1. context audioCtx = new AudioContext();
3. const source = audioCtx.createBufferSource();
4. const analyser = audioCtx.createAnalyser();
6. audioCtx.decodeAudioData(音頻二進制數據, function(decodedData) {
7. source.buffer = decodedData;
8. source.connect(analyser);
9. analyser.connect(audioCtx.destination);
10. });

先對音頻解碼，創建 BufferSource 的節點來保存解碼后的數據，然后傳入 Analyser 獲取頻譜數據，最后傳遞給 Destination 來播放。

調用 source.start() 開始傳遞音頻數據，這樣 analyser 就能夠拿到音樂頻譜的數據了，Destination 也能正常的播放。

analyser 拿到音頻頻譜數據的 api 是這樣的：

1. const frequencyData = new Uint8Array(analyser.frequencyBinCount);
2. analyser.getByteFrequencyData(frequencyData);

每一次能拿到的 frequencyData 有 1024 個元素，可以按 50 個分為一份，算下平均值，這樣只會有 1024/50 = 21 個頻譜單元數據。

之后就可以用 Three.js 把這些頻譜數據畫出來了。

21 個數值，可以繪制成 21 個 立方體 BoxGeometry，材質的話，用 MeshPhongMaterial(因為這個反光的計算方式是一個姓馮的人提出來的，所以叫 Phong)，它的特點是表面可以反光，如果用 MeshBasicMaterial，是不反光的。

之后加入花瓣雨效果，這個我們之前實現過，就是用 Sprite (永遠面向相機的一個平面)做貼圖，然后一幀幀做位置的改變。

通過“漫天花雨”來入門 Three.js

之后分別設置燈光、相機就可以了：

燈光我們用點光源 PointLight，從一個位置去照射，配合 Phong 的材質可以做到反光的效果。

相機用透視相機 PerspectiveCamera，它的特點是從一個點去看，會有近大遠小的效果，比較有空間感。而正交相機 OrthographicCamera 因為是平行投影，就沒有近大遠小的效果，不管距離多遠的物體都是一樣大。

之后通過 Renderer 渲染出來，然后用 requestAnimationFrame 來一幀幀的刷新就可以了。

接下來我們具體寫下代碼：

代碼實現

我們先通過 fetch 拿到服務器上的音頻文件，轉成 ArrayBuffer。

ArrayBuffer 是 JS 語言提供的用于存儲二進制數據的 api，和它類似的還有 Blob 和 Buffer，區別如下：

ArrayBuffer 是 JS 語言本身提供的用于存儲二進制數據的通用 API

Blob 是瀏覽器提供的 API，用于文件處理

Buffer 是 Node.js 提供的 API，用于 IO 操作

這里，我們毫無疑問要用 ArrayBuffer 來存儲音頻的二進制數據。

1. fetch('./music/一路生花.mp3')
2. .then(function(response) {
3. if (!response.ok) {
4. throw new Error("HTTP error, status = " + response.status);
5. }
6. return response.arrayBuffer();
7. })
8. .then(function(arrayBuffer) {
9. });

然后用 AudioContext 的 api 做解碼和后續處理，分為 Source、Analyser、Destination 3個處理節點：

1. let audioCtx = new AudioContext();
2. let source, analyser;
4. function getData() {
5. source = audioCtx.createBufferSource();
6. analyser = audioCtx.createAnalyser();
8. return fetch('./music/一路生花.mp3')
9. .then(function(response) {
10. if (!response.ok) {
11. throw new Error("HTTP error, status = " + response.status);
12. }
13. return response.arrayBuffer();
14. })
15. .then(function(arrayBuffer) {
16. audioCtx.decodeAudioData(arrayBuffer, function(decodedData) {
17. source.buffer = decodedData;
18. source.connect(analyser);
19. analyser.connect(audioCtx.destination);
20. });
21. });
22. };

獲取音頻，用 AudioContext 處理之后，并不能直接播放，因為瀏覽器做了限制。必須得用戶主動做了一些操作之后，才能播放音頻。

為了繞過這個限制，我們監聽 mousedown 事件，用戶點擊之后，就可以播放了。

1. function triggerHandler() {
2. getData().then(function() {
3. source.start(0); // 從 0 的位置開始播放
5. create(); // 創建 Three.js 的各種物體
6. render(); // 渲染
7. });
8. document.removeEventListener('mousedown', triggerHandler)
9. }
10. document.addEventListener('mousedown', triggerHandler);

之后可以創建 3D 場景中的各種物體：

創建立方體：

因為頻譜為 1024 個數據，我們 50個分為一組，就只需要渲染 21 個立方體：

1. const cubes = new THREE.Group();
3. const STEP = 50;
4. const CUBE_NUM = Math.ceil(1024 / STEP);
6. for (let i = 0; i < CUBE_NUM; i ++ ) {
7. const geometry = new THREE.BoxGeometry( 10, 10, 10 );
8. const material = new THREE.MeshPhongMaterial({color: 'yellowgreen'});
9. const cube = new THREE.Mesh( geometry, material );
11. cube.translateX((10 + 10) * i);
13. cubes.add(cube);
14. }
15. cubes.translateX(- (10 +10) * CUBE_NUM / 2);
17. scene.add(cubes);

立方體的物體 Mesh，分別設置幾何體是 BoxGeometry，長寬高都是 10 ，材質是 MeshPhongMaterial，顏色是黃綠色。

每個立方體要做下 x 軸的位移，最后整體的分組再做下位移，移動整體寬度的一半，達到居中的目的。

頻譜就可以通過這些立方體來做可視化。

之后是花瓣，用 Sprite 創建，因為 Sprite 是永遠面向相機的平面。貼上隨機的紋理貼圖，設置隨機的位置。

1. const FLOWER_NUM = 400;
2. /**
3. * 花瓣分組
4. */
5. const petal = new THREE.Group();
7. var flowerTexture1 = new THREE.TextureLoader().load("img/flower1.png");
8. var flowerTexture2 = new THREE.TextureLoader().load("img/flower2.png");
9. var flowerTexture3 = new THREE.TextureLoader().load("img/flower3.png");
10. var flowerTexture4 = new THREE.TextureLoader().load("img/flower4.png");
11. var flowerTexture5 = new THREE.TextureLoader().load("img/flower5.png");
12. var imageList = [flowerTexture1, flowerTexture2, flowerTexture3, flowerTexture4, flowerTexture5];
14. for (let i = 0; i < FLOWER_NUM; i++) {
15. var spriteMaterial = new THREE.SpriteMaterial({
16. map: imageList[Math.floor(Math.random() * imageList.length)],
17. });
18. var sprite = new THREE.Sprite(spriteMaterial);
19. petal.add(sprite);
21. sprite.scale.set(40, 50, 1);
22. sprite.position.set(2000 * (Math.random() - 0.5), 500 * Math.random(), 2000 * (Math.random() - 0.5))
23. }
25. scene.add(petal);

分別把頻譜的立方體和一堆花瓣加到場景中之后，就完成了物體的創建。

然后設置下相機，我們是使用透視相機，要分別指定視角的角度，最近和最遠的距離，還有視區的寬高比。

1. const width = window.innerWidth;
2. const height = window.innerHeight;
4. const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
5. camera.position.set(0,300, 400);
6. camera.lookAt(scene.position);

之后設置下燈光，用點光源：

1. const pointLight = new THREE.PointLight( 0xffffff );
2. pointLight.position.set(0, 300, 40);
3. scene.add(pointLight);

然后就可以用 renderer 來做渲染了，結合 requestAnimationFrame 做一幀幀的渲染。

1. const renderer = new THREE.WebGLRenderer();
3. function render() {
4. renderer.render(scene, camera);
5. requestAnimationFrame(render);
6. }
7. render();

在渲染的時候，每幀都要計算花瓣的位置，和頻譜立方體的高度。

花瓣的位置就是不斷下降，到了一定的高度就回到上面：

1. petal.children.forEach(sprite => {
2. sprite.position.y -= 5;
3. sprite.position.x += 0.5;
4. if (sprite.position.y < - height / 2) {
5. sprite.position.y = height / 2;
6. }
7. if (sprite.position.x > 1000) {
8. sprite.position.x = -1000;
9. }
10. );

頻譜立方體的話，要用 analyser 獲取最新頻譜數據，計算每個分組的平均值，然后設置到立方體的 scaleY 上。

1. // 獲取頻譜數據
2. const frequencyData = new Uint8Array(analyser.frequencyBinCount);
3. analyser.getByteFrequencyData(frequencyData);
5. // 計算每個分組的平均頻譜數據
6. const averageFrequencyData = [];
7. for (let i = 0; i< frequencyData.length; i += STEP) {
8. let sum = 0;
9. for(let j = i; j < i + STEP; j++) {
10. sum += frequencyData[j];
11. }
12. averageFrequencyData.push(sum / STEP);
13. }
14. // 設置立方體的 scaleY
15. for (let i = 0; i < averageFrequencyData.length; i++) {
16. cubes.children[i].scale.y = Math.floor(averageFrequencyData[i] * 0.4);
17. }

還可以做下場景圍繞 X 軸的渲染，每幀轉一定的角度。

1. scene.rotateX(0.005);

最后，加入軌道控制器就可以了，它的作用是可以用鼠標來調整相機的位置，調整看到的東西的遠近、角度等。

1. const controls = new THREE.OrbitControls(camera);

最終效果就是這樣的：花瓣紛飛，頻譜立方體隨音樂跳動。

完整代碼提交到了 github：

https://github.com/QuarkGluonPlasm?a/threejs-exercize

也在這里貼一份：

2. "en">
4. "UTF-8">

總結

本文我們學習了如何做音頻的頻譜可視化。

首先，通過 fetch 獲取音頻數據，用 ArrayBuffer 來保存，它是 JS 的標準的存儲二進制數據的 api。其他的類似的 api 有 Blob 和 Buffer。Blob 是 瀏覽器里的保存文件二進制數據的 API，Buffer 是 Node.js 里的用于保存 IO 數據 api，。

然后使用 AudioContext 的 api 來獲取頻譜數據和播放音頻，它是由一系列 Node 組成的，我們這里通過 Source 保存音頻數據，然后傳遞給 Analyser 獲取頻譜數據，最后傳入 Destination。

之后是 3D 場景的繪制，分別繪制了頻譜立方體和花瓣雨，用 Mesh 和 Sprite 兩種物體，Mesh 是一中由幾何體和材質構成的物體，這里使用 BoxGeometry 和 MeshPhongMaterial(可反光)。Sprite 是永遠面向相機的平面，用來展示花瓣。

然后設置了點光源，配合 Phong 的材質能達到反光效果。

使用了透視相機，可以做到近大遠小的 3D 透視效果，而正交相機就做不到這種效果，它是平面投影，多遠都一樣大小。

然后在每幀的渲染中，改變花瓣的位置和獲取頻譜數據改變立方體的 scaleY 就可以了。

本文我們既學了 AudioContext 獲取音頻頻譜數據，又學了用 Three.js 做 3D 的繪制，數據和繪制的結合，這就是可視化做的事情：通過一種合適的顯示方式，更好的展示數據。

可視化是 Three.js 的一個應用場景，還有游戲也是一個應用場景，后面我們都會做一些探索。

原文鏈接：https://mp.weixin.qq.com/s/Ot8GoJc-6E7LddSDAKWa8Q