<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>html5实现乐器的演奏</title>
<style>
img{
border: 2px solidblack;
width: 213px;
height: 200px;
}
img:hover{
border: 2px solidred;
cursor: pointer;
}
#instrument{
width: 1345px;
height: 210px;
}
</style>
<script>
window.addEventListener("load",function(){
//首先获取所有的乐器图片
varimages=document.getElementByIdx_x("instrument").getElementsByTagName_r("img");
//为每个图片添加鼠标移上的事件
var audio=newAudio();
for(vari=0;i<images.length;i++){
//鼠标移上播放
images[i].addEventListener("mouseover",function(){
controls(this.id)
},true);
//鼠标离开停止播放
images[i].addEventListener("mouseout",function(){
audio.pause();
},true);
}
//下边添加键盘事件，通过键盘来控制播放的乐器种类
window.addEventListener("keydown",function(e){
//我们只有六个乐器
var keydata=[
{key :"D",sound : "dizi"},
{key :"E",sound : "erhu"},
{key :"G",sound : "guzheng"},
{key :"J",sound : "jita"},
{key :"Z",sound : "jizigu"},
{key :"X",sound : "xiaotiqin"}
];
//获取我们键盘按下所对应的码
e=e||event;
var kc= e.keyCode|| e.which;
//获取我们按键的内容
var kcData=String.fromCharCode(kc);
//将我们的按键与我们定义的乐器当中进行比较
for(varj=0;j<keydata.length;j++){
if(keydata[j].key==kcData){
controls(keydata[j].sound);
}
}
},true);
functioncontrols(fileName){
audio.pause();
//设置当前的播放声音
audio=newAudio("music/"+fileName+".mp3");
audio.play();
}
},true);
</script>
</head>
<body>
<h3>html5乐器演奏</h3>
<divid="instrument">
<img src="instrument/dizi.jpg"id="dizi">
<img src="instrument/erhu.jpg"id="erhu">
<img src="instrument/guzheng.jpg"id="guzheng">
<img src="instrument/jita.jpg"id="jita">
<img src="instrument/jiazigu.jpg"id="jiazigu">
<img src="instrument/xiaotiqin.jpg"id="xiaotiqin">
</div>
</body>
</html>
