js获取音频条 频谱的动画数据 每秒频谱数值

js获取音频条 频谱的动画数据 每秒频谱数值_第1张图片



window.onload = function () {
    var canvas = document.getElementById('hwsy_ypt_canvas');
    var video = document.getElementById('hwsy_ypt_video');
    var context = canvas.getContext("2d");
canvas.width = screen.width;
    canvas.height= screen.height;
//-------------------------
var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
    AudioContext = new AudioContext();
    var fen = AudioContext.createAnalyser();
    var src = AudioContext.createMediaElementSource(video);
    src.connect(fen);
    fen.connect(AudioContext.destination);
//-------------------------
    amoe();
video.play();
    function amoe() {
context.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
        var Data = new Uint8Array(fen.frequencyBinCount);
        fen.getByteFrequencyData(Data);
        // Data 就是动画执行时的音频代码 1024个数组成
context.fillStyle = "#FFF";
context.font = "16px Arial";
for(var i=0;i<200;i++)
context.fillText(Data[i],10,i*20);
requestAnimationFrame(amoe);
    }


}





备注内的我也不是很懂大致意思不过基本都是硬性代码了 

Data是获取到的当前音频数据1024数组格式

不过基本上200以后的基本不动 300以后的就是摆设了

这是源码  https://pan.baidu.com/s/1pLPpx7X
http://download.csdn.net/detail/assfafa/9873728
下面是刚才代码的html 



canvas test


   
   





       




你可能感兴趣的:(js获取音频条 频谱的动画数据 每秒频谱数值)