forked from mizuman/sss
-
Notifications
You must be signed in to change notification settings - Fork 1
/
drum.html
116 lines (105 loc) · 4.1 KB
/
drum.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="drum">
<ul class="drum-tabs">
<li data-index="0" class="drum-tab drum-tab-hh active" id="tab-hh">Hi-Hat
<li data-index="1" class="drum-tab drum-tab-bd" id="tab-bd">Bass Drum
<li data-index="2" class="drum-tab drum-tab-sd" id="tab-sd">Snare
</ul>
<section data-index="0" class="drum-content drum-content-hh active">
<div class="drum-item drum-hh">
Hi-Hat
<div class="drum-effect" id="sounds-hh"></div>
</div>
</section>
<section data-index="1" class="drum-content drum-content-bd">
<div class="drum-item drum-bd">
Bass Drum
<div class="drum-effect" id="sounds-bd"></div>
</div>
</section>
<section data-index="2" class="drum-content drum-content-sd">
<div class="drum-item drum-sd">
Snare
<div class="drum-effect" id="sounds-sd"></div>
</div>
</section>
<div class="drum-connectWrapper">
<select id="contactlist" name="contact"></select>
<button type="button" class="drum-connectBtn" id="make-connection">Connect</button>
</div>
<div id="session">
<button type="button" id="session-response">Join</button>
</div>
<div id="sound-buttons">
<!-- <img class="col-xs-6 col-md-4" id="sounds-hh" src="http://dummyimage.com/200x150/eee/0010ee&text=Hi-hat"> -->
<!-- <img class="col-xs-6 col-md-4" id="sounds-sd" src="http://dummyimage.com/200x150/eee/0010ee&text=Snare+Drum"> -->
<!-- <img class="col-xs-6 col-md-4" id="sounds-bd" src="http://dummyimage.com/200x150/eee/0010ee&text=Bass+Drum"> -->
<!-- <img class="col-xs-6 col-md-4" id="sounds-cy" src="http://dummyimage.com/200x150/eee/0010ee&text=Cymbal"> -->
</div>
<div id="history">
<ul>
</ul>
</div>
</section>
<script type="text/javascript">
// ユーザ名をランダムに生成
var userName = 'drum' + Math.floor(Math.random() * 100);
var myInst = 'drum';
var myKey = 'hh';
</script>
<script src="./js/jquery-2.1.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="https://skyway.io/dist/0.3/peer.js"></script>
<script src="./js/funky.js"></script>
<script src="./js/script.js"></script>
<script>
$(function(){
$(".drum").on("touchstart", ".drum-item", function(){
$(this).addClass("touched");
});
$(".drum").on("touchend", ".drum-item", function(){
$(this).removeClass("touched");
$(this).find(".drum-effect").addClass("anime-push").one("webkitAnimationEnd",function(){
$(this).removeClass("anime-push");
});
});
var $contents = $(".drum-content");
var $tabs = $(".drum-tab");
$tabs.each(function() {
$(this).on("click",function(){
var idx = $(this).attr("data-index");
if( idx === $(".drum-conent.active").attr("data-index") ){
}else{
$tabs.each(function(){
$(this).removeClass("active");
});
$contents.each(function(){
$(this).removeClass("active");
})
$(this).addClass("active");
$($contents[idx]).addClass("active");
}
});
});
});
</script>
</body>
</html>