MIDI-Synth &#8211; synthesizer with a GM tone map. <cite>By <a href="https://adminkov.bcr.by/midi/">Oleg Klenitsky </a>.</cite>		<div class="midi_container">
			<select id="sel_kbd" onchange="SelectMidi(this.selectedIndex-1)">
				<option value="none" >midi keyboard: none</option>
			</select>

			
			<div id="appearance">

				<webaudio-knob id="vol" style="position: absolute; left: 249px; top: 30px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0" max="1" step="0.01" value="0.5" tooltip="volume %s factor"></webaudio-knob>

	      <webaudio-knob id="rev" style="position: absolute; left: 330px; top: 30px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0" max="1" step="0.01" value="0.2" tooltip="reverb %s sec"></webaudio-knob>

	      <webaudio-knob id="conv_duration" style="position: absolute; left: 249px; top: 137px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0" max="1" step="0.01" value="0" tooltip="duration %s sec"></webaudio-knob>

	      <webaudio-knob id="conv_decay" style="position: absolute; left: 330px; top: 137px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0" max="1" step="0.01" value="0" tooltip="decay %s sec"></webaudio-knob>


	      <webaudio-knob id="comp_threshold" style="position: absolute; left: 440px; top: 30px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="-100" max="0" step="1" value="-24" tooltip="threshold %s dB"></webaudio-knob>

	      <webaudio-knob id="comp_knee" style="position: absolute; left: 520px; top: 30px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0" max="40" step="1" value="30" tooltip="knee %s dB"></webaudio-knob>

	      <webaudio-knob id="comp_ratio" style="position: absolute; left: 600px; top: 30px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="1" max="20" step="1" value="12" tooltip="ratio %s dB"></webaudio-knob>

	      <webaudio-knob id="comp_attack" style="position: absolute; left: 480px; top: 137px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0.001" max="1" step="0.001" value="0.003" tooltip="attack %s sec"></webaudio-knob>

	      <webaudio-knob id="comp_release" style="position: absolute; left: 560px; top: 137px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/LittlePhatty.png" min="0" max="1" step="0.01" value="0.25" tooltip="release %s sec"></webaudio-knob>


	      <webaudio-knob id="prog"style="position: absolute; left: 680px; top: 30px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vernier.png" min="0" max="100" step="1" value="0" tooltip="fine control(+Shift)"></webaudio-knob>

	      <div id="progNameStr">
	      	<webaudio-param id="prog_num" link="prog"></webaudio-param>
	      	<p id="prog_name" style="font-size: 14px;margin:0 0 0 5px;">program name</p>
	    	</div>

	      <webaudio-slider id="oct" style="position:absolute;left:828px;top:20px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderbody.png" knobsrc="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderknob.png" value="0" min="-2" max="+2" step="1"  tooltip="Octave shift %s"></webaudio-slider>

	      <webaudio-slider id="ch" style="position:absolute;left:877px;top:20px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderbody.png" knobsrc="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderknob.png" value="1" min="1" max="16" step="1" tooltip="Channel Ch %s"></webaudio-slider>

	      <webaudio-switch id="qlt" midilearn="1" style="position:absolute;left:917px;top:35px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/switch_toggle.png" value="1" height="56" width="56"></webaudio-switch>

	      <webaudio-switch id="sus" midilearn="1" style="position:absolute;left:917px;top:100px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/switch_toggle.png" value="0" height="56" width="56"></webaudio-switch>

	      <div style="position: absolute;display: flex;top: 233px;left: 10px;margin: 0;border: none;height: 30px;align-items: center;">
	      	<webaudio-tinysynth id="tinysynth" src="https://chbnuohuang.work/core/modules/e7a36e8767/sound/ws.mid" style="height: 30px;cursor: pointer;" quality="1" loop="0" disabledrop="0" mastervol="0.3" onclick="midi_player();">
					</webaudio-tinysynth>
					<webaudio-switch id="loop" colors="#A0A378;#000;#A0A378" style="margin:0 5px;" tooltip="Loop" value="0"></webaudio-switch>

					<input type="file" id="file_mid" accept=".mid" style="display:none;" onchange="loadMidi(this.files);"/>
					<button class="btn_synth" for="file_mid" style="margin-right:15px;" title="Load midi" onclick="document.getElementById('file_mid').click();">File midi</button>

					<marquee id="inform_panel" >inform panel</marquee>

					<div style="position: absolute;display: flex;left: 680px;margin: 0;border: none;height: 30px;width: 280px;">
						<button class="btn_synth" id="shot" style="flex:.8;" title="Shot key">--</button>

						<button class="btn_synth" id="kbdBtn" style="flex:.8;" title="Midi keyboard" onclick="OpenKbd();">Kbd</button>

						<button class="btn_synth" id="editor" style="flex:1.5;" title="Timbre Editor" onclick="OpenEditor();">Editor</button>

						<button class="btn_synth" id="graph" style="flex:1.5;" title="AudioNodes Graph" onclick="OpenGraph();">Graph</button>

						<button class="btn_synth" id="sequencer" style="flex:1.5;" title="Sequencer" onclick="winSequencer();">Sequencer</button>
					</div>
				</div>

				<canvas id="canvas_midi" style="position:absolute;top: 42px;left: 27px;" width="180" height="180" title="Click me"></canvas>

				<webaudio-slider id="scaleX" style="position:absolute;left:12px;top:35px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderbody.png" knobsrc="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderknob.png" value="4" min="0" max="7" step="1" tooltip="fftSize %s" conv="['4096','2048','1024','512','256','128','64','32'] [x]" height="191" width="10" knobwidth="10" knobheight="10"></webaudio-slider>
				<webaudio-slider id="scaleY" style="position:absolute;left:212px;top:35px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderbody.png" knobsrc="https://chbnuohuang.work/core/modules/e7a36e8767/img-ctrl/vsliderknob.png" value="4" min="1" max="10" step="1" tooltip="amplitude %s" height="191" width="10" knobwidth="10" knobheight="10"></webaudio-slider>

				<div id="btns_osc">
					<webaudio-switch id="sw0" type="radio" group="radio1" colors="white;#000;#A0A378" width="15" height="15" value="1"></webaudio-switch>
					<p id="p_sw0" onclick="p_swX_click(id.slice(2));">Σ</p>

					<webaudio-switch id="sw1" type="radio" group="radio1" colors="red;#000;#A0A378" width="15" height="15" value="0"></webaudio-switch>
					<p id="p_sw1" onclick="p_swX_click(id.slice(2));">g1</p>

					<webaudio-switch id="sw2" type="radio" group="radio1" colors="blue;#000;#A0A378" width="15" height="15" value="0"></webaudio-switch>
					<p id="p_sw2" onclick="p_swX_click(id.slice(2));">g2</p>

					<webaudio-switch id="sw3" type="radio" group="radio1" colors="green;#000;#A0A378" width="15" height="15" value="0"></webaudio-switch>
					<p id="p_sw3" onclick="p_swX_click(id.slice(2));">g3</p>

					<webaudio-switch id="sw4" type="radio" group="radio1" colors="brown;#000;#A0A378" width="15" height="15" value="0"></webaudio-switch>
					<p id="p_sw4" onclick="p_swX_click(id.slice(2));">g4</p>
				</div>
			</div>

			<webaudio-keyboard style="display: none;" id="kbd" keys="88" min="21" width="980" height="160"></webaudio-keyboard>
			<div id="win_edit" style="display: none;">
				<table id="soundeditor">
					<thead>
						<tr>
							<td colspan="13" style="text-align:left;padding-left:5px;width:100px;">
								<div style="display:flex;">
									<div style="display:flex;width:120px;">
										<label>Oscillators :</label>
										<select id="oscs" onchange="Edit()"><option>1</option><option>2</option><option>3</option><option>4</option></select>
									</div>
									<label style="width:100%;" id="head_soundeditor">Timbre Editor</label>
								</div>
							</td>
						</tr>
					</thead>
					<tbody>
												<tr>
							<th id="soundeditor_th1" style="padding:0;width:100px;" title="output destination" onclick="soundeditor_info(id);">G</th>
							<th id="soundeditor_th2" style="padding:0;width:80px;" title="waveform" onclick="soundeditor_info(id);">W</th>
							<th id="soundeditor_th3" title="volume" onclick="soundeditor_info(id);">V</th>
							<th id="soundeditor_th4" title="tune factor according to note#" onclick="soundeditor_info(id);">T</th>
							<th id="soundeditor_th5" title="fixed frequency in Hz" onclick="soundeditor_info(id);">F</th>
							<th id="soundeditor_th6" style="background-color: #BFDCEA;" title="attack time (1nd parameter of the AHDSR envelope)" onclick="soundeditor_info(id);">A</th>
							<th id="soundeditor_th7" style="background-color: #BFDCEA;" title="hold time (2nd parameter of the AHDSR envelope)" onclick="soundeditor_info(id);">H</th>
							<th id="soundeditor_th8" style="background-color: #BFDCEA;" title="decay time (3nd parameter of the AHDSR envelope)" onclick="soundeditor_info(id);">D</th>
							<th id="soundeditor_th9" style="background-color: #BFDCEA;" title="sustain level (4nd parameter of the AHDSR envelope)" onclick="soundeditor_info(id);">S</th>
							<th id="soundeditor_th10" style="background-color: #BFDCEA;" title="release time (5nd parameter of the AHDSR envelope)" onclick="soundeditor_info(id);">R</th>
							<th id="soundeditor_th11" title="pitch bend" onclick="soundeditor_info(id);">P</th>
							<th id="soundeditor_th12" title="pitch bend speed factor" onclick="soundeditor_info(id);">Q</th>
							<th id="soundeditor_th13" title="volume key tracking factor" onclick="soundeditor_info(id);">K</th>
						</tr>
					  <tr id="prog1">
						  <td style="padding-left:5px;text-align:left;" title="program1">g1<select id="g1" style="width:30px;" onchange="Edit();"><option value="0">g0</option></select><label class="osc_num"></label></td>

						  <td><select id="w1" onchange="Edit()"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v1"  oninput="Edit()" value="0.5" size="4"/></td>
						  <td><input id="t1"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="f1"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="a1"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="h1"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="d1"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="s1"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="r1"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="p1"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="q1"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="k1"  oninput="Edit()" value="0" size="4"/></td>
					  </tr>
					  <tr id="prog2">
						  <td style="padding-left:5px;text-align:left;" title="program2">g2<select id="g2" style="width:30px;" onchange="Edit()"><option value="0">g0</option><option value="1">g1</option></select><label class="osc_num"></label></td>

						  <td><select id="w2" onchange="Edit();"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v2"  oninput="Edit()" value="0.5" size="4"/></td>
						  <td><input id="t2"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="f2"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="a2"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="h2"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="d2"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="s2"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="r2"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="p2"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="q2"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="k2"  oninput="Edit()" value="0" size="4"/></td>
					  </tr>
					  <tr id="prog3">
						  <td style="padding-left:5px;text-align:left;" title="program3">g3<select id="g3" style="width:30px;" onchange="Edit();"><option value="0">g0</option><option value="1">g1</option><option value="2">g2</option></select><label class="osc_num"></label></td>

						  <td><select id="w3" onchange="Edit();"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v3"  oninput="Edit()" value="0.5" size="4"/></td>
						  <td><input id="t3"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="f3"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="a3"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="h3"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="d3"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="s3"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="r3"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="p3"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="q3"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="k3"  oninput="Edit()" value="0" size="4"/></td>
					  </tr>
					  <tr id="prog4">
						  <td style="padding-left:5px;text-align:left;" title="program4">g4<select id="g4" style="width:30px;" onchange="Edit();"><option value="0">g0</option><option value="1">g1</option><option value="2">g2</option><option value="3">g3</option></select><label class="osc_num"></label></td>

						  <td><select id="w4" onchange="Edit()"><option value="sine">sine</option><option value="sawtooth">sawtooth</option><option value="square">square</option><option value="triangle">triangle</option><option value="w9999">w9999</option><option value="n0">n0</option><option value="n1">n1</option></select></td>
						  <td><input id="v4"  oninput="Edit()" value="0.5" size="4"/></td>
						  <td><input id="t4"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="f4"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="a4"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="h4"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="d4"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="s4"  oninput="Edit()" value="0" size="4"/></td>
						  <td><input id="r4"  oninput="Edit()" value="0.1" size="4"/></td>
						  <td><input id="p4"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="q4"  oninput="Edit()" value="1" size="4"/></td>
						  <td><input id="k4"  oninput="Edit()" value="0" size="4"/></td>
						</tr>
					</tbody>
				  <tfoot>
				  	<tr>
				  		<td colspan="13">
				  			<div style="display:flex;">
				  				<label style="width:550px;display: block;">Patch : </label>
				  				<label style="display: block;width: 23%;border-left: 1px solid gray;">LocalStorage</label>
				  			</div>
				  			<div style="display:flex;">
					  			<input disabled="" id="patch" style="width:100%;">
									<button class="btn_editor" id="patch_save" onclick="patchSave();">Save</button>
									<button class="btn_editor" id="patch_load" onclick="patchLoad();">Load</button>
									<button class="btn_editor" id="patch_del" onclick="patchDelete();">Delete</button>
								</div>
				  		</td>
				  	</tr>
				  </tfoot>
				</table>

				<div id="descr_tbl" style="width:260px; height: 230px;background-color: #C3C3C3;font-size: 14px;">
					<ul id="descr_ul" style="margin:0;padding:0;margin-top:100px;color:white;font-size:18px;" onclick="view_ahdsr_img();">Description of Timbre Editor fields</ul>
					<image id="img_ahdsr" width="250" height="220" style="display: none;border: 1px solid black;margin:5px;cursor:pointer;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/AHDSR.png" onclick="view_ahdsr_img();" />
				</div>
			</div>

			<canvas id="audiograph" width="980" height="310" style="display:none;"></canvas>
			<div id="canvas_imgs" style="position:relative;display: none;left:725px;top:-310px;width:260px;height:310px;z-index:-1">
				<image id="webaudiothreshold"  width="70" height="50" style="position:absolute;border: 1px solid black;margin:5px;left:180px;top:20px;width:70px;height:50px;cursor:pointer;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/webaudiothreshold.png" onclick="img_resize(id);"/>
				<image id="webaudioknee"  width="70" height="50" style="position:absolute;border: 1px solid black;margin:5px;left:180px;top:77px;width:70px;height:50px;cursor:pointer;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/webaudioknee.png" onclick="img_resize(id);"/>
				<image id="webaudioratio"  width="70" height="50" style="position:absolute;border: 1px solid black;margin:5px;left:180px;top:134px;width:70px;height:50px;cursor:pointer;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/webaudioratio.png" onclick="img_resize(id);"/>
			</div>
			<div id="win_sequencer" style="display: none;flex-direction: column; border:1px solid black;width:980px;height:height:fit-content;margin:5px;background-color:#E3E3E3;">

				<image id="speaker" width="20" height="20" style="display: none;cursor:pointer;width:20px;height:20px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/speaker.png" />
				<image id="speaker_on" width="20" height="20" style="display: none;cursor:pointer;width:20px;height:20px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/speaker_on.gif" />
				<image id="speaker_off" width="20" height="20" style="display: none;cursor:pointer;width:20px;height:20px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/speaker_off.png" />
				<image id="online_convert" width="140" height="20" style="display: none;cursor:pointer;width:140px;height:20px;" src="https://chbnuohuang.work/core/modules/e7a36e8767/img/online_convert.png" />

				<div id="sequencer_header" style="display:flex;justify-content: space-between;height:30px;padding: 2px;">
					<div style="display:flex;justify-content: flex-start;">
						<label for="song_midi" style="font-size:14px;height:20px;">Copyright</label>
						<input type="text" id="song_midi" name="input" placeholder="Copyright notice" style="font-size:14px;width:130px;height:25px;padding:5px;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label for="tempoBPM" style="font-size:14px;height:20px;">BPM</label>
						<input type="text" id="tempoBPM" name="input" style="font-size:14px;width:40px;height:25px;padding:5px;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label for="tracks_count" style="font-size:14px;height:20px;">Tracks</label>
						<input type="text" id="tracks_count" name="input" disabled style="font-size:14px;width:30px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label for="midi_type" style="font-size:14px;height:20px;">Type midi</label>
						<input type="text" id="midi_type" name="input" disabled style="font-size:14px;width:30px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label id="lbl_ppqn" for="ppqn" style="font-size:14px;height:20px;">PPQN</label>
						<input type="number" id="ppqn" name="input" min="96" max="960" step="96" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:none;justify-content: flex-start;">
						<label id="lbl_smpte_frames" for="smpte_frames" style="font-size:14px;height:20px;">SMPTE frames</label>
						<input type="text" id="smpte_frames" name="input" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:none;justify-content: flex-start;">
						<label id="lbl_ticks_per_frame" for="ticks_per_frame" style="font-size:14px;height:20px;">Ticks per frame</label>
						<input type="text" id="ticks_per_frame" name="input" style="font-size:14px;width:40px;height:25px;padding:5px 0;text-align: center;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label id="lbl_file_name" for="file_name_midi" style="font-size:14px;height:20px;">File name</label>
						<input type="text" id="file_name_midi" name="input" value="ws.mid" style="font-size:14px;width:120px;height:25px;padding:5px;"/>
					</div>
					<div style="display:flex;justify-content: flex-start;">
						<label id="lbl_file_size" for="file_size_midi" style="font-size:14px;height:20px;">File size</label>
						<input type="text" id="file_size_midi" name="input" value="2,55 КБ" disabled style="font-size:14px;width:90px;height:25px;padding:5px;"/>
					</div>
				</div>

				<div id="sequencer_body" style="display: flex;flex-direction: row;justify-content: flex-start;height:fit-content;">
					<div id="win_part1" style="display:block;height:420px;width:210px;overflow-y: auto;">
					</div>
					<div id="win_part2" style="position:relative;display:flex;flex-direction: row;width:790px;height: 420px;overflow-y: hidden;background: #C3C3C3;">
						<div id="div_rangeNotes_part2" style="overflow-x: hidden;overflow-y: hidden;background:#D5D5D5;height: 400px;margin-top: 20px;">
							<canvas id="canvas_rangeNotes_part2" width="45" height="380"></canvas>
						</div>
						<div id="subwin_part2" style="position:relative;display:flex;flex-direction: column;overflow-x: scroll;overflow-y: scroll;height:420px;width: 100%;">

							<div id="ptrTime" style="position:absolute;top:0;left:-2px;width:7px;height:1286px;margin-top: 20px;z-index:1;background:transparent;cursor:pointer;" onmousedown="ptrTimeDragDrope(event);">
								<hr style="width:1px;height: 100%;margin: 0 auto;background: red;">
							</div>

							<canvas id="canvas_scale_part2" height="20" style="position: sticky;top:0;height: 20px;z-index: 1;background: rgb(195, 195, 195);" onclick="cnvScaleClick();" oncontextmenu="cnvScaleMenu(event);"></canvas>

							<canvas id="canvas_body_part2" height="380" style="background:gray;"></canvas>

							<svg id="svg_body_part2" height="380" action="" oncontextmenu="event.preventDefault();insertNote(event);"></svg>
						</div>
					</div>
				</div>
				<div id="sequencer_footer" style="position:relative;display:flex;background: #C3C3C3;height:136px;">
					<div id="scale" style="position:absolute;display:flex;justify-content: space-evenly;align-items: center;height:14px;width:40px;overflow: hidden;font-weight:bold;font-size:14px;top:-14px;left:208px;background:#C3C3C3;" title="scale">
						<div id="scale1+" style="width:13px;text-align: center;cursor:pointer;" onclick="btnScale(id);">+</div>
						<div id="scale10" style="width:13px;text-align: center;cursor:pointer;" onclick="btnScale(id);">o</div>
						<div id="scale1-" style="width:13px;text-align: center;cursor:pointer;" onclick="btnScale(id);">-</div>
					</div>
					<div id="sequencer_subfooter1" style="display:flex;flex-direction: column;justify-content: space-around;border-top:1px solid black;margin-top:1px;">
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_save" onclick="saveFileMidi();">Save</button>
							<button class="btn_sequencer" id="btn_trk_add" onclick="addTrack();">+Track</button>
							<button class="btn_sequencer" id="btn_grid" onclick="gridTrack();">Grid</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_newFile" onclick="getNewFileParams();">New</button>
							<button class="btn_sequencer" id="btn_trk_del" onclick="delTrack();">-Track</button>
							<button class="btn_sequencer" id="btn_trackInfo" onclick="openTrackInfo(id);">Track</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_export" onclick="openExport(id);">Export</button>
							<button class="btn_sequencer" id="btn_report" onclick="openReport(id);">Report</button>
							<button class="btn_sequencer" id="btn_stave" onclick="openStave(id);">Stave</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_help"  onclick="openHelp(id);">Help</button>
							<button class="btn_sequencer" id="btn_record"  onclick="openRecord(id);">Record</button>
							<button class="btn_sequencer" id="btn_tools" onclick="openTools(id);">Tools</button>
						</div>
						<div style="display:flex;justify-content: space-around;flex: none;align-items: center;width:208px;">
							<button class="btn_sequencer" id="btn_setting" onclick="openSetting(id);">Setting</button>
							<button class="btn_sequencer" id="btn_about" onclick="openAbout(id);">About</button>
							<button class="btn_sequencer">---</button>
						</div>
					</div>
					<div id="sequencer_subfooter2" style="height:135px;width:770px;border-left: 1px solid black;border-top: 1px solid black;">
						<div id="stave" style="display:flex;height:135px;"></div>
					</div>
				</div>
			</div>
		<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="generator" content="Drupal 11 (https://www.drupal.org)" />

	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script type="text/javascript">
		var midiSynth_url_ajax  = "https://chbnuohuang.work/ajax";
		var midiSynth_nonce     = "65b9f93cdb";
	</script>
	<meta name='robots' content='max-image-preview:large' />
	<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>
	<title>midi-Synth | WordPress plugin &#8211; chbNuoHuang Albums</title>
<link rel="alternate" type="application/rss+xml" title="chbNuoHuang Albums &raquo; Feed" href="https://chbnuohuang.work/feed/" />
<link rel="alternate" type="application/rss+xml" title="chbNuoHuang Albums &raquo; 评论 Feed" href="https://chbnuohuang.work/comments/feed/" />
<link rel='stylesheet' id='wppb_css-css' href='https://chbnuohuang.work/core/modules/progress-bar/css/wppb.css?rnd=58892' media='all' />
<style id='wp-block-post-title-inline-css'>
.wp-block-post-title{box-sizing:border-box;word-break:break-word}.wp-block-post-title :where(a){display:inline-block;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-decoration:inherit}
</style>
<style id='wp-block-paragraph-inline-css'>
.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}
</style>
<style id='wp-block-post-content-inline-css'>
.wp-block-post-content{display:flow-root}
</style>
<style id='wp-block-group-inline-css'>
.wp-block-group{box-sizing:border-box}:where(.wp-block-group.wp-block-group-is-layout-constrained){position:relative}
</style>
<style id='wp-block-spacer-inline-css'>
.wp-block-spacer{clear:both}
</style>
<style id='wp-block-library-inline-css'>
:root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,161;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px;--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color)}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
</style>
<style id='global-styles-inline-css'>
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--base: #F8F7F5;--wp--preset--color--contrast: #191919;--wp--preset--color--accent-1: #FFFFFF;--wp--preset--color--accent-2: #F5B684;--wp--preset--color--accent-3: #191919;--wp--preset--color--accent-4: #5F5F5F;--wp--preset--color--accent-5: #F1EEE9;--wp--preset--color--accent-6: #19191933;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 0.875rem;--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);--wp--preset--font-size--xx-large: clamp(1.4rem, 1.4rem + ((1vw - 0.2rem) * 1.882), 2.6rem);--wp--preset--font-family--literata: Literata, serif;--wp--preset--font-family--ysabeau-office: "Ysabeau Office", sans-serif;--wp--preset--spacing--20: 10px;--wp--preset--spacing--30: 20px;--wp--preset--spacing--40: 30px;--wp--preset--spacing--50: clamp(30px, 5vw, 50px);--wp--preset--spacing--60: clamp(30px, 7vw, 70px);--wp--preset--spacing--70: clamp(50px, 7vw, 90px);--wp--preset--spacing--80: clamp(70px, 10vw, 140px);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:root { --wp--style--global--content-size: 645px;--wp--style--global--wide-size: 1340px; }:where(body) { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 0.8rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 0.8rem; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 0.8rem;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 0.8rem;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 0.8rem;}:root :where(.is-layout-grid){gap: 0.8rem;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: #cfcfcf;color: #616161;font-family: var(--wp--preset--font-family--ysabeau-office);font-size: var(--wp--preset--font-size--large);font-weight: 300;letter-spacing: -0.24px;line-height: 1.4;--wp--style--root--padding-top: 0px;--wp--style--root--padding-right: 0;--wp--style--root--padding-bottom: 0px;--wp--style--root--padding-left: 0;}a:where(:not(.wp-element-button)){color: currentColor;text-decoration: none;}:root :where(a:where(:not(.wp-element-button)):hover){text-decoration: none;}h1, h2, h3, h4, h5, h6{color: var(--wp--preset--color--accent-3);font-family: var(--wp--preset--font-family--ysabeau-office);font-style: normal;font-weight: 400;letter-spacing: -0.1px;line-height: 1;}h1{font-size: var(--wp--preset--font-size--xx-large);}h2{font-size: var(--wp--preset--font-size--x-large);}h3{font-size: var(--wp--preset--font-size--large);}h4{font-size: var(--wp--preset--font-size--medium);}h5{font-size: var(--wp--preset--font-size--small);letter-spacing: 0px;}h6{font-size: var(--wp--preset--font-size--small);font-weight: 900;letter-spacing: 0px;text-transform: uppercase;}:root :where(.wp-element-button, .wp-block-button__link){background-color: var(--wp--preset--color--contrast);border-width: 0;color: var(--wp--preset--color--base);font-family: var(--wp--preset--font-family--literata);font-size: var(--wp--preset--font-size--medium);font-weight: 900;letter-spacing: -0.36px;line-height: inherit;padding-top: 1rem;padding-right: 2.25rem;padding-bottom: 1rem;padding-left: 2.25rem;text-decoration: none;}:root :where(.wp-element-button:hover, .wp-block-button__link:hover){background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent);border-color: transparent;color: var(--wp--preset--color--base);}:root :where(.wp-element-button:focus, .wp-block-button__link:focus){outline-color: var(--wp--preset--color--accent-4);outline-offset: 2px;}:root :where(.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption){font-size: var(--wp--preset--font-size--small);line-height: 1.4;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-base-color{color: var(--wp--preset--color--base) !important;}.has-contrast-color{color: var(--wp--preset--color--contrast) !important;}.has-accent-1-color{color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-color{color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-color{color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-color{color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-color{color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-color{color: var(--wp--preset--color--accent-6) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-background-color{background-color: var(--wp--preset--color--base) !important;}.has-contrast-background-color{background-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-background-color{background-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-background-color{background-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-background-color{background-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-background-color{background-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-background-color{background-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-background-color{background-color: var(--wp--preset--color--accent-6) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-base-border-color{border-color: var(--wp--preset--color--base) !important;}.has-contrast-border-color{border-color: var(--wp--preset--color--contrast) !important;}.has-accent-1-border-color{border-color: var(--wp--preset--color--accent-1) !important;}.has-accent-2-border-color{border-color: var(--wp--preset--color--accent-2) !important;}.has-accent-3-border-color{border-color: var(--wp--preset--color--accent-3) !important;}.has-accent-4-border-color{border-color: var(--wp--preset--color--accent-4) !important;}.has-accent-5-border-color{border-color: var(--wp--preset--color--accent-5) !important;}.has-accent-6-border-color{border-color: var(--wp--preset--color--accent-6) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xx-large-font-size{font-size: var(--wp--preset--font-size--xx-large) !important;}.has-literata-font-family{font-family: var(--wp--preset--font-family--literata) !important;}.has-ysabeau-office-font-family{font-family: var(--wp--preset--font-family--ysabeau-office) !important;}
:root :where(.wp-block-post-title){color: var(--wp--preset--color--accent-3);font-weight: 900;letter-spacing: -0.96px;}
:root :where(.wp-block-post-title a:where(:not(.wp-element-button))){color: currentColor;text-decoration: none;}
:root :where(.wp-block-post-title a:where(:not(.wp-element-button)):hover){text-decoration: underline;}
</style>
<style id='core-block-supports-inline-css'>
.wp-container-core-post-content-is-layout-c951c46d > *{margin-block-start:0;margin-block-end:0;}.wp-container-core-post-content-is-layout-c951c46d > * + *{margin-block-start:var(--wp--preset--spacing--40);margin-block-end:0;}
</style>
<style id='wp-block-template-skip-link-inline-css'>

		.skip-link.screen-reader-text {
			border: 0;
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute !important;
			width: 1px;
			word-wrap: normal !important;
		}

		.skip-link.screen-reader-text:focus {
			background-color: #eee;
			clip-path: none;
			color: #444;
			display: block;
			font-size: 1em;
			height: auto;
			left: 5px;
			line-height: normal;
			padding: 15px 23px 14px;
			text-decoration: none;
			top: 5px;
			width: auto;
			z-index: 100000;
		}
</style>
<link rel='stylesheet' id='midiSynth-css' href='https://chbnuohuang.work/core/modules/e7a36e8767/css/midiSynth.css?rnd=58892' media='all' />
<link rel='stylesheet' id='twentytwentyfive-style-css' href='https://chbnuohuang.work/core/views/ff55dedaeb/design.css?rnd=58892' media='all' />
<script src="https://chbnuohuang.work/lib/js/jquery/jquery.min.js?rnd=58892" id="jquery-core-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthCore.js?rnd=58892" id="midiSynthCore-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthCtrl.js?rnd=58892" id="midiSynthCtrl-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthInterface.js?rnd=58892" id="midiSynthInterface-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthOsc.js?rnd=58892" id="midiSynthOsc-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthNodes.js?rnd=58892" id="midiSynthNodes-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthSequencer.js?rnd=58892" id="midiSynthSequencer-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthFile.js?rnd=58892" id="midiSynthFile-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiSynthTools.js?rnd=58892" id="midiSynthTools-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/class-midiFile.js?rnd=58892" id="midiFile-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/class-midiFileHeader.js?rnd=58892" id="midiHdr-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/class-midiFileTrack.js?rnd=58892" id="midiTrk-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/class-midiEvents.js?rnd=58892" id="midiEvt-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/VexFlow.js?rnd=58892" id="VexFlow-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/JZZ.js?rnd=58892" id="midiJZZ-js"></script>
<script src="https://chbnuohuang.work/core/modules/e7a36e8767/js/midiFile/JZZ.midi.SMF.js?rnd=58892" id="midiSMF-js"></script>
<link rel="canonical" href="https://chbnuohuang.work/midi-synth/" />
<link rel='shortlink' href='https://chbnuohuang.work/?p=51' />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://chbnuohuang.work/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fchbnuohuang.work%2Fmidi-synth%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://chbnuohuang.work/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fchbnuohuang.work%2Fmidi-synth%2F&#038;format=xml" />
<style class='wp-fonts-local'>
@font-face{font-family:Literata;font-style:normal;font-weight:200;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-ExtraLight.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:200;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-ExtraLightItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:300;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-Light.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:300;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-LightItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:400;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-Regular.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:400;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-RegularItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:500;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-Medium.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:500;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-MediumItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:600;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-SemiBold.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:600;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-SemiBoldItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:700;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-Bold.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:700;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-BoldItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:800;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-ExtraBold.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:800;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-ExtraBoldItalic.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:normal;font-weight:900;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-Black.woff2') format('woff2');}
@font-face{font-family:Literata;font-style:italic;font-weight:900;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/literata/Literata72pt-BlackItalic.woff2') format('woff2');}
@font-face{font-family:"Ysabeau Office";font-style:normal;font-weight:100 900;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/ysabeau-office/YsabeauOffice-VariableFont_wght.woff2') format('woff2');}
@font-face{font-family:"Ysabeau Office";font-style:italic;font-weight:100 900;font-display:fallback;src:url('https://chbnuohuang.work/core/views/ff55dedaeb/assets/fonts/ysabeau-office/YsabeauOffice-Italic-VariableFont_wght.woff2') format('woff2');}
</style>
<link rel="icon" href="https://chbnuohuang.work/files/uploads/chbnuohuang-work-icon-150x150.png" sizes="32x32" />
<link rel="icon" href="https://chbnuohuang.work/files/uploads/chbnuohuang-work-icon-300x300.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://chbnuohuang.work/files/uploads/chbnuohuang-work-icon-300x300.png" />
<meta name="msapplication-TileImage" content="https://chbnuohuang.work/files/uploads/chbnuohuang-work-icon-300x300.png" />
</head>

<body class="wp-singular page-template-default page page-id-51 wp-embed-responsive wp-theme-twentytwentyfive">

<div class="wp-site-blocks">
<div class="wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><h1 class="has-text-align-center wp-block-post-title">midi-Synth | WordPress plugin</h1>

<div style="font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.196), 1rem);" class="entry-content alignfull wp-block-post-content is-layout-flow wp-container-core-post-content-is-layout-c951c46d wp-block-post-content-is-layout-flow">



<p></p>
</div></div>


<footer class="wp-block-template-part">
<div class="wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)">
<p class="has-text-align-center is-style-default"><strong><a href="http://chbnuohuang.work" data-type="link" data-id="chbnuohuang.work">chbnuohuang.work</a></strong></p>



<div style="margin-top:0;margin-bottom:0;height:5px" aria-hidden="true" class="wp-block-spacer"></div>



<p class="has-text-align-center is-style-default" style="margin-top:0;margin-bottom:0;font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.196), 1rem);">Copyright 2014-2025 诺惶 &amp; 六次元主世界情报管理中心 All rights reserved.</p>
</div>
</footer></div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/twentytwentyfive\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script src="https://chbnuohuang.work/core/modules/progress-bar/js/wppb_animate.js?rnd=58892" id="wppb_animate-js"></script>
<script id="wp-block-template-skip-link-js-after">
	( function() {
		var skipLinkTarget = document.querySelector( 'main' ),
			sibling,
			skipLinkTargetID,
			skipLink;

		// Early exit if a skip-link target can't be located.
		if ( ! skipLinkTarget ) {
			return;
		}

		/*
		 * Get the site wrapper.
		 * The skip-link will be injected in the beginning of it.
		 */
		sibling = document.querySelector( '.wp-site-blocks' );

		// Early exit if the root element was not found.
		if ( ! sibling ) {
			return;
		}

		// Get the skip-link target's ID, and generate one if it doesn't exist.
		skipLinkTargetID = skipLinkTarget.id;
		if ( ! skipLinkTargetID ) {
			skipLinkTargetID = 'wp--skip-link--target';
			skipLinkTarget.id = skipLinkTargetID;
		}

		// Create the skip link.
		skipLink = document.createElement( 'a' );
		skipLink.classList.add( 'skip-link', 'screen-reader-text' );
		skipLink.id = 'wp-skip-link';
		skipLink.href = '#' + skipLinkTargetID;
		skipLink.innerText = '跳至内容';

		// Inject the skip link.
		sibling.parentElement.insertBefore( skipLink, sibling );
	}() );
	
</script>
<script type="text/javascript">
//<![CDATA[
(function() {"use strict";
function __IsDevToolOpen() {const widthDiff = window.outerWidth - window.innerWidth > 160;const heightDiff = window.outerHeight - window.innerHeight > 160;if (navigator.userAgent.match(/iPhone/i)) return false;if (!(heightDiff && widthDiff) && ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthDiff || heightDiff)) {document.dispatchEvent(new Event('hmwp_is_devtool'));return true;}return false;}
var __devToolCheckInterval = setInterval(__IsDevToolOpen, 500);
function __disableOpen404() {document.documentElement.remove();}
function __showError(message) {var div = document.getElementById('disable_msg');if (message !== '' && div && (!div.style.display || div.style.display == 'none')) {div.innerHTML = message;div.style.display = 'block';setTimeout(function() {div.style.display = 'none';}, 1000);}}
function __disableEventListener(element, eventNames, message) {var events = eventNames.split(' ');events.forEach(function(event) {element.addEventListener(event, function(e) {e.preventDefault();if (message !== '') __showError(message);});});}
function __returnFalse() {return false;}
document.addEventListener("keydown", function(event) {
if ((event.ctrlKey || event.metaKey) && event.keyCode === 85) {event.preventDefault();__showError('View Source is disabled!');return false;}});
document.addEventListener("contextmenu", function(event) {event.preventDefault();return false;});
})();
//]]>
</script>
<style>#disable_msg{display:none;min-width:250px;margin-left:-125px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:999;left:50%;bottom:30px;font-size:17px}}</style>
<div id="disable_msg"></div></body>
</html>