寫在前面
很早之前就看到過一個蠻有意思的音頻可視化項(xiàng)目vudio.js。
在我看來作者（剛哥）相當(dāng)厲害癣疟，把項(xiàng)目做得挺完整挣柬，前端代碼結(jié)構(gòu)規(guī)范，demo頁面設(shè)計的可玩性比較高睛挚。
至于前幾個月我就一直想做網(wǎng)易云音樂那種音頻可視化效果邪蛔，大廠就是不同，UI設(shè)計扎狱、配色還是比較考究侧到，對于線條，rounded-bar淤击，動效 等等要素的運(yùn)用讓音樂播放時的可視化效果甚好匠抗。最近有空, 就抓緊時間在vudio.js 的基礎(chǔ)上實(shí)現(xiàn)了一下網(wǎng)易云音樂的這個效果，我們暫且稱之為 跳舞的圈（因?yàn)橛袀€手機(jī)游戲叫做跳舞的線污抬，設(shè)計得非常精妙）汞贸，最終效果如下圖
簡單實(shí)現(xiàn)
因?yàn)樵许?xiàng)目就很好玩，所以直接叉fork過來增強(qiáng)了第二種圓圈的可視化效果。頻譜數(shù)據(jù)的來源是 AudioContext 相關(guān)的AnalyserNode.getByteFrequencyData() 方法矢腻，可以獲取當(dāng)前幀音頻的頻譜數(shù)據(jù)（也就是這瞬間在不同頻率上的振幅）门驾。 可視化思路主要是用canvas的rotate方法，根據(jù)柱形的數(shù)目去迭代渲染不同旋轉(zhuǎn)角度的柱形踏堡，配色猎唁、半徑R都是可以調(diào)整的。
// render 會被requestAnimationFrame 函數(shù)多次調(diào)用顷蟆，所以每次都要用 context2d.restore 恢復(fù)上一幀 ctx.translate 等操作的影響。
function render() {
const __angle = (Math.PI * 2) / __freqByteData.length;
__that.context2d.clearRect(0, 0, __that.width, __that.height);
__that.context2d.save();
// 先把原點(diǎn)挪到畫布中心
__that.context2d.translate(__that.width / 2, __that.height / 2);
// draw circlewave, __freqByteData 是從AnalyserNode.getByteFrequencyData()得到的定長類型數(shù)組（typedArray）轉(zhuǎn)換而來的普通數(shù)組
__freqByteData.forEach(function(value, index){
__width = 3;
__that.context2d.save();
__that.context2d.rotate(__angle * index);
// 通過在畫布中心旋轉(zhuǎn)畫布腐魂，就可以用簡單參數(shù)畫出柱形帐偎。
__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();
}
經(jīng)過以上步驟，基本就可以畫出在圓圈上的柱形了蛔屹，覺得不夠直觀的可以看下我靈魂畫手的示意圖（下圖削樊，應(yīng)該說非常直觀清晰了，就因?yàn)樾D(zhuǎn)了兔毒，所以fillRect的時候每次 x 軸都是0漫贞，當(dāng)然要做半個柱形寬度的offset來保證畫在軸心上）。加上 context2d 的shadowBlur 等陰影效果育叁，或者linearGradient 等, 就可以達(dá)到較好的視覺效果迅脐。
思考
拋開技術(shù)不講，關(guān)于音頻豪嗽，或者說聲音類產(chǎn)品的設(shè)計谴蔑，最近也思考了很多。因?yàn)橛眠^網(wǎng)易云音樂這類音樂類龟梦，還有其他聲音類app 例如 “潮汐”隐锭。潮汐這款app 更是主打過各類自然音來輔助用戶專注、睡眠等行為计贰。雖然人類超過80%的信息來源都是視覺輸入钦睡，但也有很多體驗(yàn)是聽覺、觸覺躁倒、嗅覺的荞怒。比如清早窗外的鳥叫，夏夜的知了蟲鳴樱溉，以及風(fēng)穿過樹林挣输，海浪拍打礁石的聲音。這些自然的聲音大多都有節(jié)奏感福贞，重復(fù)性高撩嚼，可以稱作白噪音。聽覺和視覺，甚至嗅覺完丽，觸覺都可能通過大腦產(chǎn)生通感恋技。
一段40秒的海浪聲，很慢節(jié)奏逻族，點(diǎn)播放蜻底，閉上眼40秒，想象身處這個環(huán)境的感受
通感并不簡單是語文上的一個修辭手法聘鳞，而更是大腦神經(jīng)元之間的一種化學(xué)反應(yīng)薄辅。跟用戶的以往經(jīng)歷、審美情緒以及想象力都有關(guān)抠璃，每個人聽到同一段聲音的感受是不同的站楚，但恰巧就可以擊中某些人的內(nèi)心。比如我就會想起跟隨同學(xué)去東極島的搏嗡，那個遙遠(yuǎn)的下午窿春，四點(diǎn)過，看著海浪拍打礁石采盒，那還是華東地區(qū)少見的深藍(lán)色海水旧乞。陽光鋪灑在海面上，吹著海風(fēng)磅氨，我激動地給家里打電話尺栖，讓爸媽他們聽聽海浪的聲音。沒兩年悍赢，《東極島》這電影就被韓寒拍了决瞳，這還是后來的事情。
所以聲音可以有畫面感左权，但是對于一款聲音 app 來說要專注于聲音的極致體驗(yàn)皮胡，而不能讓視覺效果搶奪了聲音的主場。這一點(diǎn)網(wǎng)易音樂和潮汐都算做得不錯赏迟。不同風(fēng)格的音樂搭配不同節(jié)奏的可視化效果屡贺，可以增強(qiáng)用戶的共鳴，例如古風(fēng)的音樂锌杀，最好是搭配慢節(jié)奏甩栈，柔和的視覺特效。電音則恰恰相反糕再。
最后量没，聲音是一種非常重要的可記錄、數(shù)字化的資源突想，和視覺輸入不同的是殴蹄，聲音雖然沒有畫面究抓，但是在大腦中可以反射出畫面感。這是人類想象力的神奇之處袭灯，聲音和畫面的刺激對于一個人的想象力發(fā)展也有明顯的影響刺下。這也是為什么現(xiàn)在講究嬰幼兒早教要聽音樂、黑白卡教育等等稽荧。小孩從接受聲音刺激橘茉、進(jìn)而聽音樂，到學(xué)會欣賞音樂姨丈，這是一條漫長而有意思的路程畅卓。
參考
https://developer.mozilla.org/en-US/docs/Web/API/
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
