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

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

References

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
titleIndica informazioni aggiuntive riguardo un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

un casino pazzesco

scheda paziente es esame

test1 pagina principale

Heads Or Tails Random Tally

Esercitazione 1

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>