Browse Source

修改了播放器

LiuLiu 3 years ago
parent
commit
946dd37b7a
7 changed files with 121 additions and 22 deletions
  1. 98 19
      index.html
  2. 21 2
      js/midi/gm.js
  3. 2 1
      js/midi/player.js
  4. BIN
      midis/Eromangasensai.mid
  5. BIN
      midis/GokuRakuJoudo.mid
  6. BIN
      midis/Ikenaibodarain.mid
  7. BIN
      midis/SnowHalation.mid

+ 98 - 19
index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>とある滑稽の超电子琴</title>
     <script src="./inc/shim/Base64.js"></script>
     <script src="./inc/shim/Base64binary.js"></script>
     <script src="./inc/shim/WebAudioAPI.js"></script>
@@ -45,13 +45,18 @@
             background-image: url('./images/huaji1.png');
             background-repeat: no-repeat;
             background-size: contain;
-            width: 28px;
+            width: 32px;
             padding: 0px;
             padding-top: 59px;
-            border: 0px;
+            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');
@@ -102,6 +107,7 @@
 
         #keyboard {
             margin: auto 8px;
+            user-select: none;
         }
     </style>
 </head>
@@ -112,7 +118,8 @@
             <option value="1" disabled selected>选择预置的乐谱</option>
             <optgroup label="万恶之源">
                 <option value="Astronomia">Astronomia</option>
-                <option value="aLIEz">aLIEz</option>
+                <option value="Ikenaibodarain">禁绝边境线</option>
+                <option value="GokuRakuJoudo">极乐净土</option>
             </optgroup>
             <optgroup label="火星文">
                 <option value="aLIEz">aLIEz</option>
@@ -126,6 +133,9 @@
                 <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>
@@ -135,12 +145,13 @@
         <label><input type="checkbox" onchange="modeChange()">弹奏模式</label>
     </div>
     <div style="margin: 0px 8px;"><i>如果你发现音乐好像有哪里不对,点一下停止然后重新开始播放就好!</i></div>
-    <div id="keyboard">
+    <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;
@@ -152,35 +163,103 @@
                 var button = document.createElement("BUTTON")
                 button.className = 'huaji';
                 // button.classList.add("huaji")
-                button.onmousedown = function () {
-                    this.classList.add("down")
-                    keyDown(index + 21)
-                    press = true
+                function down_press(e) {
+                    var button = e.target
+                    if (!button.press) {
+                        button.classList.add("down")
+                        keyDown(index + 21)
+                        press = true
+                    }
                 }
-                button.onmouseenter = function () {
-                    if (press) {
-                        this.classList.add("down")
+                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")
                 }
-                button.onmouseup = function () {
-                    this.classList.remove("down")
+                function up_press(e) {
+                    var button = e.target
+                    button.classList.remove("down")
                     keyUp(index + 21)
                     press = false
                 }
-                button.onmouseleave = function () {
-                    this.classList.remove("down")
+                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",
@@ -197,8 +276,8 @@
                         var pianoKey = data.note - 21;
                         // console.log('note', MIDI.noteToKey[data.note])
                         if (data.message == 144) {
-                            time.value = data.now
-                            time.max = data.end
+                            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")

+ 21 - 2
js/midi/gm.js

@@ -25,8 +25,10 @@
 				res.byId[--num] = 
 				res.byName[clean(instrument)] = 
 				res.byCategory[clean(key)] = {
-					id: clean(instrument),
-					instrument: instrument,
+					// id: clean(instrument),
+					// instrument: instrument,
+					id: clean('Acoustic Grand Piano'),
+					instrument: 'Acoustic Grand Piano',
 					number: num,
 					category: key
 				};
@@ -50,6 +52,23 @@
 		'Ethnic': ['105 Sitar', '106 Banjo', '107 Shamisen', '108 Koto', '109 Kalimba', '110 Bagpipe', '111 Fiddle', '112 Shanai'],
 		'Percussive': ['113 Tinkle Bell', '114 Agogo', '115 Steel Drums', '116 Woodblock', '117 Taiko Drum', '118 Melodic Tom', '119 Synth Drum'],
 		'Sound effects': ['120 Reverse Cymbal', '121 Guitar Fret Noise', '122 Breath Noise', '123 Seashore', '124 Bird Tweet', '125 Telephone Ring', '126 Helicopter', '127 Applause', '128 Gunshot']
+
+		// 'Piano': ['1 Acoustic Grand Piano', '2 Acoustic Grand Piano', '3 Acoustic Grand Piano', '4 Acoustic Grand Piano', '5 Acoustic Grand Piano', '6 Acoustic Grand Piano', '7 Acoustic Grand Piano', '8 Acoustic Grand Piano'],
+		// 'Chromatic Percussion': ['9 Acoustic Grand Piano', '10 Acoustic Grand Piano', '11 Acoustic Grand Piano', '12 Acoustic Grand Piano', '13 Acoustic Grand Piano', '14 Acoustic Grand Piano', '15 Acoustic Grand Piano', '16 Acoustic Grand Piano'],
+		// 'Organ': ['17 Acoustic Grand Piano', '18 Acoustic Grand Piano', '19 Acoustic Grand Piano', '20 Acoustic Grand Piano', '21 Acoustic Grand Piano', '22 Acoustic Grand Piano', '23 Acoustic Grand Piano', '24 Acoustic Grand Piano'],
+		// 'Guitar': ['25 Acoustic Grand Piano', '26 Acoustic Grand Piano', '27 Acoustic Grand Piano', '28 Acoustic Grand Piano', '29 Acoustic Grand Piano', '30 Acoustic Grand Piano', '31 Acoustic Grand Piano', '32 Acoustic Grand Piano'],
+		// 'Bass': ['33 Acoustic Grand Piano', '34 Acoustic Grand Piano', '35 Acoustic Grand Piano', '36 Acoustic Grand Piano', '37 Acoustic Grand Piano', '38 Acoustic Grand Piano', '39 Acoustic Grand Piano', '40 Acoustic Grand Piano'],
+		// 'Strings': ['41 Acoustic Grand Piano', '42 Acoustic Grand Piano', '43 Acoustic Grand Piano', '44 Acoustic Grand Piano', '45 Acoustic Grand Piano', '46 Acoustic Grand Piano', '47 Acoustic Grand Piano', '48 Acoustic Grand Piano'],
+		// 'Ensemble': ['49 Acoustic Grand Piano', '50 Acoustic Grand Piano', '51 Acoustic Grand Piano', '52 Acoustic Grand Piano', '53 Acoustic Grand Piano', '54 Acoustic Grand Piano', '55 Acoustic Grand Piano', '56 Acoustic Grand Piano'],
+		// 'Brass': ['57 Acoustic Grand Piano', '58 Acoustic Grand Piano', '59 Acoustic Grand Piano', '60 Acoustic Grand Piano', '61 Acoustic Grand Piano', '62 Acoustic Grand Piano', '63 Acoustic Grand Piano', '64 Acoustic Grand Piano'],
+		// 'Reed': ['65 Acoustic Grand Piano', '66 Acoustic Grand Piano', '67 Acoustic Grand Piano', '68 Acoustic Grand Piano', '69 Acoustic Grand Piano', '70 Acoustic Grand Piano', '71 Acoustic Grand Piano', '72 Acoustic Grand Piano'],
+		// 'Pipe': ['73 Acoustic Grand Piano', '74 Acoustic Grand Piano', '75 Acoustic Grand Piano', '76 Acoustic Grand Piano', '77 Acoustic Grand Piano', '78 Acoustic Grand Piano', '79 Acoustic Grand Piano', '80 Acoustic Grand Piano'],
+		// 'Synth Lead': ['81 Acoustic Grand Piano', '82 Acoustic Grand Piano', '83 Acoustic Grand Piano', '84 Acoustic Grand Piano', '85 Acoustic Grand Piano', '86 Acoustic Grand Piano', '87 Acoustic Grand Piano', '88 Acoustic Grand Piano'],
+		// 'Synth Pad': ['89 Acoustic Grand Piano', '90 Acoustic Grand Piano', '91 Acoustic Grand Piano', '92 Acoustic Grand Piano', '93 Acoustic Grand Piano', '94 Acoustic Grand Piano', '95 Acoustic Grand Piano', '96 Acoustic Grand Piano'],
+		// 'Synth Effects': ['97 Acoustic Grand Piano', '98 Acoustic Grand Piano', '99 Acoustic Grand Piano', '100 Acoustic Grand Piano', '101 Acoustic Grand Piano', '102 Acoustic Grand Piano', '103 Acoustic Grand Piano', '104 Acoustic Grand Piano'],
+		// 'Ethnic': ['105 Acoustic Grand Piano', '106 Acoustic Grand Piano', '107 Acoustic Grand Piano', '108 Acoustic Grand Piano', '109 Acoustic Grand Piano', '110 Acoustic Grand Piano', '111 Acoustic Grand Piano', '112 Acoustic Grand Piano'],
+		// 'Percussive': ['113 Acoustic Grand Piano', '114 Acoustic Grand Piano', '115 Acoustic Grand Piano', '116 Acoustic Grand Piano', '117 Acoustic Grand Piano', '118 Acoustic Grand Piano', '119 Acoustic Grand Piano'],
+		// 'Sound effects': ['120 Acoustic Grand Piano', '121 Acoustic Grand Piano', '122 Acoustic Grand Piano', '123 Acoustic Grand Piano', '124 Acoustic Grand Piano', '125 Acoustic Grand Piano', '126 Acoustic Grand Piano', '127 Acoustic Grand Piano', '128 Acoustic Grand Piano']
 	});
 
 	/* get/setInstrument

+ 2 - 1
js/midi/player.js

@@ -143,7 +143,8 @@
           d = c - s;
           var x = l[0].event;
           if ("channel" === x.type) {
-            var u = x.channel;
+            var u = 0;
+            // var u = x.channel;
             switch (x.subtype) {
               case "noteOn":
                 if (MIDI.channels[u].mute)

BIN
midis/Eromangasensai.mid


BIN
midis/GokuRakuJoudo.mid


BIN
midis/Ikenaibodarain.mid


BIN
midis/SnowHalation.mid