钢琴piano

最新推荐文章于 2025-08-11 23:19:59 发布

转载最新推荐文章于 2025-08-11 23:19:59 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/realwall/archive/2012/07/06/2579157.html

文章标签：

#javascript #ViewUI

这个东西技术很简单，问题的关键是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

转载于:https://www.cnblogs.com/realwall/archive/2012/07/06/2579157.html