repl.it
@ItsYeBoiJ/

Music_Box_Editor

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • animation
  • notes
  • sounds
  • animation.js
  • lottie.js
  • musicbox.js
  • style.css
  • UI.js
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
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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Music Box</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
  		<script type="text/javascript" src="lottie.js">

		</script>
	
	<center>
   			<h1 >BASIC MUSIC BOX EDITOR</h1>
			<p><i>click on keys to set notes then press play</i></p>
      <p><i>lower notes on the left - higher notes on the right</i></p>

		<div id="UI"></div>


			<audio data-key="1" src="notes/1.mp3"></audio>
			<audio data-key="2" src="notes/2.mp3"></audio>
			<audio data-key="3" src="notes/3.mp3"></audio>
			<audio data-key="4" src="notes/4.mp3"></audio>
			<audio data-key="5" src="notes/5.mp3"></audio>
			<audio data-key="6" src="notes/6.mp3"></audio>
			<audio data-key="7" src="notes/7.mp3"></audio>
			<audio data-key="8" src="notes/8.mp3"></audio>
			<audio data-key="9" src="notes/9.mp3"></audio>

</center>

	<audio id="windUp" src="sounds/windup.mp3"></audio>



<center>
  	<div class="lottieclass" id="lottie"></div>
      <p></p>
  <button id="play" onclick="loadAnimation(); resetNotes();generateMusic();playNotes()">♫ play ♪</button>

		 <p></p>


<a>Delay: </a><a id="delayVal">350</a><input oninput="displayDelay(this.value)"  onchange="displayDelay(this.value)" type="range" min="20" max="1000" value="350" class="slider" id="Tempo_Input" >
 <a>🔊</a><input type="range" min="0" max="100" value="20" class="slider" id="volumeSlider">
 <p></p>
<button class="buttoncol" id="generate" onclick="createMusicBox()">+♪</button>


<button class="buttoncol" id="reset" onclick="resetNotes();clearKeys()">reset</button>
<button class="buttoncol" id="delete" onclick="deleteMusicBox()">-♪</button>
 <p></p>
 <a>📋</a>
<input id="copy_input" value="1" size="1" style="font-size:25px;height:30px">
<button class="buttoncol" id="copy" onclick="createMusicBox();copyNotes();">♪♪</button>
<button class="buttoncol" id="random" onclick="randomNotes();">rdm</button>
 <p></p>
   <!-- <p><a> ♩ ♪ ♫ ♬ ♩ ♪ ♫ ♬ ♩ ♪ ♫ ♬</a></p> -->
	<!-- animation is stored in a variable from this file -->

		<script type="text/javascript" src="animation/idle.json">

		</script>
		<script type="text/javascript" src="animation/load.json">

		</script>
		<script type="text/javascript" src="animation/play.json">

		</script>



 <a>💾</a><input id="Save_Input" value="" size="58">
<p></p>
<button class="buttoncol" id="load" onclick="resetNotes();loadKeys();"> load 💾</button>
<p ></p>
<p>Record Collection:</p>
<button class="lib" id="demo" onclick="demo('basic_joy',4);">Basic Joy</button>
<button class="lib" id="demo2" onclick="demo('silent_night',7);">Stille Nacht </button>
<button class="lib" id="demo3" onclick="demo('elf_song',4);">Elf Song</button>
<button class="lib" id="demo4" onclick="demo('heart',1);">❤️ Notes</button>
<p ></p>
</center>


<script type="text/javascript" src="animation.js">


</script>




<p style="font-size:15px"><i>Keep saved music sheets in a text file, press demo to load test sample. A reset might be needed if there are existing notes already </i></p>
<div id="notebook"></div>
<script src="UI.js"></script>
<script  src="musicbox.js">

</script>

</body>
</html>
result
console