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