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

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