寫在前面
很早之前就看到過一個蠻有意思的音頻可視化項目vudio.js。
在我看來作者（剛哥）相當厲害，把項目做得挺完整，前端代碼結構規范，demo頁面設計的可玩性比較高。
至于前幾個月我就一直想做網易云音樂那種音頻可視化效果，大廠就是不同，UI設計、配色還是比較考究，對于線條，rounded-bar，動效 等等要素的運用讓音樂播放時的可視化效果甚好。最近有空, 就抓緊時間在vudio.js 的基礎上實現了一下網易云音樂的這個效果，我們暫且稱之為 跳舞的圈（因為有個手機游戲叫做跳舞的線，設計得非常精妙），最終效果如下圖
簡單實現
因為原有項目就很好玩，所以直接叉fork過來增強了第二種圓圈的可視化效果。頻譜數據的來源是 AudioContext 相關的AnalyserNode.getByteFrequencyData() 方法，可以獲取當前幀音頻的頻譜數據（也就是這瞬間在不同頻率上的振幅）。 可視化思路主要是用canvas的rotate方法，根據柱形的數目去迭代渲染不同旋轉角度的柱形，配色、半徑R都是可以調整的。
// render 會被requestAnimationFrame 函數多次調用，所以每次都要用 context2d.restore 恢復上一幀 ctx.translate 等操作的影響。
function render() {
const __angle = (Math.PI * 2) / __freqByteData.length;
__that.context2d.clearRect(0, 0, __that.width, __that.height);
__that.context2d.save();
// 先把原點挪到畫布中心
__that.context2d.translate(__that.width / 2, __that.height / 2);
// draw circlewave, __freqByteData 是從AnalyserNode.getByteFrequencyData()得到的定長類型數組（typedArray）轉換而來的普通數組
__freqByteData.forEach(function(value, index){
__width = 3;
__that.context2d.save();
__that.context2d.rotate(__angle * index);
// 通過在畫布中心旋轉畫布，就可以用簡單參數畫出柱形。
__that.context2d.fillRect(-__width / 2, circleRadius, __width, value);
__that.context2d.restore();
__that.context2d.fill();
});
// need to restore canvas after translate to canvas center..
__that.context2d.restore();
}
經過以上步驟，基本就可以畫出在圓圈上的柱形了，覺得不夠直觀的可以看下我靈魂畫手的示意圖（下圖，應該說非常直觀清晰了，就因為旋轉了，所以fillRect的時候每次 x 軸都是0，當然要做半個柱形寬度的offset來保證畫在軸心上）。加上 context2d 的shadowBlur 等陰影效果，或者linearGradient 等, 就可以達到較好的視覺效果。
思考
拋開技術不講，關于音頻，或者說聲音類產品的設計，最近也思考了很多。因為用過網易云音樂這類音樂類，還有其他聲音類app 例如 “潮汐”。潮汐這款app 更是主打過各類自然音來輔助用戶專注、睡眠等行為。雖然人類超過80%的信息來源都是視覺輸入，但也有很多體驗是聽覺、觸覺、嗅覺的。比如清早窗外的鳥叫，夏夜的知了蟲鳴，以及風穿過樹林，海浪拍打礁石的聲音。這些自然的聲音大多都有節奏感，重復性高，可以稱作白噪音。聽覺和視覺，甚至嗅覺，觸覺都可能通過大腦產生通感。
一段40秒的海浪聲，很慢節奏，點播放，閉上眼40秒，想象身處這個環境的感受
通感并不簡單是語文上的一個修辭手法，而更是大腦神經元之間的一種化學反應。跟用戶的以往經歷、審美情緒以及想象力都有關，每個人聽到同一段聲音的感受是不同的，但恰巧就可以擊中某些人的內心。比如我就會想起跟隨同學去東極島的，那個遙遠的下午，四點過，看著海浪拍打礁石，那還是華東地區少見的深藍色海水。陽光鋪灑在海面上，吹著海風，我激動地給家里打電話，讓爸媽他們聽聽海浪的聲音。沒兩年，《東極島》這電影就被韓寒拍了，這還是后來的事情。
所以聲音可以有畫面感，但是對于一款聲音 app 來說要專注于聲音的極致體驗，而不能讓視覺效果搶奪了聲音的主場。這一點網易音樂和潮汐都算做得不錯。不同風格的音樂搭配不同節奏的可視化效果，可以增強用戶的共鳴，例如古風的音樂，最好是搭配慢節奏，柔和的視覺特效。電音則恰恰相反。
最后，聲音是一種非常重要的可記錄、數字化的資源，和視覺輸入不同的是，聲音雖然沒有畫面，但是在大腦中可以反射出畫面感。這是人類想象力的神奇之處，聲音和畫面的刺激對于一個人的想象力發展也有明顯的影響。這也是為什么現在講究嬰幼兒早教要聽音樂、黑白卡教育等等。小孩從接受聲音刺激、進而聽音樂，到學會欣賞音樂，這是一條漫長而有意思的路程。
參考
https://developer.mozilla.org/en-US/docs/Web/API/
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
