DaCodeMon's Music Visualizer Version 6.5

index.html
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<title>DCM AUDIO VISUALIZER</title>
<!--HI THERE IT'S @DaCodeMon,
I'M GLAD TO SEE YOU ARE INTERESTED IN MY CODE :)
I DO ASK OF ANYONE WHO WANTS TO FORK MY PROJECTS A FEW SIMPLE THINGS:
1: PLEASE LEAVE ME CREDIT FOR MY WORK,
2: PLEASE ALTER THE CODE SOME, I SEE A LOT PROJECTS BASED ON MY ONE WITH VERSION NUMBERS LIKE 1.5.1, .2, ECT; BUT WITH NO ALTERATIONS OR INDENTS
 BUT,NO SERIOUS CHANGES,
SO PLEASE IF YOUR GOING TO CREATE A FORK ON MY PROJECT DO THESE TWO THINGS :) 
AND HAVE FUN WITH IT; THAT'S WHAT IT'S FOR :) 
✌️
-->
<script src="https://openprocessing-usercontent.s3.amazonaws.com/files/user325915/visual2450526/h986c67ffe2a4ed5e4d8e033187501da8/instructions.js"></script>
<script src="https://openprocessing.org/openprocessing_sketch.js"></script>
<script>
var label=false
var imgFlash=false
var doubleEffectH=false
var doubleEffectV=false
var imgFlashMode=1
var currentColorFrom={
r:255,
g:0,
b:0,
changeWithBeat:true
}
var currentColorTo={
r:0,
g:0,
b:255,
changeWithBeat:true
}
var backgroundColor={
r:0,
g:0,
b:100
}
​
var backPreset=0
var shapeMode="speaker"
var loopAudio=false
var labels=[]
</script>
</head>
<body>
<h1>DCM VISUALIZER</h1>
<h1 id="load"></h1>
<button onclick="document.getElementById('load').innerText=''" style="display:none;" id="clear">Clear Instructions</button>
UPLOAD AUDIO HERE:<input type="file" id="file" accept="audio/*" multiple><button onclick="document.getElementById('load').innerText=instructions;document.getElementById('clear').style.display='block'">Instructions</button>
​
<br><custom-tag>Want An Image In The Background? Upload It Here!</custom-tag><input id="image picker" type="file" accept="image/*"> <br><or-other>Or You Can Add Videos Here</or-other><input id="video" type="file" accept=".mp4">
<video id="videoOutput" controls style="display:none"></video>
<br>
<div id="label" style="position:absolute;left:50%;height:30%;width:30%;overflow-y:scroll;z-index:120%;">
<h3>Label Settings</h3>
<button id="label btn">Add Label</button>
<script>
var add=false
document.getElementById('label btn').onclick=function(){
if(add){
labels.push({text:document.getElementById('label-text').value,beginShow:parseFloat(document.getElementById('begin-label').value),duration:parseFloat(document.getElementById('end-label').value),color:{r:parseFloat(document.getElementById('label-color-r').value),g:parseFloat(document.getElementById('label-color-g').value),b:parseFloat(document.getElementById('label-color-b').value),a:parseFloat(document.getElementById('label-color-strength').value)},border:{r:parseFloat(document.getElementById('label-border-r').value),g:parseFloat(document.getElementById('label-border-g').value),b:parseFloat(document.getElementById('label-border-b').value),a:parseFloat(document.getElementById('label-border-strength').value)},fontSize:document.getElementById('label-fontSize').value,x:parseFloat(document.getElementById('label-x').value),y:parseFloat(document.getElementById('label-y').value)})
if(document.getElementById('textbounce').getAttribute('textbounce')==="false"){
labels[labels.length-1].textbounceY="false"
}else{
labels[labels.length-1].textbounceY="true"
}
if(document.getElementById('textbounce-x').getAttribute('textbounce')==="false"){
labels[labels.length-1].textbounceX="false"
}else{
labels[labels.length-1].textbounceX="true"
}
}else{
document.getElementById('begin-label').disabled=false 
document.getElementById('end-label').disabled=false 
document.getElementById('begin-label').value=document.getElementById('audio').currentTime 
document.getElementById('end-label').value=document.getElementById('audio').currentTime+10 
add=true
document.getElementById('text-duration-div').style.display='block'
}
}
</script>
<input id='label-text' placeholder="label text" style="background:linear-gradient(rgb(0,0,100),rgb(0,100,0));color:rgb(100,100,100);">
<br>
<custom-tag>TEXT DURATION</custom-tag><input id="label-duration" type="range" value="200" max="200"><custom-tag id="label-duration-notify"></custom-tag>
<br>
<custom-tag>inner text color</custom-tag>
<br>
<input class="slider" type="range" id="label-color-r" value="255" red=""max="255">
<br>
<input class="slider" type="range" id="label-color-g" value="255" green=""max="255">
<br>
<input class="slider" type="range" id="label-color-b" value="255" blue=""max="255">
<br>
<custom-tag>color strength:</custom-tag><input type="range" class="slider" id="label-color-strength" style="background:linear-gradient(90deg,black,white);" max="255" value="255">
<br>
<custom-tag>label border color</custom-tag>
<br>
<input class="slider" type="range" id="label-border-r" value="255" red="" max="255">
<br>
<input class="slider" type="range" id="label-border-g" value="255" green=""max="255" >
<br>
<input class="slider" type="range" id="label-border-b" value="255" blue=""max="255">
<br>
<custom-tag>border color strength:</custom-tag><input type="range" class="slider" id="label-border-strength" style="background:linear-gradient(90deg,black,white);" max="255" value="255">
<br>
<custom-tag>Text Size</custom-tag><input id="label-fontSize" type="range" value="20" max="100">
<br>
<custom-tag>Position X:</custom-tag><input id="label-x" max="400" type="range" value="0">
<br><custom-tag>Position Y:</custom-tag><input id="label-y" max="400" type="range" value="200">
<br>
<button id="textbounce" textbounce="false" onclick="if(document.getElementById('textbounce').getAttribute('textbounce')==='false'){document.getElementById('textbounce').setAttribute('textbounce','true');document.getElementById('textbounce').innerText='Bounce To Beat Y-Axis:on'}else{document.getElementById('textbounce').setAttribute('textbounce','false');document.getElementById('textbounce').innerText='Bounce To Beat Y-Axis:off'}">Bounce To The Beat? Y-Axis</button>
<button id="textbounce-x" textbounce="false" onclick="if(document.getElementById('textbounce-x').getAttribute('textbounce')==='false'){document.getElementById('textbounce-x').setAttribute('textbounce','true');document.getElementById('textbounce-x').innerText='Bounce To Beat X-Axis:on'}else{document.getElementById('textbounce-x').setAttribute('textbounce','false');document.getElementById('textbounce-x').innerText='Bounce To Beat X-Axis:off'}">Bounce To The Beat? X-Axis</button>
</div>
<canvas id="canvas" width="400" height="400"></canvas>
<br>
<div id="mediaplayer">
VOLUME:<input id="audV" onchange="setInterval(function(){document.getElementById('audio').volume=parseInt(document.getElementById('audV').value)/100},1)"type="range"min="0"max="100"value="20" class="slider" style="background:linear-gradient(90deg,green,red)">
<button id="btn" disabled>Play</button><button id="prev">|&lt &lt Previous</button><button id="skip">Skip &gt &gt|</button>
<button onclick="document.getElementById('audio').pause()">Stop</button><button id="record">Record OutPut</button>
<button onclick="loopAudio=true">Loop Audio</button>
<br>
<custom-tag id="seek text">Seek 0:</custom-tag><input disabled id="duration" type="range" value="0" style="width:30%;webkit-appearance:none;background:linear-gradient(90deg,black,blue);"><custom-tag id="end time">END TIME</custom-tag>
<br>
<div id="text-duration-div" style="display:none;">
<h3>TEXT DURATION</h3>
<custom-tag>begin:</custom-tag><input disabled id="begin-label" type="range" value="0" style="width:30%;webkit-appearance:none;background:linear-gradient(90deg,black,blue);"><br>
<custom-tag>__end:</custom-tag><input disabled id="end-label" type="range" value="0" style="width:30%;webkit-appearance:none;background:linear-gradient(90deg,black,blue);">
</div>
<script id="responder">
​
setInterval(function(){
if(document.getElementById('end time').innerText==='NaN'||document.getElementById('end time').innerText==='END TIME:NaN'){
try{
document.getElementById('duration').max=document.getElementById('audio').duration
document.getElementById('end time').innerText='END TIME:'+document.getElementById('duration').max
document.getElementById('label-duration').max=document.getElementById('duration').max
document.getElementById('label-duration-notify').innerText=document.getElementById('duration').max
document.getElementById('label-duration-display-canvas').width=window.screen.availWidth*0.3
​
}catch(e){}
}
},1000)
​
</script>
<audio id="audio" ></audio>
</div>
​
​
<br>
<div id="imgflash-div" >
<script>
let IMGFLASHRED=false
let IMGFLASHGREEN=false
let IMGFLASHBLUE=false
</script>
<button onclick="if(imgFlash){imgFlash=false;document.getElementById('imgFlash').innerText='turn on IMGFLASH'}else{imgFlash=true;document.getElementById('imgFlash').innerText='turn off IMGFLASH'}">Turn off IMGFLASH</button>
<br>
IMGFLASH MODES:<button onclick="imgFlashMode=1">1</button><button onclick="imgFlashMode=2">2</button>
<button onclick="imgFlashMode=3">3</button>
<button onclick="imgFlashMode=4">4</button>
<button onclick="imgFlashMode=5">5</button>
<button onclick="imgFlashMode=6">6</button>
<button onclick="imgFlashMode=7">7</button>
<button onclick="imgFlashMode=8">8</button>
<button onclick="imgFlashMode=9">9</button>
<button onclick="imgFlashMode=10">10</button>
<button onclick="imgFlashMode=11">11</button>
<button onclick="imgFlashMode=12">12</button>
<button onclick="imgFlashMode=13">13</button>
<div id="custom-imgflash">
<h3>CUSTOM IMGFLASH COLOR MENU #13</h3>
​
<custom-tag>RED:</custom-tag><custom-tag id="igf-red"></custom-tag><input id="imgFlash-red" type="range" style="background:linear-gradient(90deg,red,black,red);" class="slider" max="255" min="-255"><button onclick="if(IMGFLASHRED){IMGFLASHRED=false}else{IMGFLASHRED=true}">Change To Music</button>
<br>
<custom-tag>GREEN:</custom-tag>
<custom-tag id="igf-green"></custom-tag>
<input id="imgFlash-green" type="range" style="background:linear-gradient(90deg,green,black,green);" class="slider" max="255" min="-255"><button onclick="if(IMGFLASHGREEN){IMGFLASHGREEN=false}else{IMGFLASHGREEN=true}">Change To Music</button>
<br>
<custom-tag>BLUE:</custom-tag>
<custom-tag id="igf-blue"></custom-tag>
<input id="imgFlash-blue" type="range" style="background:linear-gradient(90deg,blue,black,blue);" class="slider" max="255" min="-255"><button onclick="if(IMGFLASHBLUE){IMGFLASHBLUE=false}else{IMGFLASHBLUE=true}">Change To Music</button>
<br>
<custom-tag>FLASH AT:</custom-tag>
<custom-tag id="igf-flash"></custom-tag>
<input id="imgFlash-value"type="range" class="slider" style="background:linear-gradient(90deg,green,black);" max="255" step="0.1">
<script>
var IMGFLASH={
red:255,
green:255,
blue:255,
flashAt:100
}
document.getElementById('imgFlash-red').onchange=function(){
IMGFLASH.red=Number(document.getElementById('imgFlash-red').value)
document.getElementById('igf-red').innerText=document.getElementById('imgFlash-red').value
}
document.getElementById('imgFlash-green').onchange=function(){
IMGFLASH.green=Number(document.getElementById('imgFlash-green').value)
document.getElementById('igf-green').innerText=document.getElementById('imgFlash-green').value
}
document.getElementById('imgFlash-blue').onchange=function(){
IMGFLASH.blue=Number(document.getElementById('imgFlash-blue').value)
document.getElementById('igf-blue').innerText=document.getElementById('imgFlash-blue').value
}
document.getElementById('imgFlash-value').onchange=function(){
IMGFLASH.flashAt=Number(document.getElementById('imgFlash-value').value)
document.getElementById('igf-flash').innerText=document.getElementById('imgFlash-value').value
}
</script>
</div>
</div>
<br>
<button onclick="backPreset=0">TURN OFF BACKPRESET MODE</button>
<button onclick="backPreset=1">BACK PRESET1</button>
<button onclick="backPreset=2">BACK PRESET2</button>
<button onclick="backPreset=3">BACK PRESET3</button>
<br>
<button onclick="backPreset=4">BACK PRESET4</button>
<button onclick="backPreset=5">BACK PRESET5</button><button onclick="backPreset=6">BACK PRESET6 (requires image or video in the background)</button>
<br>
<div>
<custom-tag>Canvas size adjusters</custom-tag>
<br>
<custom-tag>Width:</custom-tag><input id="canvas-width" type="range" min="1" max="1600" value="400">
<br>
<custom-tag>Height:</custom-tag><input id="canvas-height" type="range" min="1" max="1600" value="400">
<script>
document.getElementById('canvas-width').onchange=function(){
document.getElementById('canvas').style.width=document.getElementById('canvas-width').value+'px'
}
document.getElementById('canvas-height').onchange=function(){
document.getElementById('canvas').style.height=document.getElementById('canvas-height').value+'px'
}
</script>
</div>
<br>
<br><custom-tag>Want a double picture effect? This effect requires a high amount of processing power to complete, and may be a little glitchey.</custom-tag><br>
<br><button onclick="if(doubleEffectH){doubleEffectH=false}else{doubleEffectH=true}">double effect horizontal</button>
<button onclick="if(doubleEffectV){doubleEffectV=false}else{doubleEffectV=true}">double effect vertical</button>
​
<div id="shape menu" style="position:absolute;top:60%;left:50%;width:48%;height:30%;overflow-y:scroll;">
<div id="color-menu">
FROM
<br>
RED:<input id="red-slider" type="range" value="255" max="255" class="slider">
GREEN:<input id="green-slider" type="range" value="0" max="255" class="slider">
BLUE:<input id="blue-slider" type="range" value="0" max="255" class="slider">
<br>
Use sliders or enter color:<input id="color from input" placeholder="color name"><button id="checkcf">Submit</button>
<script>
var output=[]//for canvas recorder
var loopAudio=false
document.getElementById("checkcf").onclick=function(){
var color=document.getElementById("color from input").value 
color=color.toLowerCase()
if(color==="red"){
document.getElementById("red-slider").value=255
document.getElementById("green-slider").value=0
document.getElementById("blue-slider").value=0
}
if(color==="green"){
document.getElementById("red-slider").value=0
document.getElementById("green-slider").value=255
document.getElementById("blue-slider").value=0
}
if(color==="green"){
document.getElementById("green-slider").value=255
document.getElementById("blue-slider").value=0
document.getElementById("red-slider").value=0
}
if(color==="yellow"){
document.getElementById("red-slider").value=255
document.getElementById("green-slider").value=255
document.getElementById("blue-slider").value=0
}
if(color==="turquiose"){
document.getElementById("red-slider").value=0
document.getElementById("green-slider").value=255
document.getElementById("blue-slider").value=255
}
if(color==="purple"){
document.getElementById("red-slider").value=255
document.getElementById("green-slider").value=0
document.getElementById("blue-slider").value=255
}
if(color==="pink"){
document.getElementById("red-slider").value=255
document.getElementById("green-slider").value=0
document.getElementById("blue-slider").value=150
}
if(color==="orange"){
document.getElementById("red-slider").value=255
document.getElementById("green-slider").value=150
document.getElementById("blue-slider").value=0
}
if(color==="black"){
document.getElementById("red-slider").value=0
document.getElementById("green-slider").value=0
document.getElementById("blue-slider").value=0
}
if(color==="white"){
document.getElementById("red-slider").value=255
document.getElementById("green-slider").value=250
document.getElementById("blue-slider").value=250
}
currentColorFrom.r=parseInt(document.getElementById("red-slider").value)
currentColorFrom.g=parseInt(document.getElementById("green-slider").value)
currentColorFrom.b=parseInt(document.getElementById("blue-slider").value)
}
var keepAudioVolume=false
</script>
<view-block>
Your Shape Color
</view-block>
<button  onclick="currentColorFrom.changeWithBeat=false">Change Brightness To Beat Off</button>
<style>
.slider{
-webkit-appearance:none;
}
#red-slider{
background:linear-gradient(90deg,black,red);
}
#green-slider{
background:linear-gradient(90deg,black,green);
}
#blue-slider{
background:linear-gradient(90deg,black,blue);
}
view-block{
width:5rem;
height:5rem;
border:1px solid black;
}
</style>
<br>
<br>
TO
<br>
RED:<input id="red-slider-to" type="range" value="0" max="255" class="slider">
GREEN:<input id="green-slider-to" type="range" value="0" max="255" class="slider">
BLUE:<input id="blue-slider-to" type="range" value="255" max="255" class="slider">
<br>
Use sliders or enter color name:<input id="color to input" placeholder="color name"><button id="check2">SUBMIT</button>
<view-block-to>
Your Shape Color
</view-block-to>
<script>
var pNum=0
document.getElementById("audio").onstop=function(){if(document.getElementById('file').files.length>1){
console.log('r1')
pNum++
var read=new FileReader()
read.onload=function(){document.getElementById('audio').src=read.result;
document.getElementById('audio').play()
console.log('read')
}
read.readAsDataURL(document.getElementById('file').files[pNum])
​
}
if(loopAudio){
document.getElementById("audio").play()
}
}
document.getElementById("check2").onclick=function(){
var color=document.getElementById("color to input").value
color=color.toLowerCase()
if(color==="red"){
document.getElementById("red-slider-to").value=255
document.getElementById("green-slider-to").value=0
document.getElementById("blue-slider-to").value=0
}
if(color==="green"){
document.getElementById("red-slider-to").value=0
document.getElementById("green-slider-to").value=255
document.getElementById("blue-slider-to").value=0
}
if(color==="green"){
document.getElementById("blue-slider-to").value=255
document.getElementById("green-slider-to").value=0
document.getElementById("red-slider-to").value=0
}
if(color==="yellow"){
document.getElementById("red-slider-to").value=255
document.getElementById("green-slider-to").value=255
document.getElementById("blue-slider-to").value=0
}
if(color==="turquiose"){
document.getElementById("red-slider-to").value=0
document.getElementById("green-slider-to").value=255
document.getElementById("blue-slider-to").value=255
}
if(color==="purple"){
document.getElementById("red-slider-to").value=255
document.getElementById("green-slider-to").value=0
document.getElementById("blue-slider-to").value=255
}
if(color==="pink"){
document.getElementById("red-slider-to").value=255
document.getElementById("green-slider-to").value=0
document.getElementById("blue-slider-to").value=150
}
if(color==="orange"){
document.getElementById("red-slider-to").value=255
document.getElementById("green-slider-to").value=150
document.getElementById("blue-slider-to").value=0
}
if(color==="black"){
document.getElementById("red-slider-to").value=0
document.getElementById("green-slider-to").value=0
document.getElementById("blue-slider-to").value=0
}
if(color==="white"){
document.getElementById("red-slider-to").value=255
document.getElementById("green-slider-to").value=250
document.getElementById("blue-slider-to").value=250
}
currentColorTo.r=parseInt(document.getElementById("red-slider-to").value)
currentColorTo.g=parseInt(document.getElementById("green-slider-to").value)
currentColorTo.b=parseInt(document.getElementById("blue-slider-to").value)
}
</script>
<button onclick="currentColorTo.changeWithBeat=false">Change Brightness To Beat Off</button>
<br>
<br>
COLOR TRANSITION RATE:<input id="cts" type="range" min="0" max="20"><c-t id="cts-value"></c-t><br>
BRIGHTNESS CHANGE STRENGTH:<input id="bcs" type="range" min="0" max="400">
<style>
#red-slider-to{
background:linear-gradient(90deg,black,red);
}
#green-slider-to{
background:linear-gradient(90deg,black,green);
}
#blue-slider-to{
background:linear-gradient(90deg,black,blue);
}
view-block-to{
width:5rem;
height:5rem;
border:1px solid black;
}
</style>
​
</div>
<button onclick="tune=true">Time video to beat</button>
<button onclick="currentShape=''">No Shape</button>
<button onclick="currentShape='speaker'">SPEAKER</button>
<button id='pyramid'>PYRAMID</button>
<button id="sphere" onclick="currentShape='sphere'">SPHERE</button>
<button id="square" onclick="currentShape='square'">SQUARES</button>
<button id="cube" onclick="currentShape='cube'">CUBE</button>
<button onclick="currentShape='circle'">CIRCLES</button>
<button onclick="currentShape='triangle'">TRIANGLES</button>
<button onclick="currentShape='cross'">CROSS</button>
<button onclick="currentShape='lines'">LINES</button>
<button onclick="currentShape='lines vertical from right'">LINES VERTICAL RIGHT</button>
<button onclick="currentShape='lines vertical from left'">LINES VERTICAL LEFT</button>
<button onclick="currentShape='lines top'">LINES HORIZONTAL TOP</button>
​
USE IMAGE:<input type="file" id="vImg" accept="image/*">
<script>
var vImg=''
document.getElementById("vImg").onchange=function(){
var f=new FileReader()
f.onload=function(){
var i=new Image()
i.src=f.result
i.width=400
i.height=400
vImg=i
​
}
f.readAsDataURL(document.getElementById('vImg').files[0])
}
</script>
</div>
<br>
<br>
<div id="background menu">
<h3>BACKGROUND COLOR MENU</h3>
<p>FROM</p>
RED:<input id="br" type="range" min="0" max="255"class="slider" value="0">
​
GREEN:<input id="bg" type="range" min="0" max="255"class="slider" value="0">
​
BLUE:<input id="bb" type="range" min="0" max="255"class="slider" value="100">
<br>
<p>TO</p>
RED:<input id="tbr" type="range" min="0" max="255"class="slider" value="0">
​
GREEN:<input id="tbg" type="range" min="0" max="255"class="slider" value="0">
​
BLUE:<input id="tbb" type="range" min="0" max="255"class="slider" value="100">
</div>
<style>
input[range]{
-webkit-appearance:none;
}
#br{
background:linear-gradient(90deg,black,red);
}
#bg{
background:linear-gradient(90deg,black,green);
}
#bb{
background:linear-gradient(90deg,black,blue);
}
#tbr{
background:linear-gradient(90deg,black,red);
}
#tbg{
background:linear-gradient(90deg,black,green);
}
#tbb{
background:linear-gradient(90deg,black,blue);
}
view-block-to{
width:5rem;
height:5rem;
border:1px solid black;
}
</style>
​
<script src="https://deckard.openprocessing.org/user325915/visual2450526/h986c67ffe2a4ed5e4d8e033187501da8/pjs-translator.js"></script>
<script src="https://deckard.openprocessing.org/user325915/visual2450526/h986c67ffe2a4ed5e4d8e033187501da8/CG.P.js"></script>
<script>
​
var tune=false
setCanvas("canvas")
newGradientLine(20,0,20,0,[0,20,20],[200,200,200],1,false,2)
var videoStream=document.getElementById("canvas").captureStream(30)
var cam=new MediaRecorder(videoStream)
cam.onstop=function(){
var blob=new Blob(output,{type:"video/mp4"})
var link=URL.createObjectURL(blob)
var vid=document.getElementById("videoOutput")
vid.src=URL.createObjectURL(blob)
vid.style.display="block"
vid.controls=true
}
cam.ondataavailable=function(e){
output.push(e.data)
}
document.getElementById("record").onclick=function(){
document.getElementById('seek text').innerText='seek is disabled during recording process\n to prevent misalignment in the output video.'
document.getElementById('duration').disabled=true
document.getElementById("audio").currentTime=0
document.getElementById("audio").play()
cam.start()
}
document.getElementById("audio").onended=function(){
cam.stop()
if(loopAudio){
document.getElementById('audio').play()
}
if(document.getElementById('file').files.length>1){
console.log('r1')
pNum++
var read=new FileReader()
read.onload=function(){document.getElementById('audio').src=read.result;
document.getElementById('audio').play()
var trackNum=pNum+1
document.getElementById('load').innerText="PLAYING TRACK "+trackNum+" OUT OF "+document.getElementById('file').files.length
​
}
read.readAsDataURL(document.getElementById('file').files[pNum])
​
}
}
var labels=[]
document.getElementById("br").onchange=function(){
backgroundColor.r=parseInt(document.getElementById("br").value)
backgroundColor.g=parseInt(document.getElementById("bg").value)
backgroundColor.b=parseInt(document.getElementById("bb").value)
}
document.getElementById("bg").onchange=function(){
backgroundColor.r=parseInt(document.getElementById("br").value)
backgroundColor.g=parseInt(document.getElementById("bg").value)
backgroundColor.b=parseInt(document.getElementById("bb").value)
}
document.getElementById("bb").onchange=function(){
backgroundColor.r=parseInt(document.getElementById("br").value)
backgroundColor.g=parseInt(document.getElementById("bg").value)
backgroundColor.b=parseInt(document.getElementById("bb").value)
}
var currentCTS=0.01
var bcs=255 
document.getElementById("bcs").onchange=function(){
bcs=document.getElementById("bcs").value
}
document.getElementById("cts").onchange=function(){
currentCTS=document.getElementById("cts").value*0.001
document.getElementById("cts-value").innerText=currentCTS
}
document.getElementById("red-slider").onchange=function(){
var r=document.getElementById("red-slider").value
var g=document.getElementById("green-slider").value
var b=document.getElementById("blue-slider").value
document.querySelector("view-block").style.backgroundColor="rgb("+r+","+g+","+b+")"
currentColorFrom.r=r
currentColorFrom.g=g
currentColorFrom.b=b
}
document.getElementById("green-slider").onchange=function(){
var r=document.getElementById("red-slider").value
var g=document.getElementById("green-slider").value
var b=document.getElementById("blue-slider").value
document.querySelector("view-block").style.backgroundColor="rgb("+r+","+g+","+b+")"
currentColorFrom.r=r
currentColorFrom.g=g
currentColorFrom.b=b
}
document.getElementById("blue-slider").onchange=function(){
var r=document.getElementById("red-slider").value
var g=document.getElementById("green-slider").value
var b=document.getElementById("blue-slider").value
document.querySelector("view-block").style.backgroundColor="rgb("+r+","+g+","+b+")"
currentColorFrom.r=r
currentColorFrom.g=g
currentColorFrom.b=b
}
document.getElementById("red-slider-to").onchange=function(){
var r=document.getElementById("red-slider-to").value
var g=document.getElementById("green-slider-to").value
var b=document.getElementById("blue-slider-to").value
document.querySelector("view-block-to").style.backgroundColor="rgb("+r+","+g+","+b+")"
currentColorTo.r=r
currentColorTo.g=g
currentColorTo.b=b
}
document.getElementById("green-slider-to").onchange=function(){
var r=document.getElementById("red-slider-to").value
var g=document.getElementById("green-slider-to").value
var b=document.getElementById("blue-slider-to").value
document.querySelector("view-block-to").style.backgroundColor="rgb("+r+","+g+","+b+")"
currentColorTo.r=r
currentColorTo.g=g
currentColorTo.b=b
}
document.getElementById("blue-slider-to").onchange=function(){
var r=document.getElementById("red-slider-to").value
var g=document.getElementById("green-slider-to").value
var b=document.getElementById("blue-slider-to").value
document.querySelector("view-block-to").style.backgroundColor="rgb("+r+","+g+","+b+")"
currentColorTo.r=r
currentColorTo.g=g
currentColorTo.b=b
}
newSphere(0,0,3,3,[200,0,0],[0,0,0],1,3)
newPyramid(0,0,200,0,400,0,[0,0,0],[0,0,0],2,50)
var currentShape="speaker"
var tl=false
var img
var imgIs=null
var track={
squares:{
amount:-1,
colors:[],
},
trgl:{
amount:-1,
colors:[]
},
circles:{
amount:-1,
colors:[]
},
pyramids:{
amount:-1,
colors:[]
},
cubes:{
amount:-1,
colors:[]
},
}
document.getElementById("pyramid").onclick=function(){
currentShape="pyramid"
document.getElementById("shape menu").style.display="block"
}
document.getElementById("video").onchange=function(){
var read=new FileReader()
document.getElementById("load").innerText="LOADING..."
read.onload=function(){
document.getElementById("load").innerText=""
img=document.createElement("video")
img.src=read.result
img.style.display="none"
imgIs="v"
img.id="uploadedVideo"
img.muted=true
document.body.appendChild(img)
}
read.readAsDataURL(document.getElementById("video").files[0])
}
document.getElementById("image picker").onchange=function(){
var read=new FileReader()
read.onload=function(){
img=document.createElement("img")
img.src=read.result
imgIs="i"
}
read.readAsDataURL(document.getElementById("image picker").files[0])
}
var file=document.getElementById("file")
document.getElementById('skip').onclick=function(){
document.getElementById('audio').pause()
pNum++
var read=new FileReader()
document.getElementById('load').innerText="LOADING..."
read.onload=function(){
var trackNum=pNum+1
document.getElementById('load').innerText="NOW PLAYING TRACK "+trackNum+" OUT OF "+document.getElementById('file').files.length 
document.getElementById('audio').src=read.result
document.getElementById('audio').play()
​
}
read.readAsDataURL(document.getElementById('file').files[pNum])
}
document.getElementById('prev').onclick=function(){
document.getElementById('audio').pause()
pNum--
var read=new FileReader()
document.getElementById('load').innerText="LOADING..."
read.onload=function(){
var trackNum=pNum+1
document.getElementById('load').innerText="NOW PLAYING TRACK "+trackNum+" OUT OF "+document.getElementById('file').files.length 
document.getElementById('audio').src=read.result
document.getElementById('audio').play()
}
read.readAsDataURL(document.getElementById('file').files[pNum])
}
var gradient=ctx.createLinearGradient(0,0,400,400)
gradient.addColorStop(0,'black')
​
file.onchange=function(){
pNum=0
document.getElementById("btn").disabled=true
var reader=new FileReader()
document.getElementById('load').innerText="Loading..."
reader.onload=function(){
document.getElementById('duration').disabled=false
document.getElementById('load').innerText=''
document.getElementById("btn").disabled=false 
document.getElementById("audio").src=reader.result
setTimeout(function(){
document.getElementById('duration').max=document.getElementById('audio').duration
document.getElementById('duration').value=0
document.getElementById('end time').innerText=document.getElementById('duration').max
document.getElementById('duration').onchange=function(){
document.getElementById('audio').currentTime=document.getElementById('duration').value
}
setInterval(function(){
document.getElementById('duration').value=document.getElementById('audio').currentTime
},1000)
},300)
document.getElementById("btn").onclick=function(){
​
var trackNum=pNum+1
document.getElementById('load').innerText="NOW PLAYING TRACK "+trackNum+" OUT OF "+document.getElementById('file').files.length
const audioCtx=new AudioContext();var audio=document.getElementById("audio")
var audioSource,analyzer,x,barHeight,barWidth 
var ctx=document.getElementById("canvas").getContext("2d")
audio.play()
if(imgIs==="v"){
img.play()
}
audioSource=audioCtx.createMediaElementSource(audio)
analyzer=audioCtx.createAnalyser()
audioSource.connect(analyzer)
analyzer.connect(audioCtx.destination)
analyzer.fftSize=64
const buffer=analyzer.frequencyBinCount 
const data=new Uint8Array(buffer)
barWidth=400/buffer
setInterval(function(){
setCanvas("canvas")
ctx.clearRect(0,0,400,400)
x=0
​
analyzer.getByteFrequencyData(data)
​
for(var i=0;i<data.length;i+=32){
var d=data[i]
​
if(tune){
var duration=document.getElementById("uploadedVideo").duration 
var dd2=d/duration
dd2=dd2
​
document.getElementById("uploadedVideo").playbackRate=255/d
document.getElementById("uploadedVideo").currentTime-=255/dd2}
var br=backgroundColor.r/2
var bg=backgroundColor.g/2
var bb=backgroundColor.b/2
var bd2r=0
if(br>0){
 bd2r=d/2
}
var bd2g=0
if(bg>0){
 bd2g=d/2
}
var bd2b=0
if(bb>0){
 bd2b=d/2
}
ctx.clearRect(0,0,400,400)
if(typeof(img)!=="undefined"){
ctx.drawImage(img,0,0,400,400)
if(imgFlash){
var imgD=ctx.getImageData(0,0,400,400)
for(var i=0;i<imgD.data.length;i++){
if(imgFlashMode===1){
if(d>=180){
imgD.data[i*4]+=d*0.5
imgD.data[i*4+1]+=d*0.5
imgD.data[i*4+2]+=d*0.5
}else{
imgD.data[i*4]-=d*0.5
imgD.data[i*4+1]-=d*0.5
imgD.data[i*4+2]-=d*0.5
}
}
if(imgFlashMode===2 && imgFlash){
if(d>=200){
imgD.data[i*4]+=d*0.5
imgD.data[i*4+1]+=d*0.5
imgD.data[i*4+2]+=d*0.5
}
}
if(imgFlashMode===3 && imgFlash){
if(d>=180){
imgD.data[i*4]-=d*0.5
imgD.data[i*4+1]-=d*0.5
imgD.data[i*4+2]-=d*0.5
}
}
if(imgFlashMode===4 && imgFlash){
if(d>=200){
imgD.data[i*4]-=d/10
imgD.data[i*4+1]-=d*0.5
imgD.data[i*4+2]-=d*0.5
}
}
if(imgFlashMode===5 && imgFlash){
if(d>=200){
imgD.data[i*4]+=d*0.5
imgD.data[i*4+1]+=d*0.6
imgD.data[i*4+2]+=d*0.7
}
}
if(imgFlashMode===6 && imgFlash){
if(d>=150){
imgD.data[i*4]+=d*0.6
imgD.data[i*4+1]+=d*0.7
imgD.data[i*4+2]+=d*0.8
}
}
if(imgFlashMode===7 && imgFlash){
if(d>=150){
imgD.data[i*4]+=d*0.7
imgD.data[i*4+1]+=d*0.6
imgD.data[i*4+2]+=d*0.7
}
}
if(imgFlashMode===8 && imgFlash){
​
imgD.data[i*4]+=d*0.5
imgD.data[i*4+1]+=d*0.6
imgD.data[i*4+2]+=d*0.7
​
}
if(imgFlashMode===9 && imgFlash){
imgD.data[i*4]-=d*0.5
imgD.data[i*4+1]-=d*0.6
imgD.data[i*4+2]-=d*0.7
​
}
if(imgFlashMode===10 && imgFlash){
imgD.data[i*4]+=d*0.5
}
if(imgFlashMode===11 && imgFlash){
imgD.data[i*4+1]+=d*0.5
}
if(imgFlashMode===12 && imgFlash){
imgD.data[i*4+2]+=d*0.7
}
if(imgFlashMode===13 && imgFlash){
if(d>=IMGFLASH.flashAt){
if(IMGFLASHRED===false){
imgD.data[i*4]+=IMGFLASH.red
}else{
imgD.data[i*4]+=d*0.5+IMGFLASH.red
}
if(IMGFLASHGREEN===false){
imgD.data[i*4+1]+=IMGFLASH.green
}else{
imgD.data[i*4+1]+=d*0.5+IMGFLASH.green
}
if(IMGFLASHBLUE===false){
imgD.data[i*4+2]+=IMGFLASH.blue
}else{
imgD.data[i*4+2]+=d*0.5+IMGFLASH.blue
}
}
}
}
​
​
​
ctx.putImageData(imgD,0,0)
}
}
​
x+=barWidth
if(typeof(img)==="undefined"){
var r=br+bd2r
var g=bg+bd2g
var b=bb+bd2b
var gradient=''
var gradient=ctx.createLinearGradient(0,0,400,400)
gradient.addColorStop(0,'rgb('+r+','+g+','+b+')')
var fr=parseFloat(document.getElementById("tbr").value)/2+bd2g
var fg=parseFloat(document.getElementById("tbg").value)/2+bd2g
var fb=parseFloat(document.getElementById("tbb").value)/2+bd2g
var rgb='rgb('+fr+','+fg+','+fb+')'
gradient.addColorStop(d*0.0035,rgb)
//gradient.addColorStop(1,'black')
//fill(br+bd2r,bg+bd2g,bb+bd2b)
ctx.fillStyle=gradient
ctx.fillRect(0,0,400,400)
​
}
var r=currentColorFrom.r
var g=currentColorFrom.g
var b=currentColorFrom.b
if(currentColorFrom.changeWithBeat){
var beat=d/bcs
r=r*beat
g=g*beat
b=b*beat
}
var colorToR=currentColorTo.r
var colorToG=currentColorTo.g
var colorToB=currentColorTo.b
if(backPreset===1){
backgroundColor={r:0,g:0,b:0}
for(var i=0;i<d;i+=5){
fill(0,0,0,0)
stroke(0,255,0)
ellipse(200,200,d-i,d-i)
}
}
if(backPreset===2){
backgroundColor={r:0,g:0,b:0}
for(var i=0;i<d;i+=5){
fill(0,0,0,0)
stroke(0,255,0)
var e=d/4
rect(0,400,e-i,e-i)
rect(e*2,400,e-i,e-i)
rect(0,e,e-i+400,e-i)
rect(e*2,e,e-i+400,e-i)
rect(e*4,e-i+400,e-i+400,e-i)
rect(e,e-i+400,e-i+400,e-i)
}
}
if(backPreset===3){
backgroundColor={r:0,g:0,b:0}
for(var i=0;i<400;i+=50){
stroke(0,d,0)
ctx.beginPath()
line(i,0,i,400)
ctx.closePath()
}
for(var i=0;i<400;i+=55){
stroke(0,0,d)
ctx.beginPath()
line(0,i,400,i)
ctx.closePath()
}
}
if(backPreset===4){
redrawShape("pyramid",0,[0,0,0],[0,d,0],0,[["y2",d]])
ctx.closePath()
redrawShape("pyramid",0,[0,0,0],[0,d,0],0,[["y2",400-d],["y",400],["y3",400]])
}
if(backPreset===5){
ncs(400-d,400-d,200-d,200-d,400-d,400-d,400,400,[0,0,d],[colorToR,d,colorToB],2,50)
}
if(backPreset===6){
​
if(d>20){
for(var i=0;i<400;i+=d/10){
for(var j=0;j<d*2;j+=d/5){
redrawShape("sphere",0,[br+bd2r,bg+bd2g,bb+bd2b],[colorToR,colorToG,colorToB],0,[["x",i],["y",j],["w",d/5],["h",d/5]])
}
}
}
}
​
if(currentColorTo.changeWithBeat){
var beat=d/bcs
var bt=beat
colorToR=colorToR*bt
colorToG=colorToG*bt
colorToB=colorToB*bt
}
​
if(currentShape==="square"){
for(var j=0;j<data.length;j++){
fill(0,0,0,0)
stroke(r+data[j]/10,g+data[j]/10,b+data[j]/10)
rect(100,100,data[j],data[j])
}
}
if(currentShape==="circle"){
for(var j=0;j<data.length;j++){
fill(0,0,0,0)
stroke(r+data[j]/10,g+data[j]/10,b+data[j]/10)
ellipse(150,150,data[j],data[j])
}
}
if(currentShape==="triangle"){
fill(0,0,0,0)
for(var j=0;j<data.length;j++){
stroke(r+data[j]/10,g+data[j]/10,b+data[j]/10)
triangle(150,150,data[j],150+data[j],data[j],data[j])
}
}
if(currentShape==="speaker"){
newSphere(200,200,d,d,[r,g,b],[colorToR,colorToG,colorToB],d*currentCTS,d*0.5)
newSphere(200,200,d,d,[r,g,b],[colorToR,colorToG,colorToB],d*currentCTS,d*0.05)
fill(r,g,b)
stroke(colorToR,colorToB,colorToB)
ellipse(200,200,d*0.25,d*0.25)
}
if(currentShape==="pyramid"){
noFill()
newPyramid(0,390,200,0,400,390,[r,g,b],[colorToR,colorToG,colorToB],d*currentCTS,d*0.5)
}
if(currentShape==="cube"){
newCube(100,100,d,d,[r,g,b],[colorToR,colorToG,colorToB],d*currentCTS,d*0.5)
}
if(currentShape==="sphere"){
newSphere(200,200,d,d,[r,g,b],[colorToR,colorToG,colorToB],d*currentCTS/2,d)
}
if(currentShape==="cross"){
fill(r,g,b)
stroke(colorToR,colorToG,colorToB)
strokeWeight(5)
rect(150,50,50,350)
rect(50,80,250,50)
strokeWeight(1)
}
​
if(currentShape==="lines"){
var grad=ctx.createLinearGradient(0,0,400,400)
grad.addColorStop(0,'rgb('+r+','+g+','+b+')')
grad.addColorStop(1,'rgb('+colorToR+','+colorToG+','+colorToB+')')
ctx.closePath()
for(var i=50;i<400;i+=50){
for(var j=0;j<data.length;j++){
beginShape()
ctx.strokeStyle=grad
line(j*10,400,j*10,400-data[j])
ctx.closePath()
}
}
strokeWeight(1);
}
if(currentShape==="lines top"){
var grad=ctx.createLinearGradient(0,0,400,400)
grad.addColorStop(0,'rgb('+r+','+g+','+b+')')
grad.addColorStop(0.5,'rgb('+colorToR+','+colorToG+','+colorToB+')')
grad.addColorStop(1,'rgb('+colorToR+','+colorToG+','+colorToB+')')
ctx.closePath()
for(var i=50;i<400;i+=50){
for(var j=0;j<data.length;j++){
beginShape()
ctx.strokeStyle=grad
line(j*10,0,j*10,data[j])
ctx.closePath()
}
}
strokeWeight(1);
}
if(currentShape==="lines vertical from right"){
var grad=ctx.createLinearGradient(0,0,400,400)
grad.addColorStop(0,'rgb('+r+','+g+','+b+')')
grad.addColorStop(0.5,'rgb('+colorToR+','+colorToG+','+colorToB+')')
grad.addColorStop(1,'rgb('+colorToR+','+colorToG+','+colorToB+')')
for(var i=50;i<400;i+=50){
for(var j=0;j<data.length;j++){
beginShape()
ctx.strokeStyle=grad
line(0,j*10,data[j],j*10)
ctx.closePath()
}
}
strokeWeight(1)
}
if(currentShape==="lines vertical from left"){
var grad=ctx.createLinearGradient(0,0,400,400)
grad.addColorStop(0,'rgb('+r+','+g+','+b+')')
grad.addColorStop(0.5,'rgb('+colorToR+','+colorToG+','+colorToB+')')
grad.addColorStop(1,'rgb('+colorToR+','+colorToG+','+colorToB+')')
for(var i=50;i<400;i+=50){
for(var j=0;j<data.length;j++){
​
beginShape()
ctx.strokeStyle=grad
line(400,j*10,400-data[j],j*10)
ctx.closePath()
}
}
strokeWeight(1)
}
​
if(doubleEffectH){
var clr=ctx.getImageData(0,d-10,400,d*0.70)
clr.willReadFrequently=true
for(var i=0;i<clr.data.length;i++){
for(var j=0;j<10;j++){
try{clr.data[i*4+d-j]-=j}catch(e){}
try{clr.data[i*4+1+d-j]-=j}catch(e){}
try{clr.data[i*4+2+d-j]-=j}catch(e){}
try{clr.data[i*4+d+10]+=j}catch(e){}
try{clr.data[i*4+1+d+10]+=j}catch(e){}
try{clr.data[i*4+2+d+10]+=j}catch(e){}
}
}
ctx.putImageData(clr,0,0)
clr=''
}
if(doubleEffectV){
var clr=ctx.getImageData(d/10,0,d*0.70,400)
clr.willReadFrequently=true
for(var i=0;i<clr.data.length;i++){
for(var j=0;j<10;j++){
try{clr.data[i*4+d-j]-=j}catch(e){}
try{clr.data[i*4+1+d-j]-=j}catch(e){}
try{clr.data[i*4+2+d-j]-=j}catch(e){}
try{clr.data[i*4+d+10]+=j}catch(e){}
try{clr.data[i*4+1+d+10]+=j}catch(e){}
try{clr.data[i*4+2+d+10]+=j}catch(e){}
}
}
ctx.putImageData(clr,0,0)
clr=''
}
if(vImg!==''){
ctx.drawImage(vImg,150,d,100,100)
}
if(d===255){
tl=true
}else{
tl=false
}
if(tl && keepAudioVolume===false){
document.getElementById("audio").volume-=0.01
}
​
}
if(keepAudioVolume){
document.getElementById('audio').volume=1
}
textSize(document.getElementById('label-fontSize').value)
var beat=d/bcs
var xb=parseFloat(document.getElementById('label-x').value)
if(document.getElementById('textbounce-x').getAttribute('textbounce')==="true"){
xb=xb*beat
if(parseFloat(document.getElementById('label-x').value)===0){
xb=d
}
} 
​
​
​
for(var ctxt=0;ctxt<labels.length;ctxt++){
if(document.getElementById('audio').currentTime>labels[ctxt].beginShow && document.getElementById('audio').currentTime<labels[ctxt].beginShow+labels[ctxt].duration){
fill(labels[ctxt].color.r,labels[ctxt].color.g,labels[ctxt].color.b,labels[ctxt].color.a)
var lx=labels[ctxt].x
var ly=labels[ctxt].y
if(labels[ctxt].textbounceX==='true'){
lx=lx*beat
}
if(labels[ctxt].textbounceY==='true'){
ly=ly*beat
}
ctx.fillText(labels[ctxt].text,lx,ly,400-parseInt(document.getElementById('label-x').value),400)
textSize(parseInt(labels[ctxt].fontSize)+0.2)
stroke(labels[ctxt].border.r,labels[ctxt].border.g,labels[ctxt].border.b,labels[ctxt].border.a)
ctx.strokeText(labels[ctxt].text,lx-2,ly,400-labels[ctxt].x,400)
}
}
if(d>0){
var b=beat*100
document.body.style='filter:brightness('+b+'%);'
document.getElementById('canvas').style='filter:brightness(100%);'
document.body.style.backgroundImage='linear-gradient('+d+'deg,rgb('+br+','+bg+','+bb+'),rgb('+b+','+b+','+b+'))'
}else{
document.body.style='filter:brightness(100%);'
}
},1)
//animate()
}
}
reader.readAsDataURL(file.files[0])
}
​
</script>
<style>
body{
color:white;
background-image:url("background.png");
background-repeat:no-repeat;
background-size:cover;
}
button{
background:linear-gradient(rgb(0,100,0),rgb(0,0,100));
color:white;
}
input{
background:linear-gradient(rgb(100,0,100),black);
color:rgb(150,150,150);
}
input[red]{
background:linear-gradient(90deg,black,red);
}
input[green]{
background:linear-gradient(90deg,black,green);
}
input[blue]{
background:linear-gradient(90deg,black,blue);
}
</style>
</body>
</html>