準備跳槽了,意味着我又要作一個什麼拿的出手的做品來忽悠面試官了,因此這幾天趕了一個音樂播放器出來,寫到一半,把裏面用到的顯示音樂頻譜數據的功能分離了出來,在此分享給諸位。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' } });
放一張演示效果圖: