一個簡單的Web音頻數據可視化模塊

準備跳槽了，意味着我又要作一個什麼拿的出手的做品來忽悠面試官了，因此這幾天趕了一個音樂播放器出來，寫到一半，把裏面用到的顯示音樂頻譜數據的功能分離了出來，在此分享給諸位。

---

演示地址： http://margox.github.io/vudio.js
項目地址： https://github.com/margox/vudio.js

---

一個簡單的音頻數據可視化模塊

---

概述：

• 支持諸多樣式調整

• 動畫效果基於Canvas和requestAnimationFrame，絲般順滑

• 僅供娛樂，開心就好

使用方法

var vudio = new Vudio(HTMLAudioElement, HTMLCanvasElement, [option]);
vudio.dance();

以上，第一個和第二個參數是必填項，第三個用於顯示效果的個性化配置,具體狀況看下方示例

示例

在你的HTML文件中放入canvas和audio標籤

<canvas width="256px" height="100px" id="canvas"></canvas>
<audio src="./path/to/audio.mp3" controls id="audio"></audio>

引入Vudio.js

<script src="path/to/vudio.js"></script>

注意，由於瀏覽器的同源策略，因此跨域狀況下沒法使用本模塊（可在服務端進行控制）

開始攪基

var audioObj = document.quertSelector('#audio');
var canvasObj = document.quertSelector('#canvas');
var vudio = new Vudio(audioObj, canvasObj, {
    effect : 'waveform', // 當前只有'waveform'這一個效果，哈哈哈
    accuracy : 128, // 精度,實際表現爲波形柱的個數，範圍16-16348，必須爲2的N次方
    width : 256, // canvas寬度，會覆蓋canvas標籤中定義的寬度
    height : 100, // canvas高度，會覆蓋canvas標籤中定義的高度
    waveform : {
        maxHeight : 80, // 最大波形高度
        minHeight : 1, // 最小波形高度
        spacing: 1, // 波形間隔
        color : '#f00', // 波形顏色，能夠傳入數組以生成漸變色
        shadowBlur : 0, // 陰影模糊半徑
        shadowColor : '#f00', // 陰影顏色
        fadeSide : true, // 漸隱兩端
        horizontalAlign : 'center', // 水平對齊方式，left/center/right
        verticalAlign: 'middle' // 垂直對齊方式 top/middle/bottom
    }
});

// 調用dance方法開始得瑟吧
vudio.dance();

// 也可隨時中止得瑟
vudio.pause();

// 中途換個姿式得瑟也是能夠的
vudio.setOption({
    waveform : {
        color : '#06f',
        verticalAlign: 'bottom'
    }
});

放一張演示效果圖: