-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (72 loc) · 4.7 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
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw and play</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<!-- polyfill -->
<script src="./inc/shim/Base64.js" type="text/javascript"></script>
<script src="./inc/shim/Base64binary.js" type="text/javascript"></script>
<script src="./inc/shim/WebAudioAPI.js" type="text/javascript"></script>
<!-- midi.js package -->
<script src="./js/midi/audioDetect.js" type="text/javascript"></script>
<script src="./js/midi/gm.js" type="text/javascript"></script>
<script src="./js/midi/loader.js" type="text/javascript"></script>
<script src="./js/midi/plugin.audiotag.js" type="text/javascript"></script>
<script src="./js/midi/plugin.webaudio.js" type="text/javascript"></script>
<script src="./js/midi/plugin.webmidi.js" type="text/javascript"></script>
<!-- utils -->
<script src="./js/util/dom_request_xhr.js" type="text/javascript"></script>
<script src="./js/util/dom_request_script.js" type="text/javascript"></script>
<!--Custom script-->
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<div id="container-fluid">
<!--<div class="h1 text-center">
Draw and play
</div>-->
<div class="container-fluid bg-secondary py-3">
<div class="row">
<div class="col-10 text-center">
<canvas id="canvas" width="1850" height="900px" style="background-color: white;"></canvas>
</div>
<div class="col text-center text-light">
<h6 class="mt-4">Controls</h6>
<button type="button" class="btn btn-primary mb-1" onclick="colorSet('#007bff')">Grand piano <span class="spinner-grow spinner-grow-sm" id="007bff"></span></button><br>
<button type="button" class="btn btn-success mb-1" onclick="colorSet('#28a745')">Acoustic guitar <span id="28a745"></span></button><br>
<button type="button" class="btn btn-warning mb-1" onclick="colorSet('#ffc107')">Flute <span id="ffc107"></span></button><br>
<button type="button" class="btn btn-danger mb-1" onclick="colorSet('#dc3545')">Electric guitar <span id="dc3545"></span></button><br>
<button type="button" class="btn btn-light" onclick="eraser()">Eraser <span id="eraser"></span></button>
<button type="button" class="btn btn-light" onclick="clearAll()">Clear all</button>
<h6 class="mt-5">Export or import your drawing</h6>
<button type="button" class="btn btn-light mb-1" onclick="exportNotes()">Export</button><br>
<div class="custom-file">
<input class="custom-file-input" type="file" name="upload" id="upload" onchange="uploadNotes(this)" onclick="eraser()">
<label class="custom-file-label" for="upload">Choose file</label>
</div>
<h6 class="mt-5">Record your song</h6>
<button id="beginRec" type="button" class="btn btn-light" onclick="recorder(true)">Begin recording</button><br>
<button id="endRec" type="button" class="btn btn-light" onclick="recorder(false)" style="display: none;">End recording</button>
</div>
</div>
</div>
<div class="container text-center">
<h5>About the project & how to use</h5>
<p>This peoject was done as part of the subject Computer based sound production at University of Ljubljana.</p>
<p>On the surface above you can draw lines which will act as musical notes. To select the instrument, use the appropriate buttons on the right and draw by clicking where you want the note to start and releasing where you want it to end. To play a note simply move your mouse over the drawn line. The faster you move, the louder it will be (like pressing harder on piano keys).</p>
<p>If you make a mistake you can erase notes by using the <i>Eraser</i> button by clicking and moving your mouse over notes while holding the mouse button. If you want to erase all lines, click <i>Clear all</i>.</p>
<p>You can also save your drawing by clicking the <i>Export</i> button. Likewise, you can import your previously saved drawings by loading the correct file from your device.</p>
<p>You can also record the played notes (in Google Chrome) by pressing the <i>Begin recording</i> button. Once you're done playing, click <i>End recording</i> and the song will download to your device.</p>
</div>
</div>
<footer class="text-center">
© Matevž Špacapan, 2020<br>
This project uses the <a href="https://galactic.ink/midi-js/">MIDI-js library</a>.
</footer>
</body>
</html>