Click here for free DL of the app version that can save data.

No:40367

←

Prev Next

→

Recrea synthesia
Developer User18058｜Date and time 24/2/2 9:42:04
Build time 7.433 sec｜Game capacity 2.161KB｜

Script

Synthesia Game

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Synthesia Game</title>
    <style>
        #piano {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 80%;
            margin: 0 auto;
        }
        .key {
            width: 15px;
            height: 50px;
            background-color: white;
            border: 1px solid black;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }
        .sharp {
            width: 10px;
            height: 30px;
            background-color: black;
            border: 1px solid black;
            position: relative;
            top: -10px;
        }
    </style>
    <script>
        const notes = ["C", "D", "E", "F", "G", "A", "B"];
        const octaves = [1, 2, 3, 4];

function createPiano() {
            const pianoContainer = document.getElementById('piano');

octaves.forEach((octave) => {
                notes.forEach((note) => {
                    const key = document.createElement('div');
                    key.classList.add('key');
                    key.id = note + octave;
                    key.addEventListener('mousedown', playNote);
                    pianoContainer.appendChild(key);

if (!note.includes("E") && !note.includes("B")) {
                        const sharp = document.createElement('div');
                        sharp.classList.add('sharp');
                        sharp.id = note + '#' + octave;
                        sharp.addEventListener('mousedown', playNote);
                        key.appendChild(sharp);
                    }
                });
            });
        }

function playNote() {
            const note = this.id;
            const audio = new Audio(`path/to/sounds/${note}.mp3`);
            audio.play();
        }

window.onload = function() {
            createPiano();
        };
    </script>
</head>
<body>
    <h1>Synthesia Game</h1>
    <div id="piano"></div>
</body>
</html>