<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html5实现乐器的演奏</title>
<style>
img{
border: 2px solid black;
width: 213px;
height: 200px;
}
img:hover{
border: 2px solid red;
cursor: pointer;
}
#instrument{
width: 1345px;
height: 210px;
}
</style>
<script>
window.addEventListener("load",function(){
//首先获取所有的乐器图片
var images=document.getElementByIdx_x("instrument").getElementsByTagName_r("img");
//为每个图片添加鼠标移上的事件
var audio=new Audio();
for(var i=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(var j=0;j<keydata.length;j++){
if(keydata[j].key==kcData){
controls(keydata[j].sound);
}
}
},true);
function controls(fileName){
audio.pause();
//设置当前的播放声音
audio=new Audio("music/"+fileName+".mp3");
audio.play();
}
},true);
</script>
</head>
<body>
<h3>html5乐器演奏</h3>
<div id="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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
455
