RD5 GOLD v14.0 - FINAL BOSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Picture Music PRO</title>

body{
  margin:0;
  background:#111;
  color:white;
  font-family:Arial;
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* ===== IZQUIERDA ===== */
#left{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111;
  overflow:hidden;
}

#canvas{
  max-width:100%;
  max-height:95vh;
  object-fit:contain;
  background:#000;
}

/* ===== DERECHA FIJA ===== */
#right{
  width:420px;
  min-width:420px;
  max-width:420px;
  background:#000;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  overflow:auto;
}

/* ===== TÍTULO ===== */
#title{
  font-size:22px;
  font-weight:bold;
  margin-bottom:5px;
}

/* ===== CONTROLES ===== */
.control{
  width:360px;
}

button{
  width:360px;
  padding:10px;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  border-radius:6px;
}

.line{
  width:360px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}

.line input{
  width:220px;
}

.meter{
  width:360px;
  height:12px;
  background:#222;
}

.meterFill{
  height:100%;
  width:0%;
}

#eqCanvas{
  width:360px;
  height:80px;
  background:#111;
}
</style>
</head>

<body>

<div id="title">Picture Music PRO</div>

<button id="playBtn">Play</button>
<button id="stopBtn">Stop</button>
<button id="downloadBtn">Descargar WAV</button>

<button onclick="window.open('https://wa.me/5491123022158', '_blank')">Comprar por WhatsApp</button>
<button onclick="window.open('https://link.mercadopago.com.ar/c5d', '_blank')">Mercado Pago</button>

<div class="line">
  <span>Volumen</span>
  <input type="range" id="volume" min="0" max="1" step="0.01" value="0.3">
</div>

<div class="line">
  <span>Graves</span>
  <input type="range" id="bass" min="-30" max="30" value="0">
</div>

<div class="line">
  <span>Medios</span>
  <input type="range" id="mid" min="-30" max="30" value="0">
</div>

<div class="line">
  <span>Agudos</span>
  <input type="range" id="treble" min="-30" max="30" value="0">
</div>

</div>

const eqCanvas = document.getElementById("eqCanvas");
const eqCtx = eqCanvas.getContext("2d");
eqCanvas.width = 360;
eqCanvas.height = 80;

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

const masterGain = audioCtx.createGain();
const bassFilter = audioCtx.createBiquadFilter();
const midFilter = audioCtx.createBiquadFilter();
const trebleFilter = audioCtx.createBiquadFilter();
const analyser = audioCtx.createAnalyser();

masterGain.gain.value = 0.3;

bassFilter.type="lowshelf";
bassFilter.frequency.value=200;

midFilter.type="peaking";
midFilter.frequency.value=1000;
midFilter.Q.value=1;

trebleFilter.type="highshelf";
trebleFilter.frequency.value=3000;

masterGain.connect(bassFilter);
bassFilter.connect(midFilter);
midFilter.connect(trebleFilter);
trebleFilter.connect(analyser);
analyser.connect(audioCtx.destination);

let imageDataOriginal;
let leftSeq=[];
let rightSeq=[];
let playing=false;
let interval;
let recordedChunks=[];
let mediaRecorder;
let latestWavUrl = null;

const dest = audioCtx.createMediaStreamDestination();
analyser.connect(dest);
mediaRecorder = new MediaRecorder(dest.stream);

mediaRecorder.ondataavailable = e=>{
  if(e.data.size>0) recordedChunks.push(e.data);
};

mediaRecorder.onstop = ()=>{
  const blob = new Blob(recordedChunks,{type:"audio/wav"});
  latestWavUrl = URL.createObjectURL(blob);
  recordedChunks=[];
};

downloadBtn.onclick = () => {
  if (latestWavUrl) {
    const a = document.createElement("a");
    a.href = latestWavUrl;
    a.download = "picture-music.wav";
    a.click();
  } else {
    alert("Primero dale a 'Stop' para generar el audio.");
  }
};

const block=20;
const tempo=120;

volume.oninput=e=>masterGain.gain.value=e.target.value;
bass.oninput=e=>bassFilter.gain.value=e.target.value;
mid.oninput=e=>midFilter.gain.value=e.target.value;
treble.oninput=e=>trebleFilter.gain.value=e.target.value;

upload.addEventListener("change",e=>{
  const file=e.target.files[0];
  if(!file)return;
  const reader=new FileReader();
  reader.onload=ev=>{
    const img=new Image();
    img.onload=()=>{
      canvas.width=img.width;
      canvas.height=img.height;
      ctx.drawImage(img,0,0);
      imageDataOriginal=ctx.getImageData(0,0,canvas.width,canvas.height);
      analyze();
    }
    img.src=ev.target.result;
  }
  reader.readAsDataURL(file);
});

function analyze(){
  leftSeq=[];
  rightSeq=[];
  const data=imageDataOriginal.data;
  const midX=canvas.width/2;

for(let y=0;y<canvas.height;y+=block){
    for(let x=0;x<canvas.width;x+=block){
      let i=(y*canvas.width+x)*4;
      let r=data[i],g=data[i+1],b=data[i+2];
      let brightness=(r+g+b)/3;
      if(brightness<20)continue;
      let freq=150+brightness*2;
      if(x<midX) leftSeq.push({freq,x,y,r,g,b});
      else rightSeq.push({freq,x,y,r,g,b});
    }
  }
}

function playNote(freq,pan){
  const osc=audioCtx.createOscillator();
  const gain=audioCtx.createGain();
  const panner=audioCtx.createStereoPanner();
  osc.type="sine";
  osc.frequency.value=freq;
  panner.pan.value=pan;
  osc.connect(gain);
  gain.connect(panner);
  panner.connect(masterGain);
  gain.gain.setValueAtTime(0.2,audioCtx.currentTime);
  osc.start();
  osc.stop(audioCtx.currentTime+0.15);
}

function drawEQ(){
  requestAnimationFrame(drawEQ);
  const buffer=new Uint8Array(analyser.frequencyBinCount);
  analyser.getByteFrequencyData(buffer);
  eqCtx.fillStyle="#000";
  eqCtx.fillRect(0,0,eqCanvas.width,eqCanvas.height);
  const barWidth=eqCanvas.width/buffer.length*2;
  for(let i=0;i<buffer.length;i++){
    let val=buffer[i]/255;
    let h=val*eqCanvas.height;
    eqCtx.fillStyle="lime";
    eqCtx.fillRect(i*barWidth,eqCanvas.height-h,barWidth-1,h);
  }
}
drawEQ();

playBtn.onclick=()=>{
  if(playing||leftSeq.length===0)return;
  audioCtx.resume();
  mediaRecorder.start();
  playing=true;
  let i=0;

interval=setInterval(()=>{
    ctx.putImageData(imageDataOriginal,0,0);
    let L=leftSeq[i%leftSeq.length];
    let R=rightSeq[i%rightSeq.length];

if(L){
      playNote(L.freq,-1);
      updateMeters(L.r,L.g,L.b);
      ctx.strokeStyle="white";
      ctx.strokeRect(L.x,L.y,block,block);
    }

if(R){
      playNote(R.freq,1);
      ctx.strokeStyle="yellow";
      ctx.strokeRect(R.x,R.y,block,block);
    }

i++;
  },tempo);
};

stopBtn.onclick=()=>{
  clearInterval(interval);
  playing=false;
  if(mediaRecorder.state!=="inactive") mediaRecorder.stop();
};
</script>

</body>
</html>