-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmusic.html
118 lines (103 loc) · 3.5 KB
/
music.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
117
118
<!doctype HTML>
<html>
<head>
<title>AR Music</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" href="https://img.icons8.com/external-glyph-on-circles-amoghdesign/344/external-abc-education-vol-02-glyph-on-circles-amoghdesign.png" type="image/x-icon">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js" integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<img id="drums" src="./assets/drums.png">
<img id="guitar" src="./assets/guitar.png">
<img id="mic" src="./assets/mic.png">
<img id="piano" src="./assets/piano.png">
</a-assets>
<a-marker class="ar-marker" id="drums-marker" type='barcode' value='0'>
<a-image src="#drums" rotation="90 0 0"></a-image>
</a-marker>
<a-marker class="ar-marker" id="guitar-marker" type='barcode' value='1'>
<a-image src="#guitar" rotation="90 0 0"></a-image>
</a-marker>
<a-marker class="ar-marker" id="mic-marker" type='barcode' value='2'>
<a-image src="#mic" rotation="90 0 0"></a-image>
</a-marker>
<a-marker class="ar-marker" id="piano-marker" type='barcode' value='3'>
<a-image src="#piano" rotation="90 0 0"></a-image>
</a-marker>
<!-- add a simple camera -->
<a-entity camera></a-entity>
</a-scene>
<script>
var drums = new Howl({
src: ['./audio/drums.mp3']
});
var guitar = new Howl({
src: ['./audio/guitar.mp3']
});
var mic = new Howl({
src: ['./audio/mic.mp3']
});
var piano = new Howl({
src: ['./audio/piano.mp3']
});
drums.mute(true);
guitar.mute(true);
mic.mute(true);
piano.mute(true);
drums.play();
guitar.play();
mic.play();
piano.play();
// function playGuitar() {
// guitar.play();
// }
// function pauseGuitar() {
// guitar.pause();
// }
// function stopGuitar() {
// guitar.stop();
// }
// function muteGuitar() {
// guitar.mute(true);
// }
// function unmuteGuitar() {
// guitar.mute(false);
// }
window.onload = function () {
const drumsMarker = document.getElementById('drums-marker');
const guitarMarker = document.getElementById('guitar-marker');
const micMarker = document.getElementById('mic-marker');
const pianoMarker = document.getElementById('piano-marker');
drumsMarker.addEventListener('markerFound', function() {
drums.mute(false);
});
drumsMarker.addEventListener('markerLost', function() {
drums.mute(true);
});
guitarMarker.addEventListener('markerFound', function() {
guitar.mute(false);
});
guitarMarker.addEventListener('markerLost', function() {
guitar.mute(true);
});
micMarker.addEventListener('markerFound', function() {
mic.mute(false);
});
micMarker.addEventListener('markerLost', function() {
mic.mute(true);
});
pianoMarker.addEventListener('markerFound', function() {
piano.mute(false);
});
pianoMarker.addEventListener('markerLost', function() {
piano.mute(true);
});
}
</script>
</body>
</html>