源码下载：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; 我 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 hwsy_pp_cen - 25 && hwsy_pp_top