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  -
4000
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;
}
}
}

}