Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const musicDropZone = document.getElementById('musicDropZone');
+ const imageDropZone = document.getElementById('imageDropZone');
+ const musicInput = document.getElementById('musicInput');
+ const imageInput = document.getElementById('imageInput');
+ const musicVisualizer = document.getElementById('musicVisualizer');
+ const audioPlayer = document.getElementById('audioPlayer');
+ const downloadImage = document.getElementById('downloadImage');
+ const downloadAudio = document.getElementById('downloadAudio');
+
+ // Handle drag and drop
+ usicDropZone, imageDropZone].forEach(zone => {
+ zone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ zone.style.borderColor = 'var(--primary-color)';
+ });
+
+ zone.addEventListener('dragleave', (e) => {
+ e.preventDefault();
+ zone.style.borderColor = 'var(--secondary-color)';
+ });
+
+ zone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ zone.style.borderColor = 'var(--secondary-color)';
+ const file = e.dataTransfer.files[0];
+ handleFile(file, zone.id === 'musicDropZone');
+ });
+
+ zone.addEventListener('click', () => {
+ const input = zone.querySelector('input');
+ input.click();
+ });
+ });
+
+ // Handle file input change
+ musicInput.addEventListener('change', (e) => {
+ handleFile(e.target.files[0], true);
+ });
+
+ imageInput.addEventListener('change', (e) => {
+ handleFile(e.target.files[0], false);
+ });
+
+ function handleFile(file, isMusic) {
+ if (!file) return;
+
+ if (isMusic) {
+ if (file.type.startsWith('audio/')) {
+ convertMusicToImage(file);
+ } else {
+ alert('Please upload an audio file');
+ }
+ } else {
+ if (file.type.startsWith('image/')) {
+ convertImageToMusic(file);
+ } else {
+ alert('Please upload an image file');
+ }
+ }
+ }
+
+ function convertMusicToImage(file) {
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ const audio = new Audio(e.target.result);
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+ const analyser = audioContext.createAnalyser();
+ const source = audioContext.createMediaElementSource(audio);
+
+ source.connect(analyser);
+ analyser.connect(audioContext.destination);
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = 300;
+ canvas.height = 200;
+
+ musicVisualizer.innerHTML = '';
+ musicVisualizer.appendChild(canvas);
+
+ downloadImage.disabled = false;
+
+ // Simple visualization example
+ function draw() {
+ requestAnimationFrame(draw);
+ const dataArray = new Uint8Array(analyser.frequencyBinCount);
+ analyser.getByteFrequencyData(dataArray);
+
+ ctx.fillStyle = 'rgb(248, 250, 252)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ const barWidth = (canvas.width / dataArray.length) * 2.5;
+ let barHeight;
+ let x = 0;
+
+ for(let i = 0; i < dataArray.length; i++) {
+ barHeight = dataArray[i] / 2;
+ ctx.fillStyle = `rgb(${barHeight + 100}, 102, 241)`;
+ ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+ x += barWidth + 1;
+ }
+ }
+
+ audio.play();
+ draw();
+ };
+ reader.readAsDataURL(file);
+ }
+
+ function convertImageToMusic(file) {
+ const reader = new FileReader();
+ reader.onload = function(e) {
+ const img = new Image();
+ img.src = e.target.result;
+ img.onload = function() {
+ // Simple conversion example
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+ const oscillator = audioContext.createOscillator();
+ const gainNode = audioContext.createGain();
+
+ oscillator.connect(gainNode);
+ gainNode.connect(audioContext.destination);
+
+ // Simple conversion of image data to sound
+ const duration = 2;
+ oscillator.frequency.setValueAtTime(440, audioContext.currentTime);
+ gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+
+ oscillator.start();
+ oscillator.stop(audioContext.currentTime + duration);
+
+ downloadAudio.disabled = false;
+
+ audioPlayer.innerHTML = '
Audio generated from image
';
+ };
+ };
+ reader.readAsDataURL(file);
+ }
+ });
