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

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

Referenze

animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<pre>Indica una parte di testo preformattato
<map>Inserisce immagini mappa cliccabili in un documento
<p>Serve a definire paragrafi di testo
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<ul>Usato per la creazione di liste non ordinate.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Random Tally

infostrumenti.html

Download 7-Zip for PC Windows

tabella venuta male

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>