自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用 Three.js 和 AudioContext 實現(xiàn)音樂頻譜的 3D 可視化

作者：神說要有光zxg
開發(fā) 前端
本文我們既學(xué)了 AudioContext 獲取音頻頻譜數(shù)據(jù)，又學(xué)了用 Three.js 做 3D 的繪制，數(shù)據(jù)和繪制的結(jié)合，這就是可視化做的事情：通過一種合適的顯示方式，更好的展示數(shù)據(jù)。

[[437041]]

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

圖片

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

這個效果的實現(xiàn)能學(xué)到兩方面的內(nèi)容：

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

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

思路分析

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

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

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

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

先對音頻解碼，創(chuàng)建 BufferSource 的節(jié)點來保存解碼后的數(shù)據(jù)，然后傳入 Analyser 獲取頻譜數(shù)據(jù)，最后傳遞給 Destination 來播放。

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

analyser 拿到音頻頻譜數(shù)據(jù)的 api 是這樣的：

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

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

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

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

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

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

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

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

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

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

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

代碼實現(xiàn)

我們先通過 fetch 拿到服務(wù)器上的音頻文件，轉(zhuǎn)成 ArrayBuffer。

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

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

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

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

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

  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 做解碼和后續(xù)處理，分為 Source、Analyser、Destination 3個處理節(jié)點：

  1. let audioCtx = new AudioContext(); 
  2. let source, analyser; 
  3.  
  4. function getData() { 
  5.     source = audioCtx.createBufferSource(); 
  6.     analyser = audioCtx.createAnalyser(); 
  7.  
  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 處理之后，并不能直接播放，因為瀏覽器做了限制。必須得用戶主動做了一些操作之后，才能播放音頻。

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

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

之后可以創(chuàng)建 3D 場景中的各種物體：

創(chuàng)建立方體：

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

  1. const cubes = new THREE.Group(); 
  2.  
  3. const STEP = 50; 
  4. const CUBE_NUM = Math.ceil(1024 / STEP); 
  5.  
  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 ); 
  10.  
  11.     cube.translateX((10 + 10) * i); 
  12.  
  13.     cubes.add(cube); 
  14. } 
  15. cubes.translateX(- (10 +10) * CUBE_NUM / 2); 
  16.  
  17. scene.add(cubes); 

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

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

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

之后是花瓣，用 Sprite 創(chuàng)建，因為 Sprite 是永遠(yuǎn)面向相機的平面。貼上隨機的紋理貼圖，設(shè)置隨機的位置。

  1. const FLOWER_NUM = 400; 
  2. /** 
  3.  * 花瓣分組 
  4.  */ 
  5. const petal = new THREE.Group(); 
  6.  
  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]; 
  13.  
  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); 
  20.  
  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. } 
  24.  
  25. scene.add(petal); 

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

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

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

之后設(shè)置下燈光，用點光源：

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

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

  1. const renderer = new THREE.WebGLRenderer(); 
  2.  
  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 獲取最新頻譜數(shù)據(jù)，計算每個分組的平均值，然后設(shè)置到立方體的 scaleY 上。

  1. // 獲取頻譜數(shù)據(jù) 
  2. const frequencyData = new Uint8Array(analyser.frequencyBinCount); 
  3. analyser.getByteFrequencyData(frequencyData); 
  4.  
  5. // 計算每個分組的平均頻譜數(shù)據(jù) 
  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. // 設(shè)置立方體的 scaleY 
  15. for (let i = 0; i < averageFrequencyData.length; i++) { 
  16.     cubes.children[i].scale.y = Math.floor(averageFrequencyData[i] * 0.4); 
  17. } 

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

  1. scene.rotateX(0.005); 

最后，加入軌道控制器就可以了，它的作用是可以用鼠標(biāo)來調(diào)整相機的位置，調(diào)整看到的東西的遠(yuǎn)近、角度等。

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

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

[[437042]]

完整代碼提交到了 github：

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

也在這里貼一份：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>音樂頻譜可視化</title> 
  6.     <style> 
  7.         body { 
  8.             margin: 0; 
  9.             overflow: hidden; 
  10.         } 
  11.     </style> 
  12.     <script src="./js/three.js"></script> 
  13.     <script src="./js/OrbitControls.js"></script> 
  14. </head> 
  15. <body> 
  16. <script> 
  17.     let audioCtx = new AudioContext(); 
  18.     let source, analyser; 
  19.  
  20.     function getData() { 
  21.         source = audioCtx.createBufferSource(); 
  22.         analyser = audioCtx.createAnalyser(); 
  23.  
  24.         return fetch('./music/一路生花.mp3') 
  25.             .then(function(response) { 
  26.                 if (!response.ok) { 
  27.                     throw new Error("HTTP error, status = " + response.status); 
  28.                 } 
  29.                 return response.arrayBuffer(); 
  30.             }) 
  31.             .then(function(arrayBuffer) { 
  32.                 audioCtx.decodeAudioData(arrayBuffer, function(decodedData) { 
  33.                     source.buffer = decodedData; 
  34.                     source.connect(analyser); 
  35.                     analyser.connect(audioCtx.destination); 
  36.                 }); 
  37.             }); 
  38.     }; 
  39.  
  40.     function triggerHandler() { 
  41.         getData().then(function() { 
  42.             source.start(0); 
  43.             create(); 
  44.             render(); 
  45.         }); 
  46.         document.removeEventListener('mousedown', triggerHandler) 
  47.     } 
  48.     document.addEventListener('mousedown', triggerHandler); 
  49.  
  50.     const STEP = 50; 
  51.     const CUBE_NUM = Math.ceil(1024 / STEP); 
  52.     const FLOWER_NUM = 400; 
  53.  
  54.     const width = window.innerWidth; 
  55.     const height = window.innerHeight; 
  56.  
  57.     const scene = new THREE.Scene(); 
  58.  
  59.     const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); 
  60.  
  61.     const renderer = new THREE.WebGLRenderer(); 
  62.     /** 
  63.      * 花瓣分組 
  64.      */ 
  65.     const petal = new THREE.Group(); 
  66.  
  67.     /** 
  68.      * 頻譜立方體 
  69.      */ 
  70.     const cubes = new THREE.Group(); 
  71.  
  72.     function create() { 
  73.         const pointLight = new THREE.PointLight( 0xffffff ); 
  74.         pointLight.position.set(0, 300, 40); 
  75.         scene.add(pointLight); 
  76.  
  77.  
  78.         camera.position.set(0,300, 400); 
  79.         camera.lookAt(scene.position); 
  80.  
  81.         renderer.setSize(width, height); 
  82.         document.body.appendChild(renderer.domElement) 
  83.  
  84.         renderer.render(scene, camera) 
  85.  
  86.         for (let i = 0; i < CUBE_NUM; i ++ ) { 
  87.             const geometry = new THREE.BoxGeometry( 10, 10, 10 ); 
  88.             const material = new THREE.MeshPhongMaterial({color: 'yellowgreen'}); 
  89.             const cube = new THREE.Mesh( geometry, material ); 
  90.             cube.translateX((10 + 10) * i); 
  91.             cube.translateY(1); 
  92.  
  93.             cubes.add(cube); 
  94.         } 
  95.         cubes.translateX(- (10 +10) * CUBE_NUM / 2); 
  96.  
  97.  
  98.         var flowerTexture1 = new THREE.TextureLoader().load("img/flower1.png"); 
  99.         var flowerTexture2 = new THREE.TextureLoader().load("img/flower2.png"); 
  100.         var flowerTexture3 = new THREE.TextureLoader().load("img/flower3.png"); 
  101.         var flowerTexture4 = new THREE.TextureLoader().load("img/flower4.png"); 
  102.         var flowerTexture5 = new THREE.TextureLoader().load("img/flower5.png"); 
  103.         var imageList = [flowerTexture1, flowerTexture2, flowerTexture3, flowerTexture4, flowerTexture5]; 
  104.  
  105.         for (let i = 0; i < FLOWER_NUM; i++) { 
  106.             var spriteMaterial = new THREE.SpriteMaterial({ 
  107.                 map: imageList[Math.floor(Math.random() * imageList.length)], 
  108.             }); 
  109.             var sprite = new THREE.Sprite(spriteMaterial); 
  110.             petal.add(sprite); 
  111.  
  112.             sprite.scale.set(40, 50, 1);  
  113.             sprite.position.set(2000 * (Math.random() - 0.5), 500 * Math.random(), 2000 * (Math.random() - 0.5)) 
  114.         } 
  115.  
  116.         scene.add(cubes); 
  117.         scene.add(petal); 
  118.     } 
  119.  
  120.     function render() { 
  121.         petal.children.forEach(sprite => { 
  122.             sprite.position.y -= 5; 
  123.             sprite.position.x += 0.5; 
  124.             if (sprite.position.y < - height / 2) { 
  125.                 sprite.position.y = height / 2; 
  126.             } 
  127.             if (sprite.position.x > 1000) { 
  128.                 sprite.position.x = -1000; 
  129.             } 
  130.         }); 
  131.  
  132.         const frequencyData = new Uint8Array(analyser.frequencyBinCount); 
  133.         analyser.getByteFrequencyData(frequencyData); 
  134.  
  135.         const averageFrequencyData = []; 
  136.         for (let i = 0; i< frequencyData.length; i += STEP) { 
  137.             let sum = 0; 
  138.             for(let j = i; j < i + STEP; j++) { 
  139.                 sum += frequencyData[j]; 
  140.             } 
  141.             averageFrequencyData.push(sum / STEP); 
  142.         } 
  143.         for (let i = 0; i < averageFrequencyData.length; i++) { 
  144.             cubes.children[i].scale.y = Math.floor(averageFrequencyData[i] * 0.4); 
  145.         } 
  146.  
  147.         scene.rotateX(0.005); 
  148.         renderer.render(scene, camera); 
  149.  
  150.         requestAnimationFrame(render); 
  151.     } 
  152.  
  153.     const controls = new THREE.OrbitControls(camera); 
  154.  
  155. </script> 
  156. </body> 
  157. </html> 

總結(jié)

本文我們學(xué)習(xí)了如何做音頻的頻譜可視化。

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

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

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

然后設(shè)置了點光源，配合 Phong 的材質(zhì)能達到反光效果。

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

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

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

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

 

責(zé)任編輯：姜華 來源： 神光的編程秘籍
Three.js3D可視化AudioContext
相關(guān)推薦

2019-11-29 09:30:37

Three.js3D前端

2024-07-18 06:58:36

2022-01-16 19:23:25

Three.js粒子動畫群星送福

2021-12-14 11:44:37

可視化Three.js 信息

2021-11-23 22:50:14

.js 3D幾何體

2012-11-13 10:52:15

大數(shù)據(jù)3D可視化

2023-09-01 09:30:22

Three.js3D 圖形庫

2023-07-13 10:48:22

web 3DThree.jsBlender

2021-04-21 09:20:15

three.js3d前端

2016-06-01 09:19:08

開發(fā)3D游戲

2021-04-23 16:40:49

Three.js前端代碼

2017-05-08 11:41:37

WebGLThree.js

2023-08-04 09:56:15

2015-03-12 11:08:42

2022-07-15 13:09:33

Three.js前端

2023-08-18 06:59:58

2021-03-08 09:25:48

神經(jīng)網(wǎng)絡(luò)數(shù)據(jù)圖形

2021-09-16 07:52:18

SwiftUScroll效果

2021-12-03 07:27:30

全景瀏覽Three.js

2013-12-11 16:55:23

3DDCIM解決方案
點贊
收藏

51CTO技術(shù)棧公眾號