JSFiddle - React, Tailwind, and code Playground
CSS
body{
margin:0;padding:0;
}
canvas{
background-color:#000;
box-shadow:0 0 16px 0 rgba(0,0,0,0.3);
}
JavaScript
var ajaxB,AC,B,LC,op,x,y,ARRAY=[],W,H=128,C,CW=window.innerWidth,anim,context,source,SR,DIVIDER=512,half=CW/2|0;
var aMax=Math.max.apply.bind(Math.max, Math);
function error(a){
console.log(a);
};
function end(e){
source.removeEventListener('ended',end,false);
webkitCancelAnimationFrame(anim)
}
function animate(){
var S=SR*AC.currentTime/DIVIDER|0;
context.clearRect(0,0,CW,H);
for(var a=-half;a<half;a++){
context.fillStyle='hsla(200,100%,70%,0.7)';
context.fillRect(a+half,64,1,ARRAY[a+S]||0);
context.fillRect(a+half,64,1,-ARRAY[a+S]||0);
}
context.fillStyle='hsla(0,0%,100%,1)';
context.fillRect(half,0,1,H);
anim=webkitRequestAnimationFrame(animate);
};
function playSound(){
source=AC.createBufferSource();
source.addEventListener('ended',end,false);
source.buffer=B;
source.connect(AC.destination);
//source.start(0);
source.noteOn(0);
anim=webkitRequestAnimationFrame(animate);
}
function createArray(a){
ARRAY=[];
SR=AC.sampleRate;
console.log('creatingArray');
B=a;
LC=B.getChannelData(0);// Float32Array describing left channel
L=LC.length;
op=W/L;
W=L/DIVIDER|0;
for(var i=0;i<L;i++){
x=(W*i/L)|0;
y=LC[i]*H/2;
if(ARRAY[x]){
ARRAY[x].push(y)
}else{
!ARRAY[x-1]||(ARRAY[x-1]=aMax(ARRAY[x-1]));
ARRAY[x]=[y]
}
};
playSound()
};
function decode(){
console.log('decodingMusic');
if(source){
source.removeEventListener('ended',end,false);
source.noteOff(0);
AC=null;
};
AC=new webkitAudioContext;
AC.decodeAudioData(this.response||this.result,createArray,error)
};
function loadMusic(url){
console.log('loadingMusicAjax');
ajaxB=new XMLHttpRequest;
ajaxB.open('GET',url);
ajaxB.responseType='arraybuffer';
ajaxB.onload=decode;
ajaxB.send();
}
function readfile(e){
console.log('loadingMusicFile');
var a=new FileReader();
a.onload=decode;
a.readAsArrayBuffer(this.files[0]);
}
function init(){
input=document.createElement('input');
input.type='file';
input.addEventListener('change',readfile,false);
...