Ich hab mir vor kurzer Zeit eine
Website gemacht, und damit es ein bisserl interessanter ist, ein spielbares Klavier mit html, css und JQuery programmiert. Solange ich es offline öffne funktioniert jede Taste, aber wenn ich es hochgeladen habe und dort öffne lädt es nicht immer alle Tasten, manchmal funktioniert Jquery auch gar nicht. Meistens geht es beim 1. Mal schlechter als bei den darauffolgenden Malen.
Zum Klavier: Wenn man über eine Taste fährt, sollte sie grau werden, und wenn man die Maus darüber loslässt sollte es den Ton spielen.
Der Code:
html index
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head> [...]
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>
<body>
[...]
<!--Piano-->
<div class="piano_background">
<div class="piano" w3-include-html="Piano/Piano.html"></div>
<script src="include.js"></script>
<script src="Piano/Piano.js"></script>
</div>
[...]
</body>
|
html piano
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="JQuery/jquery-ui.min.css">
<script src="JQuery/external/jquery/jquery.js"></script>
<script src="JQuery/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="Piano.css"/>
<script type="text/javascript" src="Piano.js"></script>
</head>
<body>
<div class="piano">
<!--Weiße Tasten-->
<div class="white" id="w_A0"></div>
[...]
<div class="black" id="A7"></div>
<p><br><a href="#" title="If it doesn't work you could try to reload the page" style="text-decoration:none;">Play me!</a></p>
</div>
</body>
</html>
|
js Piano
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
var main_func = function() {
$('.white').mouseenter(function() {
$(this).addClass('highlighted_white');
});
$('.white, .black').mouseleave(function() {
$(this).removeClass('highlighted_white');
});
$('.black').mouseenter(function() {
$(this).addClass('highlighted_black');
});
$('.black').mouseleave(function() {
$(this).removeClass('highlighted_black');
});
function Play($Audio) {
$Audio.currentTime = 0;
$Audio.play();
}
//
var A0 = document.createElement('audio');
A0.setAttribute('src', 'Note/A0.mp3');
var Bb0 = document.createElement('audio');
Bb0.setAttribute('src', 'Note/Bb0.mp3');
[...]
var C8 = document.createElement('audio');
C8.setAttribute('src', 'Note/C8.mp3');
// #w0_A0 -> weiße Taste
// #A0 -> Schwarze Taste
$('#w_A0').mouseup(function() {Play(A0);});
$('#A0').mouseup(function() {Play(Bb0);});
[...]
$('#w_C8').mouseup(function() {Play(C8);});
}
$(document).ready(main_func);
$(window).bind('page:change', main_func);
|
Include.js