サンプル3（マウスで弾ける鍵盤）


Sound:
このページのソース
<!DOCTYPE html>
<html>
<head>
<title>サンプル3（マウスで弾ける鍵盤）</title>

<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<meta charset="utf-8">

<style type="text/css">
.pink{background-color:pink;width:1000px;}
.hidden {visibility:hidden;width:0px;height:0px;
 margin:0px;padding:0px;border-style:none;border-width:0px;
 max-width:0px;max-height:0px;}

div#pianoupper {position: relative;color: #808080;height: 80px;}
 
div.hakken {position: absolute;
 left: 0px;top: 0px;border-left: 1px solid;width: 112px;}
.hakken span {background-color: #fffdfa;
 padding: 0px;margin: 0px;border: 1px solid;border-left: 0px;
 display: inline-block;width: 27px;height: 66px;vertical-align: top;}
.hakken span.on {background-color: #aaa;}

div.kokken {position: absolute;
 left: 0px;top: 0px;margin-left: 18px;width: 112px;}
.kokken span {position: relative;z-index: 1;background-color: #111;
 padding: 0px;margin: 0px;border: 1px solid;
 display: inline-block;width: 15px;height: 36px;
 margin-right: 15px;vertical-align: top;}
.kokken span.on {background-color: #666;}
.kokken span.break {border: 0px;display: inline-block;
 width: 1px;margin-right: 17px;visibility:hidden;}

</style>

</head>

<body>
<h1>サンプル3（マウスで弾ける鍵盤）</h1>

<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
  <object id="Jazz2" type="audio/x-jazz" class="hidden">
    <p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
  </object>
</object>


<div id=pianoupper>
	<div class=kokken>
		<span id=49></span><span id=51></span>
	</div>
	<div class=hakken>
		<span id=48></span><span id=50></span><span id=52></span>
	</div>
</div>

<br>
Sound: <select id=midiSnd onchange='changeSnd();'></select>

<script><!--
var Jazz = document.getElementById("Jazz1");
if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");

var gmidi=['Acoustic Grand Piano',...（中略）...'Gunshot'];

var current_snd=0;
var selSnd=document.getElementById("midiSnd");
for(var i in gmidi){
 selSnd[i]=new Option(gmidi[i],i,!i,!i);
}

function changeSnd(){
 current_snd=selSnd.options[selSnd.selectedIndex].value;
 Jazz.MidiOut(0xc0,current_snd,0);
}

var key;

document.onmousedown=function(e){
	var e=window.event || e;
	var k;
	if (e.target) k = e.target;
	else if (e.srcElement) k = e.srcElement;
	var m=parseInt(k.id);
	if(k.id==m){
		Jazz.MidiOut(0x90,m,0x7f);
		k.className="on";
		key=k;
	}
}

document.onmouseup=function(e){
	if(key){
		var m=parseInt(key.id);
		Jazz.MidiOut(0x80,m,0);
		key.className="";
		key="";
	}
}

window.onload=function(){
	Jazz.MidiOut(0x80,0,0);
}

--></script>

</body>
</html>