script.js

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();

oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.start();

function playNote(note) {
    const noteFrequency = getNoteFrequency(note);
    oscillator.frequency.setValueAtTime(noteFrequency, audioContext.currentTime);
    gainNode.gain.setValueAtTime(1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 1);
}

function getNoteFrequency(note) {
    const noteFrequencies = {
        'C4': 261.63,
        'C#4': 277.18,
        'D4': 293.66,
        'D#4': 311.13,
        'E4': 329.63,
        'F4': 349.23,
        'F#4': 369.99,
        'G4': 392.00,
        'G#4': 415.30,
        'A4': 440.00,
        'A#4': 466.16,
        'B4': 493.88
    };
    return noteFrequencies[note];
}

const pianoKeys = document.querySelectorAll('.key');
pianoKeys.forEach(key => {
    key.addEventListener('click', () => {
        const note = key.getAttribute('data-note');
        playNote(note);
    });
});

const drumButtons = document.querySelectorAll('.drum-button');
drumButtons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/drums/${sound}.mp3`);
    });
});

const pluckButtons = document.querySelectorAll('.pluck-button');
pluckButtons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/pluck/${sound}.mp3`);
    });
});

const voiceButtons = document.querySelectorAll('.voice-button');
voiceButtons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/voice/${sound}.mp3`);
    });
});

const guitarButtons = document.querySelectorAll('.guitar-button');
guitarButtons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/guitar/${sound}.mp3`);
    });
});

const saxophoneButtons = document.querySelectorAll('.saxophone-button');
saxophoneButtons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/saxophone/${sound}.mp3`);
    });
});

const bit8Buttons = document.querySelectorAll('.8bit-button');
bit8Buttons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/8bit/${sound}.mp3`);
    });
});

const bit16Buttons = document.querySelectorAll('.16bit-button');
bit16Buttons.forEach(button => {
    button.addEventListener('click', () => {
        const sound = button.getAttribute('data-sound');
        playSound(`sounds/16bit/${sound}.mp3`);
    });
});

const genreButtons = document.querySelectorAll('.genre-button');
genreButtons.forEach(button => {
    button.addEventListener('click', () => {
        const genre = button.getAttribute('data-genre');
        applyGenre(genre);
    });
});

const loopButtons = document.querySelectorAll('.loop-button');
loopButtons.forEach(button => {
    button.addEventListener('click', () => {
        const loop = button.getAttribute('data-loop');
        playLoop(`sounds/loops/${loop}.mp3`);
    });
});

const fxButtons = document.querySelectorAll('.fx-button');
fxButtons.forEach(button => {
    button.addEventListener('click', () => {
        const fx = button.getAttribute('data-fx');
        applyFX(`sounds/fx/${fx}.mp3`);
    });
});

function playSound(soundFile) {
    const audio = new Audio(soundFile);
    audio.play();
}

function playLoop(loopFile) {
    const audio = new Audio(loopFile);
    audio.loop = true;
    audio.play();
}

function applyFX(fxFile) {
    const audio = new Audio(fxFile);
    audio.play();
}

function applyGenre(genre) {
    // Apply genre effects (e.g., change tempo, pitch, etc.)
    console.log(`Applying ${genre} genre effects...`);
}

let isRecording = false;
let recordedNotes = [];

document.getElementById('record-button').addEventListener('click', () => {
    isRecording = true;
    recordedNotes = [];
    document.getElementById('record-button').disabled = true;
    document.getElementById('stop-button').disabled = false;
});

document.getElementById('stop-button').addEventListener('click', () => {
    isRecording = false;
    document.getElementById('record-button').disabled = false;
    document.getElementById('stop-button').disabled = true;
    document.getElementById('play-button').disabled = false;
});

document.getElementById('play-button').addEventListener('click', () => {
    recordedNotes.forEach((note, index) => {
        setTimeout(() => playNote(note), index * 500);
    });
});

pianoKeys.forEach(key => {
    key.addEventListener('click', () => {
        const note = key.getAttribute('data-note');
        if (isRecording) {
            recordedNotes.push(note);
        }
    });
});

document.getElementById('audio-file').addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        document.getElementById('play-file-button').disabled = false;
    }
});

document.getElementById('play-file-button').addEventListener('click', () => {
    const file = document.getElementById('audio-file').files[0];
    if (file) {
        const audio = new Audio(URL.createObjectURL(file));
        audio.play();
    }
});