zbLiuLiu
/
HuajiMidi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
							<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>とある滑稽の超电子琴</title>
    <script src="./inc/shim/Base64.js"></script>
    <script src="./inc/shim/Base64binary.js"></script>
    <script src="./inc/shim/WebAudioAPI.js"></script>
    <script src="./inc/shim/WebMIDIAPI.js" type="text/javascript"></script>

    <!-- jasmid package -->
    <script src="./inc/jasmid/stream.js"></script>
    <script src="./inc/jasmid/midifile.js"></script>
    <script src="./inc/jasmid/replayer.js"></script>

    <script src="./js/midi/audioDetect.js" type="text/javascript"></script>
    <script src="./js/midi/gm.js"></script>
    <script src="./js/midi/loader.js"></script>
    <script src="./js/midi/plugin.audiotag.js"></script>
    <script src="./js/midi/plugin.webaudio.js"></script>
    <script src="./js/midi/plugin.webmidi.js"></script>
    <script src="./js/midi/player.js" type="text/javascript"></script>
    <script src="./js/midi/audioDetect.js"></script>
    <script src="./js/util/dom_request_xhr.js" type="text/javascript"></script>
    <script src="./js/util/dom_request_script.js" type="text/javascript"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        select,
        button {
            border: 1px solid black;
            background-color: transparent;
            outline: none;
            font-weight: 400;
            padding: 1px 6px;
        }

        .huaji {
            background-color: transparent;
            background-image: url('./images/huaji1.png');
            background-repeat: no-repeat;
            background-size: contain;
            width: 32px;
            padding: 0px;
            padding-top: 59px;
            border: 2px solid transparent;
            outline: 0px;
            appearance: none;
        }
        .huaji:hover,
        .huaji.down{
            border-bottom-color: rgb(232, 167, 84);
            cursor: pointer;
        }

        .huaji.down {
            background-image: url('./images/huaji2.png');
        }

        #openFile {
            display: none;
        }

        .play-mode {
            overflow: auto;
            word-wrap: none;
            white-space: nowrap;
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }

        .play-mode .huaji {
            width: 56px;
            padding-top: 118px;
        }

        #time {
            width: 40%;
            pointer-events: none;
        }

        .options>* {
            vertical-align: middle;
        }

        .options {
            padding: 10px 0px;
            overflow: auto;
            word-wrap: none;
            white-space: nowrap;
        }

        .options>*:first-child {
            margin-left: 8px !important;
        }

        .options>*:last-child {
            margin-right: 8px !important;
        }

        #keyboard {
            margin: auto 8px;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="options">
        <select onchange="openUrl('./midis/'+this.value+'.mid')">
            <option value="1" disabled selected>选择预置的乐谱</option>
            <optgroup label="万恶之源">
                <option value="Astronomia">Astronomia</option>
                <option value="Ikenaibodarain">禁绝边境线</option>
                <option value="GokuRakuJoudo">极乐净土</option>
            </optgroup>
            <optgroup label="火星文">
                <option value="aLIEz">aLIEz</option>
            </optgroup>
            <optgroup label="某科学的超电磁炮">
                <option value="OnlyMyRailgun">Only my railgun</option>
                <option value="Level5Judgelight">Level 5 - Judgelight</option>
                <option value="Sister'sNoise">Sister's Noise</option>
            </optgroup>
            <optgroup label="LoveLive!">
                <option value="SnowHalation">Snow Halation</option>
                <option value="Arifutarekanashiminohate">ありふれた悲しみの果て</option>
            </optgroup>
            <optgroup label="一抹多x">
                <option value="Eromangasensai">ヒトリゴト</option>
            </optgroup>
        </select>
        <input type="file" id="openFile" accept="audio/midi" onchange="openFile()">
        <button onclick="document.getElementById('openFile').click()">打开</button>
        <button id="play" onclick="play()">播放</button>
        <input type="range" id="time" value="0" readonly>
        <button onclick="stop()">停止</button>
        <label><input type="checkbox" onchange="modeChange()">弹奏模式</label>
    </div>
    <div style="margin: 0px 8px;"><i>如果你发现音乐好像有哪里不对，点一下停止然后重新开始播放就好！</i></div>
    <div id="keyboard" oncontextmenu="return false">
    </div>
    <!-- <script src="midi.min.js"></script> -->
    <script>
        console.log(MIDI)
        var player;

        window.onload = function () {
            var press = false;
            var setPressTimeout;
            var keyboard = document.getElementById("keyboard")
            var buttons = []
            var time = document.getElementById("time")
            // console.log({keyboard})
            for (let index = 0; index < 88; index++) {
                var button = document.createElement("BUTTON")
                button.className = 'huaji';
                // button.classList.add("huaji")
                function down_press(e) {
                    var button = e.target
                    if (!button.press) {
                        button.classList.add("down")
                        keyDown(index + 21)
                        press = true
                    }
                }
                function down_move(e) {
                    var button = e.target
                    if (press && !button.press) {
                        button.classList.add("down")
                        keyDown(index + 21)
                        if (setPressTimeout) clearTimeout(setPressTimeout)
                    }
                    // console.log(index + 21 + "enter")
                }
                function up_press(e) {
                    var button = e.target
                    button.classList.remove("down")
                    keyUp(index + 21)
                    press = false
                }
                function up_move(e) {
                    var button = e.target
                    button.classList.remove("down")
                    keyUp(index + 21)
                    button.press = false
                    if (press) setPressTimeout = setTimeout(function () {
                        press = false
                    }, 500);
                }
                button.down_press = button.onmousedown = down_press
                button.down_move = button.onmouseenter = down_move
                button.up_press = button.onmouseup = up_press
                button.up_move = button.onmouseleave = up_move
                button.ontouchstart = function (event) {
                    // console.log("touchStart", event)
                    // event.preventDefault();
                    down_press(event);
                    this.lastPostionWasHere = true
                    this.press = true;
                }
                button.ontouchend = function (event) {
                    // console.log("touchEnd", event)
                    // event.preventDefault();
                    for (const index in buttons) {
                        if (buttons.hasOwnProperty(index)) {
                            const button = buttons[index];
                            button.up_press({target: button})
                        }
                    }
                    this.press = false;
                }
                button.ontouchenter = function (event) {
                    console.log("touchEnter", event)
                }
                button.innerText = MIDI.noteToKey[index + 21]
                buttons.push(button)
                keyboard.appendChild(button)
            }
            document.addEventListener("touchmove", function (event) {
                // event.preventDefault();
                // console.groupCollapsed("TouchMove")
                for (const key in event.changedTouches) {
                    if (event.changedTouches.hasOwnProperty(key)) {
                        const touch = event.changedTouches[key];
                        for (const index in buttons) {
                            if (buttons.hasOwnProperty(index)) {
                                const button = buttons[index];
                                if (touch.pageX > button.offsetLeft && touch.pageX < button.offsetLeft + button.offsetWidth && touch.pageY > button.offsetTop && touch.pageY < button.offsetTop + button.offsetHeight) {
                                    if (!button.lastPostionWasHere) {
                                        button.down_move({target: button})
                                        // console.log("MoveIn")
                                        // console.log(button)
                                        // console.log(button.offsetLeft, button.offsetWidth)
                                        // console.log(button.offsetTop, button.offsetHeight)
                                        button.lastPostionWasHere = true
                                    }
                                } else {
                                    if (button.lastPostionWasHere) {
                                        button.up_move({target: button})
                                        // console.log("MoveOut")
                                        // console.log(button)
                                        // console.log(button.offsetLeft, button.offsetWidth)
                                        // console.log(button.offsetTop, button.offsetHeight)
                                        button.lastPostionWasHere = false
                                    }
                                }
                            }
                        }
                        // console.log(touch.pageX, touch.pageY)
                    }
                }
                if (!(event.path.length > 4 && (event.path[event.path.length - 5].classList.contains("options") || event.path[event.path.length - 5].classList.contains("play-mode")))) event.preventDefault()
                // console.groupEnd()
            }, {passive: false})
            MIDI.loadPlugin({
                soundfontUrl: "./soundfont/",
                instruments: "acoustic_grand_piano",
                onprogress: function (state, progress) {
                    // console.log(state, progress);
                },
                onsuccess: function () {
                    var delay = 0; // play one note every quarter second
                    var note = 50; // the MIDI note
                    var velocity = 127; // how hard the note hits
                    player = MIDI.Player
                    player.addListener(function (data) {
                        // console.log(data)
                        var pianoKey = data.note - 21;
                        // console.log('note', MIDI.noteToKey[data.note])
                        if (data.message == 144) {
                            time.value = data.now*1000
                            time.max = data.end*1000
                            buttons[pianoKey] && buttons[pianoKey].classList.add("down")
                        } else {
                            buttons[pianoKey] && buttons[pianoKey].classList.remove("down")
                        }
                    });
                    player.timeWarp = 1; // speed the song is played back
                    // play the note
                    MIDI.setVolume(0, 127);
                }
            });
            function keyDown(note) {
                MIDI.noteOn(0, note, 127, 0);
            }
            function keyUp(note) {
                MIDI.noteOff(0, note, 0);
            }
        };
        function openFile() {
            // console.log("openFile",document.getElementById('openFile').files)
            if (document.getElementById('openFile').files.length > 0 && player) {
                playUrl(URL.createObjectURL(document.getElementById('openFile').files[0]))
            }
        }
        function openUrl(url) {
            player && playUrl(url)
        }
        function playUrl(url) {
            // console.log(player)
            player.loadFile(url, function () {
                player.start()
                document.getElementById("play").innerText = "暂停"
            });

        }
        function modeChange() {
            var keyboard = document.getElementById("keyboard")
            keyboard.classList[keyboard.classList.contains("play-mode") ? "remove" : "add"]("play-mode")
        }
        function play() {
            if (player && player.currentTime !== player.endTime) {
                if (player.playing) {
                    document.getElementById("play").innerText = "播放"
                    player.pause(true);
                } else {
                    document.getElementById("play").innerText = "暂停"
                    player.resume();
                }
            }
        }
        function stop() {
            if (player) {
                document.getElementById("play").innerText = "播放"
                player.stop();
            }
        }
    </script>
</body>

</html>