liushengqiang
/
music-score


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MIDI.js - Sequencing in Javascript.</title>
    <!-- midi.js css -->
    <!-- shim -->
    <script src="./inc/shim/Base64.js" type="text/javascript"></script>
    <script src="./inc/shim/Base64binary.js" type="text/javascript"></script>
    <script src="./inc/shim/WebAudioAPI.js" type="text/javascript"></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>
    <!-- midi.js package -->
    <script src="./js/midi/audioDetect.js" type="text/javascript"></script>
    <script src="./js/midi/gm.js" type="text/javascript"></script>
    <script src="./js/midi/loader.js" type="text/javascript"></script>
    <script src="./js/midi/plugin.audiotag.js" type="text/javascript"></script>
    <script src="./js/midi/plugin.webaudio.js" type="text/javascript"></script>
    <script src="./js/midi/plugin.webmidi.js" type="text/javascript"></script>
    <script src="./js/midi/player.js" type="text/javascript"></script>
    <script src="./js/midi/synesthesia.js" type="text/javascript"></script>
    <!-- utils -->
    <script src="./js/util/dom_request_xhr.js" type="text/javascript"></script>
    <script src="./js/util/dom_request_script.js" type="text/javascript"></script>
</head>

<body>
    <button id="playBtn">播放</button>
    <button id="pauseBtn">暂停</button>
    <button id="stopBtn">跳跃</button>
    <input type="range" id="skipBtn" value="100" min="45" max="200" />
    <script type="text/javascript">
        var midiData = {
            src: ''
        }
        var MIDI = window.MIDI
        MIDI.loadPlugin({
            soundfontUrl: "./soundfont/",
            // instrument: "synth_drum",
            onprogress: function (state, progress) {
                console.log(1, state, progress);
            },
        });

        // 加载midi文件
        function handleLoadFile(src, loaded = () => { }) {
            if (!midiData.src) {
                midiData.src = src
            }
            MIDI.Player.loadFile(src, loaded)
        }

        // 播放
        function hanldePlay() {
            MIDI.Player.resume()
        }

        // 暂停
        function handlePause() {
            MIDI.Player.pause();
        }

        // 跳转
        function skipTime(time) {
            MIDI.Player.currentTime = time * 1000
            MIDI.Player.resume();
        }

        // 设置播放速度
        function setTimeWarp(timeWarp) {
            MIDI.Player.loadMidiFile(() => {
                MIDI.Player.timeWarp = 1 / timeWarp
                MIDI.Player.resume();
                console.log('播放倍数', 1 / timeWarp)
            })
        }

        handleLoadFile("https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1669293957359紫罗兰永恒花园ED1——《みちしるべ》.mid")

        MIDI.Player.currentTime = 100000
        // MIDI.Player.timeWarp = 0.6289308176100629
        setInterval(() => {
            // console.log(MIDI.Player.currentTime / 1000, MIDI.Player.restart)
        }, 100)

        var playBtn = document.getElementById('playBtn')
        var pauseBtn = document.getElementById('pauseBtn')
        var stopBtn = document.getElementById('stopBtn')
        var skipBtn = document.getElementById('skipBtn')
        playBtn.addEventListener('click', () => {
            console.log(MIDI)
            MIDI.Player.resume()
        })
        pauseBtn.onclick = function () {
            MIDI.Player.pause();
        }
        stopBtn.onclick = function () {
            MIDI.Player.currentTime = 100000
            MIDI.Player.resume();
            console.log(MIDI)
        }
        skipBtn.onchange = function (e) {
            var timeWarp = Number(e.target.value) / 100
            // MIDI.Player.stop()
            // const oldCurrent = MIDI.Player.currentTime
            // const ab = MIDI.Player.replayer.getData()
            // console.log(ab)
            MIDI.Player.loadMidiFile(() => {
                MIDI.Player.timeWarp = 1 / timeWarp
                console.log('播放倍数', 1 / timeWarp, Number(e.target.value))
                MIDI.Player.resume();
            })


        }
    </script>
    <script>
        console.log(MIDI)
    </script>
</body>

</html>