html canvas js音频条动画源码 仿电喵的视频风的频谱

源码下载：https：//pan.baidu.com/s/1b40SZs 

http://download.csdn.net/detail/assfafa/9873730

如果想学怎么获取音频条数据可以看前面的文章

如果想要做插件用就把

下面变量这样改了

//img.src =“index.jpg”;
var kuan = 0;
var hwsy_pp_width = 800;
var hwsy_pp_height = 270;

// ------------------------------------------------ -------------------------------------------------- -------------------------------------------------- --------------------------

下面是源码

window.onload = function hwsy_tjt_hwsy（）{ 
    var hwsy_pp_canvas = document.getElementById（'hwsy_ypt_canvas'）; 
    var hwsy_pp_video = document.getElementById（'hwsy_ypt_video'）; 
    var aaaa = document.getElementById（'aaaa'）; 
    var hwsy_pp_context = hwsy_pp_canvas.getContext（“2d”）; 
    var img = new Image（）; 
    img.src =“index.jpg” 
    var grad =“”; 
    var hwsy_pp_width = document.body.offsetWidth; 
    var hwsy_pp_l = 10; 
    var hwsy_pp_height = document.body.offsetHeight; 
    var hwsy_pp_x = hwsy_pp_height  -  10; 
    hwsy_pp_canvas.width = hwsy_pp_width; 
    hwsy_pp_canvas.height = hwsy_pp_height; 
    var hwsy_pp_cen = hwsy_pp_height / 2; 
    hwsy_pp_video.play（）; 
    var play = 0; 
    var zanting = false; 
    var bbl = 0; 
    var kuan = hwsy_pp_width  -  170 * 6; 
    var ping = 250/133; 
    var juzhong = 0;
var r = 0，g = 0，b = 0; 
var rgb =“＃FFFFFF”; 
    var hwsy_pp_AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
    var hwsy_pp_AudioContext_video = new hwsy_pp_AudioContext（）; 
    var hwsy_pp_fen = hwsy_pp_AudioContext_video.createAnalyser（）; 
    var hwsy_pp_src = hwsy_pp_AudioContext_video.createMediaElementSource（hwsy_pp_video）; 
    hwsy_pp_src.connect（hwsy_pp_fen）; 
    hwsy_pp_fen.connect（hwsy_pp_AudioContext_video.destination）; 
    var hwsy_pp_c_jiet = new Array（）; 
    hwsy_pp_c_jiet = hwsy_pp_video.src.split（“/”）; 
    hwsy_pp_c_jiet = hwsy_pp_c_jiet [hwsy_pp_c_jiet.length  -  1] .split（“。”）; 
    hwsy_pp_c_jiet = hwsy_pp_c_jiet [0]; 
    hwsy_pp_c_jiet = decodeURI（hwsy_pp_c_jiet）; 
    img.onload = function poimg（）{
hwsy_pp_context.drawImage（img，hwsy_pp_width  -  1920，hwsy_pp_height  -  1080,1920,1080）;
var data = hwsy_pp_context.getImageData（0,0，img.width，img.height）.data;  
for（var i = 0; 我<img.height; 我++）{   
        for（var l = 0; l <img.width; l ++）{   
            r + = data [（（img.width * i）+ l）* 4]   
            .g + = data [（（img.width * i）+ 1）* 4 + 1]   
            b + = data [（（img.width * i）+ l）* 4 + 2];  
        }   
    }  
    r / =（img.width * img.height）; 
    g / =（img.width * img.height）;  
    b / =（img.width * img.height）; 
    r = Math.round（r）;  
    g = Math.round（g）;  
    b = Math.round（b）; 
rgb =“rgb（”+ r +“，”+ g +“，”+ b +“）”; 
        canvassx（）; 
        AMOE（）; 
    } 


    function amoe（）{ 
        var hwsy_pp_Data = new Uint8Array（hwsy_pp_fen.frequencyBinCount）; 
        hwsy_pp_fen.getByteFrequencyData（hwsy_pp_Data）; 
        hwsy_pp_context.clearRect（0,0，hwsy_pp_canvas.offsetWidth，hwsy_pp_canvas.offsetHeight）; 
        hwsy_pp_context.drawImage（img，hwsy_pp_width  -  1920，hwsy_pp_height  -  1080,1920,1080）; 
        //hwsy_pp_context.moveTo(0,hwsy_pp_x）; 
        for（var i = 0; 我<170; i = Math.round（i + ping））{
            if（hwsy_pp_Data [i + 10]  -  160> 0）{ 
                bbl = hwsy_pp_Data [i + 10] 
            } else { 
                bbl = 0; 
            } 
            hwsy_pp_context.beginPath（）; 
            hwsy_pp_context.fillStyle = grad; 
            hwsy_pp_context.fillRect（i / 2 * hwsy_pp_l + kuan  -  hwsy_pp_l / 2，hwsy_pp_cen  -  50  -  hwsy_pp_1，bbl）; 
            hwsy_pp_context.beginPath（）; 
            hwsy_pp_context.fillStyle = rgb; 
            hwsy_pp_context.fillRect（i / 2 * hwsy_pp_l + kuan，hwsy_pp_cen  -  50  -  bbl，hwsy_pp_l / 2，bbl）; 
            hwsy_pp_context.fillStyle = grad; 
            hwsy_pp_context.fillRect 2 * hwsy_pp_l + kuan  -  hwsy_pp_l / 2，hwsy_pp_cen + 50，hwsy_pp_l，bbl）; 
            hwsy_pp_context.beginPath（）; 
            hwsy_pp_context.fillStyle = rgb; 
            hwsy_pp_context.fillRect（i / 2 * hwsy_pp_l + kuan，hwsy_pp_cen + 50，hwsy_pp_1 / 2，bbl）; 


            hwsy_pp_context.arc（i / 2 * hwsy_pp_l + kuan + 2.5，hwsy_pp_cen  -  50  -  bbl，hwsy_pp_l / 2 / 2,0，Math.PI * 2，true）; 
            hwsy_pp_context.fill（）; 
            hwsy_pp_cont ext.beginPath（）; 
            hwsy_pp_context.arc（i / 2 * hwsy_pp_l + kuan + 2.5，hwsy_pp_cen + 50 + bbl，hwsy_pp_l / 2 / 2,0，Math.PI * 2，true）; 
            hwsy_pp_context.fill（）; 
            hwsy_pp_context.beginPath（）; 
            juzhong = i / 2/2; 
            //hwsy_pp_context.lineTo(i*hwsy_pp_l,hwsy_pp_x-(hwsy_pp_Data[i+4]-150)*2）; 
        }
hwsy_pp_context.beginPath（）; 
hwsy_pp_context.fillStyle =“＃FFF”; 
        hwsy_pp_context.fillText（hwsy_pp_c_jiet，juzhong * hwsy_pp_l + kuan，hwsy_pp_cen + bbl + 15）; 
        hwsy_pp_context.stroke（）; 
        requestAnimationFrame（AMOE）; 
    } 
    window.onresize = function（）{//如果屏幕分辨率发生改变触发
        hwsy_pp_width = document.body.offsetWidth 
        hwsy_pp_height = document.body.offsetHeight; 
        hwsy_pp_canvas.width = hwsy_pp_width; 
        hwsy_pp_canvas.height = hwsy_pp_height; 
        canvassx（）; 
        kuan = hwsy_pp_width  -  170 * 6; 
        hwsy_pp_cen = hwsy_pp_height / 2; 
    } 


    function canvassx（）{ 
        hwsy_pp_context.beginPath（）; 
        hwsy_pp_context.fillStyle = rgb; 
        hwsy_pp_context.strokeStyle = rgb; 
        hwsy_pp_context.shadowOffsetX = 0; 
        hwsy_pp_context.shadowOffsetY = 0; 
        hwsy_pp_context.shadowBlur = 20; 
        hwsy_pp_context.shadowColor = rgb; 
        hwsy_pp_context.shadowWidth = 3; 
        hwsy_pp_context.lineWidth = 10; 
        hwsy_pp_context.font =“50px Arial”; 
        hwsy_pp_context.textAlign =“center”; 
        grad = hwsy_pp_context.createLinearGradient（0,0,140,​​0）; 
        grad.addColorStop（0，'RGBA（255,255,255,0）'）; //红
        grad.addColorStop（0.5，RGB）; //绿
        grad.addColorStop（1，'RGBA（255,255,255,0）'）; 
    } 




    函数hwsy_pp_mousePosition（E）{//获取鼠标所在位置的坐标，相对于整个页面   
        var x，y; 
        var e = e || window.event;
        返回{ 
            x：e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft，
            y：e.clientY + document.body.scrollTop + document.documentElement.scrollTop 
        }; 
    } 


    document.getElementById（“hwsy_ypt_canvas”）。onmousemove = function（e）{ 
        var hwsy_pp_zhizhen = 0; 
        var hwsy_pp_left = new Array（）; 
        hwsy_pp_left = hwsy_ypt_canvas.getBoundingClientRect（）。left.toString（）。split（“。”）; 
        hwsy_pp_left = hwsy_pp_mousePosition（event）.x  -  hwsy_ypt_canvas.getBoundingClientRect（）。left + parseFloat（“0。”+ hwsy_pp_left [1]） -  document.body.scrollLeft; 
        var hwsy_pp_top = new Array（）; 
        hwsy_pp_top = hwsy_ypt_canvas.getBoundingClientRect（）。top.toString（）。split（“。”）; 
        hwsy_pp_top = hwsy_pp_mousePosition（event）.y  -  hwsy_ypt_canvas.getBoundingClientRect（）。top + parseFloat（“0。”+ hwsy_pp_top [1]） -  document.body.scrollTop; 
        if（hwsy_pp_left> kuan && hwsy_pp_left <kuan + 170 * 5 && hwsy_pp_top> hwsy_pp_cen  -  25 && hwsy_pp_top <hwsy_pp_cen + 25）{ 
            hwsy_pp_zhizhen ++; 
        } 
        if（hwsy_pp_zhizhen！= 0）{ 
            hwsy_pp_canvas.style.cursor =“pointer”; 
            赞ing = true 
        } else { 
hwsy_pp_canvas.style.cursor =“auto”; 
            zanting = false; 
        } 
    } 
    hwsy_pp_canvas.onclick = function（）{ 
        如果（zanting）{ 
            if（play == 0）{ 
                hwsy_pp_video.pause（）; 
                玩++; 
            } else { 
                hwsy_pp_video.play（）; 
                play = 0; 
            } 
        } 
    } 


}