-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (51 loc) · 3.4 KB
/
index.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
<!-- First step: Use the boilerplate of HTML 5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Overwhelming Orchestra</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- The idea is to build nine buttons with different instruments on them. If you click on one button, the instrument's sound starts and the button will change color (to mark that it's clicked).
If you click again, the sound stops and the color changes back to original.
As images for the instruments, emojis can be used.
Sound files will be provided in a "Sounds" folder. -->
<!-- Creating a header for the headline and description. -->
<header>
<h1>The Overwhelming Orchestra</h1>
<p>Click on a button to play an instrument. To turn it off, click again</p>
</header>
<!-- Creating a section for the actual orchestra -->
<section class="orchestra">
<!-- Creating a div as a container for all the buttons -->
<div class="button-container">
<!-- Creating nine buttons. The emojis are inserted with simple copy/paste from a page like this http://unicode.org/emoji/charts/full-emoji-list.html -->
<!-- The argument of the playAudio-function needs to be the id of the corresponding audio-tag. (I found this out but can't actually explain why this is the case, haha.) -->
<!-- The argument of the toggleButton-function is the id of the corresponding button. -->
<!-- I add loop to each audio file so that it will play endlessley until it's turned off again by clicking -->
<button id="saxBtn" onclick="playAudio(saxophone), toggleButton(saxBtn)">🎷</button>
<audio id="saxophone" src="./sounds/saxophone.wav" type="wav" loop></audio>
<button id="guitarBtn" onclick="playAudio(guitar), toggleButton(guitarBtn)">🎸</button>
<audio id="guitar" src="./Sounds/guitar.wav" type="wav" loop></audio>
<button id="pianoBtn" onclick="playAudio(piano), toggleButton(pianoBtn)">🎹</button>
<audio id="piano" src="./Sounds/piano.wav" type="wav" loop></audio>
<button id="trumpetBtn" onclick="playAudio(trumpet), toggleButton(trumpetBtn)">🎺</button>
<audio id="trumpet" src="./Sounds/trumpet.wav" type="wav" loop></audio>
<button id="violinBtn" onclick="playAudio(violin), toggleButton(violinBtn)">🎻</button>
<audio id="violin" src="./Sounds/violin.wav" type="wav" loop></audio>
<button id="banjoBtn" onclick="playAudio(banjo), toggleButton(banjoBtn)">🪕</button>
<audio id="banjo" src="./Sounds/banjo.mp3" type="mp3" loop></audio>
<button id="drumsBtn" onclick="playAudio(drums), toggleButton(drumsBtn)">🥁</button>
<audio id="drums" src="./Sounds/drums.wav" type="wav" loop></audio>
<button id="voicesBtn" onclick="playAudio(voices), toggleButton(voicesBtn)">🎤</button>
<audio id="voices" src="./Sounds/voices.mp3" type="mp3" loop></audio>
<button id="bellBtn" onclick="playAudio(bell), toggleButton(bellBtn)">🔔</button>
<audio id="bell" src="./Sounds/bell.wav" type="wav" loop></audio>
</div>
</section>
<!-- Create connection with the Javascript file -->
<script src="./script.js"></script>
</body>
</html>