这个东西技术很简单，问题的关键是1 2 3 4 5 6 7 8键音不好找，最后终于找到一款强大的软件《电脑演奏家 V4.0》，自己录音，然后用 格式工厂 再转成ogg格式，总算可以了。
把上面的挂图的文件后缀名改为zip就可以了。
HTML:
<html>
<head>
<title> HTML5 audio piano </title>
</head>
<body>
<style type="text/css">
audio {
display: none;
}
</style>
<div id="container">
<audio id="audio1" controls="controls">
<source src="music/1.ogg" type="audio/ogg"></source>
<source src="music/1.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio2" controls="controls">
<source src="music/2.ogg" type="audio/ogg"></source>
<source src="music/2.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio3" controls="controls">
<source src="music/3.ogg" type="audio/ogg"></source>
<source src="music/3.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio4" controls="controls">
<source src="music/4.ogg" type="audio/ogg"></source>
<source src="music/4.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio5" controls="controls">
<source src="music/5.ogg" type="audio/ogg"></source>
<source src="music/5.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio6" controls="controls">
<source src="music/6.ogg" type="audio/ogg"></source>
<source src="music/6.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio7" controls="controls">
<source src="music/7.ogg" type="audio/ogg"></source>
<source src="music/7.mp3" type="audio/mp3"></source>
</audio>
<audio id="audio8" controls="controls">
<source src="music/8.ogg" type="audio/ogg"></source>
<source src="music/8.mp3" type="audio/mp3"></source>
</audio>
<input type="button" id="focusButtion" value="play"/>
</div>
<script type="text/javascript" src="piano.js"></script>
</body>
</html>
js：
/************ piano.js ***********/
var toneDom = {};
function play(tone){
if(!toneDom[tone]){
toneDom[tone] = document.getElementById('audio' + tone);
}
toneDom[tone].currentTime = 0;
toneDom[tone].play();
}
var focusButtion = document.getElementById('focusButtion');
focusButtion.onkeyup = function(e){
var event = e || window.event;
console.log(event.keyCode);
switch(event.keyCode){
case 97:
case 65:
play(1);
break;
case 98:
case 83:
play(2);
break;
case 99:
case 68:
play(3);
break;
case 100:
case 70:
play(4);
break;
case 101:
case 74:
play(5);
break;
case 102:
case 75:
play(6);
break;
case 103:
case 76:
play(7);
break;
case 104:
case 59:
play(8);
break;
}
};
一个可以弹钢琴的小东西就出来了
附乐谱一曲：1231 1231 345 345 565431 565431 151 151