Generatore di Musica by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

formmethodDefinisce il metodo di invio dei dati oltre a method
multipart/form-dataCodifica dei caratteri di un form
animationDefinisce i parametri dell'animazione di un elemento o selettore
<th>Definisce una cella di intestazione di una tabella HTML.
<link>Collega il documento corrente con una risorsa esterna
<q>Indica una parte di testo come citazione breve

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

I Nostri Servizi

Le Meraviglie d\\\\\\\\

Il Riflesso di Adrian Vale

scuola_avanzata.html.

Campagna in primavera

Compito informatica

esercizio 3 esame

Map System using Leaflet

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generatore di Musica</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center; 
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f3f3f3;
        }

        h1 {
            color: #333;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(8, 50px);
            grid-template-rows: repeat(7, 50px);
            grid-gap: 5px;
            margin: 20px 0;
        }

        .grid div {
            width: 50px;
            height: 50px;
            background-color: #ddd;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid div.active {
            background-color: #4caf50;
        }

        button {
            margin: 10px;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:disabled {
            background-color: #888;
        }

        input[type="range"] {
            width: 200px;
        }

        #speed {
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>Generatore di Musica</h1>
    <div id="grid" class="grid"></div>
    <button id="play">Play</button>
    <button id="stop" disabled>Stop</button>
    <button id="reset">Reset</button>
    <label for="volume">Volume:</label>
    <input type="range" id="volume" min="0" max="1" step="0.01" value="0.5">
    <label for="speed">Velocità (ms):</label>
    <input type="range" id="speed" min="100" max="1000" step="50" value="500">

    <script>
        const notes = [
            261.63, // C4
            293.66, // D4
            329.63, // E4
            349.23, // F4
            392.00, // G4
            440.00, // A4
            493.88, // B4
            523.25  // C5
        ];

        const grid = document.getElementById('grid');
        const playButton = document.getElementById('play');
        const stopButton = document.getElementById('stop');
        const resetButton = document.getElementById('reset');
        const volumeControl = document.getElementById('volume');
        const speedControl = document.getElementById('speed');
        let audioContext = new (window.AudioContext || window.webkitAudioContext)();
        let interval;
        let sequence = Array(56).fill(false); // 7 rows * 8 columns = 56 cells
        let currentSpeed = parseInt(speedControl.value); // Initial speed

        // Create grid (7 rows, 8 columns)
        for (let i = 0; i < 56; i++) {
            let div = document.createElement('div');
            div.addEventListener('click', () => toggleNote(i, div));
            grid.appendChild(div);
        }

        function toggleNote(index, element) {
            sequence[index] = !sequence[index];
            element.classList.toggle('active', sequence[index]);
        }

        function playNote(frequency) {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            oscillator.type = 'sine';
            oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
            gainNode.gain.setValueAtTime(volumeControl.value, audioContext.currentTime);
            oscillator.start();
            oscillator.stop(audioContext.currentTime + 0.2);
        }

        function playSequence() {
            let currentTime = 0;

            // Start interval with initial speed
            interval = setInterval(() => {
                sequence.forEach((active, index) => {
                    if (active) {
                        playNote(notes[index % 8]); // Wrap around the notes (8 notes per row)
                    }
                });
            }, currentSpeed);
        }

        function stopSequence() {
            clearInterval(interval);
        }

        function updateSpeed() {
            // When speed is updated, stop and restart the sequence with the new speed
            currentSpeed = parseInt(speedControl.value);
            if (stopButton.disabled === false) {
                stopSequence();
                playSequence();
            }
        }

        function resetGrid() {
            // Reset the grid and sequence
            sequence.fill(false);
            const gridDivs = document.querySelectorAll('.grid div');
            gridDivs.forEach(div => div.classList.remove('active'));
        }

        playButton.addEventListener('click', () => {
            playButton.disabled = true;
            stopButton.disabled = false;
            playSequence();
        });

        stopButton.addEventListener('click', () => {
            playButton.disabled = false;
            stopButton.disabled = true;
            stopSequence();
        });

        speedControl.addEventListener('input', updateSpeed);
        resetButton.addEventListener('click', resetGrid);
    </script>
</body>
</html>