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

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


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


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


概述:

  • 支持諸多樣式調整java

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

  • 僅供娛樂,開心就好github

使用方法

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

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

示例

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

<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'
    }
});

放一張演示效果圖:
圖片描述

相關文章
相關標籤/搜索