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

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

References

maxImposta il valore numerico o temporale massimo per un elemento input
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
<div>Crea contenitori generici o sezioni in una pagina
listCollega un elemento input con una lista di opzioni datalist
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<tfoot>Definisce il footer o sezione inferiore di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Esercitazione esame

esercitazione 1

inserimento immagini in un testo

Heads Or Tails Random Tally 2

Federica Bachini Lab

Primo esercizio in classe

esercitazione4.html(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>