JavaScript30/index.html at master · Tig10/JavaScript30 · GitHub

Repository navigation

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>JS Drum Kit</title>

<link rel="stylesheet" type="text/css" media="screen" href="./styles.css">

</head>

<body>

<div class="keys">

<div data-key="65" class="key">

<kbd>A</kbd>

<span class="sound" >clap</span>

</div>

<div data-key="83" class="key">

<kbd>S</kbd>

<span class="sound">hihat</span>

</div>

<div data-key="68" class="key">

<kbd>D</kbd>

<span class="sound" >kick</span>

</div>

<div data-key="70" class="key">

<kbd>F</kbd>

<span class="sound">openhat</span>

</div>

<div data-key="71" class="key">

<kbd>G</kbd>

<span class="sound">boom</span>

</div>

<div data-key="72" class="key">

<kbd>H</kbd>

<span class="sound">ride</span>

</div>

<div data-key="74" class="key">

<kbd>J</kbd>

<span class="sound">snare</span>

</div>

<div data-key="75" class="key">

<kbd>K</kbd>

<span class="sound">tom</span>

</div>

<div data-key="76" class="key">

<kbd>L</kbd>

<span class="sound">tink</span>

</div>

<div data-key="186" class="key">

<kbd>;</kbd>

<span class="sound">crash</span>

</div>

</div>

<audio data-key="65" src="./sounds/clap.wav"></audio>

<audio data-key="83" src="./sounds/hihat.wav"></audio>

<audio data-key="68" src="./sounds/kick.wav"></audio>

<audio data-key="70" src="./sounds/openhat.wav"></audio>

<audio data-key="71" src="./sounds/boom.wav"></audio>

<audio data-key="72" src="./sounds/ride.wav"></audio>

<audio data-key="74" src="./sounds/snare.wav"></audio>

<audio data-key="75" src="./sounds/tom.wav"></audio>

<audio data-key="76" src="./sounds/tink.wav"></audio>

<audio data-key="186" src="./sounds/crash.mp3"></audio>

<script src="./main.js"></script>

</body>

</html>