Skip to content

Commit 5996ea7

Browse files
author
name
committed
Format.
1 parent 62446b7 commit 5996ea7

File tree

7 files changed

+954
-889
lines changed

7 files changed

+954
-889
lines changed

‎bundle/example.css renamed to ‎bundle/example-dialpad.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,28 @@ html {
33
}
44

55
body {
6+
width: calc(100vw - 2em);
7+
height: calc(100vh - 2em);
8+
margin: 1em;
69
background-color: lightgray;
710
text-align: center;
811
}
912

10-
div.tile {
13+
.tile {
1114
display: inline-block;
1215
border: 1px solid black;
1316
border-radius: 5px;
1417
background-color: white;
1518
text-align: center;
1619
}
1720

18-
div.tile.medium {
21+
.tile.medium {
1922
max-width: 30%;
2023
max-height: 30%;
2124
padding: 5em;
2225
}
2326

24-
div.tile.large {
27+
.tile.large {
2528
min-width: 60vw;
2629
max-width: 90vw;
2730
min-height: 60vh;

‎bundle/example-dialpad.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<link rel="stylesheet" href="example.css">
6+
<link rel="stylesheet" href="example-dialpad.css">
77
<script type="text/javascript" src="./web-tones.js"></script>
88
<script type="text/javascript" src="./example-dialpad.js"></script>
99
</head>

‎bundle/example-dialpad.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
var simpleConsole2 = new WebTones.JavascriptConsole();
2-
var phoneDialPad;
3-
var examplePlayInput = function (id) {
4-
var input = document.getElementById(id);
5-
if (input)
6-
examplePlayNumber(input.value);
7-
};
8-
var examplePlayNumber = function (number) {
9-
if (!phoneDialPad)
10-
phoneDialPad = new WebTones.DialPad(simpleConsole2);
11-
phoneDialPad.playPhoneNumber(number);
12-
};
13-
var examplePlayTone = function () {
14-
if (!phoneDialPad)
15-
phoneDialPad = new WebTones.DialPad(simpleConsole2);
16-
phoneDialPad.playTone(null, phoneDialPad.getCurrentTimeSec(), 700, 5000, 5000);
17-
setTimeout(function () {
18-
phoneDialPad.muteNow(1);
19-
}, 4000);
20-
};
1+
var simpleConsole2 = new WebTones.JavascriptConsole();
2+
var phoneDialPad;
3+
var examplePlayInput = function (id) {
4+
var input = document.getElementById(id);
5+
if (input)
6+
examplePlayNumber(input.value);
7+
};
8+
var examplePlayNumber = function (number) {
9+
if (!phoneDialPad)
10+
phoneDialPad = new WebTones.DialPad(simpleConsole2);
11+
phoneDialPad.playPhoneNumber(number);
12+
};
13+
var examplePlayTone = function () {
14+
if (!phoneDialPad)
15+
phoneDialPad = new WebTones.DialPad(simpleConsole2);
16+
phoneDialPad.playTone(null, phoneDialPad.getCurrentTimeSec(), 700, 5000, 5000);
17+
setTimeout(function () {
18+
phoneDialPad.muteNow(1);
19+
}, 4000);
20+
};

‎bundle/example-piano.css

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
body {
2+
width: calc(100vw - 2em);
3+
height: calc(100vh - 2em);
4+
margin: 1em;
5+
overflow: hidden scroll;
6+
background-color: lightgray;
7+
text-align: center;
8+
}
9+
10+
.tile {
11+
display: inline-block;
12+
border: 1px solid black;
13+
border-radius: 5px;
14+
background-color: white;
15+
text-align: center;
16+
}
17+
18+
.tile.medium {
19+
max-width: 30%;
20+
max-height: 30%;
21+
padding: 5em;
22+
}
23+
24+
.tile.large {
25+
min-width: 60vw;
26+
max-width: 90vw;
27+
min-height: 60vh;
28+
max-height: 90vh;
29+
padding: 5em;
30+
overflow: scroll;
31+
}
32+
33+
.wide {
34+
display: block;
35+
width: 90%;
36+
}
37+
38+
button.play {
39+
margin: 0.4em;
40+
}
41+
42+
textarea.staff {
43+
width: 90%;
44+
height: 40%;
45+
resize: vertical;
46+
border: 1px solid black;
47+
}
48+
49+
div.staff {
50+
width: 90%;
51+
height: 50%;
52+
resize: vertical;
53+
display: inline-block;
54+
background-color: white;
55+
border: 1px solid black;
56+
overflow: hidden scroll;
57+
}

‎bundle/example-piano.html

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<link rel="stylesheet" href="example.css">
6+
<link rel="stylesheet" href="example-piano.css">
77
<script type="text/javascript" src="./web-tones.js"></script>
88
<script type="text/javascript" src="./example-piano.js"></script>
99
<script type="text/javascript">
@@ -18,13 +18,12 @@
1818
</head>
1919

2020
<body>
21-
<div class="tile large">
22-
<textarea id="number_input" class="wide"></textarea>
23-
<button id="play_button">Play music</button>
24-
<br />
25-
<div>
26-
<canvas id="staff_output" class="" width="800" height="1200"></canvas>
27-
</div>
21+
<textarea id="number_input" class="staff"></textarea>
22+
<br />
23+
<button id="play_button">Play music</button>
24+
<br />
25+
<div class="staff">
26+
<canvas id="staff_output" class="staff" width="800" height="600"></canvas>
2827
</div>
2928
<div id="console"></div>
3029
</body>

‎bundle/example-piano.js

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
var simpleConsole;
2-
var piano;
3-
var examplePlayMusic = function (id) {
4-
if (!simpleConsole)
5-
simpleConsole = new WebTones.JavascriptConsole();
6-
if (!piano)
7-
piano = new WebTones.Piano(simpleConsole);
8-
var input = document.getElementById(id);
9-
if (input) {
10-
var staffPlayer = new WebTones.StaffStringPlayer(piano);
11-
staffPlayer.setCarret(input.selectionStart);
12-
staffPlayer.process(input.value);
13-
}
14-
};
15-
var exampleDrawMusic = function (inputId, outputId) {
16-
var input = document.getElementById(inputId);
17-
var output = document.getElementById(outputId);
18-
var staffPainter = new WebTones.StaffStringPainter(output);
19-
staffPainter.setCarret(input.selectionStart);
20-
staffPainter.process(input.value);
21-
output.width = staffPainter.getWidth();
22-
staffPainter.process(input.value);
23-
console.log("W=" + staffPainter.getWidth());
24-
console.log("H=" + staffPainter.getHeight());
25-
};
26-
var notesFuElise = "e5/16,d#5/16 |\ne5/16,d#5/16,e5/16,b4/16,d#5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,h4/16 |\nb4/8:e2/16,e3/16,g#3/16 e4/16,g#4/16,b4/16 |\nc5/8:a2/16,e3/16,a3/16 e4/16,e5/16,d#5/16 |\ne5/16,d#5/16,e5/16,b4/16,d#5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 ||\n\nb4/8:e2/16,e3/16,g#3/16 d4/16,c5/16,b4/16 |\na4/4:a2/16,e3/16,a3/16 | |\na4/8:a2/16,e3/16,a3/16 b4/16,c5/16,d5/16 |\ne5/8:c3/16,g3/16,c4/16 g4/16,f5/16,e5/16 |\nd5/8:g2/16,g3/16,b3/16 f4/16,e5/16,d5/16 |\nc5/8:a2/16,e3/16,a3/16 e4/16,d5/16,c5/16 |\nb4/8:e2/16,e3/16,e4/16 e4/16,e5/16 g2/16 ||\n\ng3/16 e5/16,e6/16 f3/16,g3/16 d#5/16 |\ne5/16 f#3/16,g3/16 d#5/16,e5/16,d5/16 |\ne5/16,d#5/16,e5/16,b4/16,d#5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 |\nb4/8:e2/16,e3/16,g#3/16 e4/16,g#4/16,b4/16 |\nc5/8:a2/16,e3/16,a3/16 e4/16,e5/16,d#5/16 ||\n\ne5/16,d#5/16,e5/16,b4/16,d5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 |\nb4/8:e2/16,e3/16,g3/16 d4/16,c5/16,b4/16 |\na4/8:a2/16,e3/16,a3/16 b4/16,c5/16,d5/16 | |\n\na4/8:a2/16,e3/16,a3/16 c5/16,c5/16,c5/16:e4/16,f4/16,g4/16 e4/16 b3/16,c4/16,c4/16 |\nf4/16,a4/16 c5/4:f3/16,a3/16,c4/16,a3/16,c4/16,a3/16 ||\n\ne5/8,d5/8:f3/16,b3/16,d4/16,b3/16,d4/16,b3/16 |\na5/16,g5/16,f5/16,e5/16,d5/16,c5/16:f3/16,e4/16,b3/16,c4/16,b3/16,c4/16 |\nb4/8,a4/8,b4/8,a4/32,g4/32,a4/32,b4/32:f3/16,a3/16,c4/16,a3/16,c4/16,a3/16 |\nc5/4 d5/8,d5/8 |\ne5/8 e5/16,f5/8,a4/8 |\nc5/4 d5/16,b4/32 ||";
1+
var simpleConsole;
2+
var piano;
3+
var examplePlayMusic = function (id) {
4+
if (!simpleConsole)
5+
simpleConsole = new WebTones.JavascriptConsole();
6+
if (!piano)
7+
piano = new WebTones.Piano(simpleConsole);
8+
var input = document.getElementById(id);
9+
if (input) {
10+
var staffPlayer = new WebTones.StaffStringPlayer(piano);
11+
staffPlayer.setCarret(input.selectionStart);
12+
staffPlayer.process(input.value);
13+
}
14+
};
15+
var exampleDrawMusic = function (inputId, outputId) {
16+
var input = document.getElementById(inputId);
17+
var output = document.getElementById(outputId);
18+
var staffPainter = new WebTones.StaffStringPainter(output);
19+
staffPainter.setCarret(input.selectionStart);
20+
staffPainter.process(input.value);
21+
output.width = staffPainter.getWidth();
22+
output.height = staffPainter.getHeight();
23+
staffPainter.process(input.value);
24+
};
25+
var notesFuElise = "e5/16,#d5/16 |\ne5/16,#d5/16,e5/16,b4/16,#d5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 |\nb4/8:e2/16,e3/16,#g3/16 e4/16,#g4/16,b4/16 |\nc5/8:a2/16,e3/16,a3/16 e4/16,e5/16,#d5/16 |\ne5/16,#d5/16,e5/16,b4/16,#d5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 $\n\nb4/8:e2/16,e3/16,#g3/16 d4/16,c5/16,b4/16 |\na4/4:a2/16,e3/16,a3/16 | |\na4/8:a2/16,e3/16,a3/16 b4/16,c5/16,d5/16 |\ne5/8:c3/16,g3/16,c4/16 g4/16,f5/16,e5/16 |\nd5/8:g2/16,g3/16,b3/16 f4/16,e5/16,d5/16 |\nc5/8:a2/16,e3/16,a3/16 e4/16,d5/16,c5/16 |\nb4/8:e2/16,e3/16,e4/16 e4/16,e5/16 g2/16 $\n\ng3/16 e5/16,e6/16 f3/16,g3/16 #d5/16 |\ne5/16 #f3/16,g3/16 #d5/16,e5/16,d5/16 |\ne5/16,#d5/16,e5/16,b4/16,#d5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 |\nb4/8:e2/16,e3/16,#g3/16 e4/16,#g4/16,b4/16 |\nc5/8:a2/16,e3/16,a3/16 e4/16,e5/16,#d5/16 $\n\ne5/16,#d5/16,e5/16,b4/16,#d5/16,c5/16 |\na4/8:a2/16,e3/16,a3/16 c4/16,e4/16,a4/16 |\nb4/8:e2/16,e3/16,#g3/16 d4/16,c5/16,b4/16 |\na4/8:a2/16,e3/16,a3/16 b4/16,c5/16,d5/16 | |\na4/8:a2/16,e3/16,a3/16 c5/16,c5/16,c5/16:e4/16,f4/16,g4/16:b3/16,c4/16,c4/16 |\nf4/16,a4/16 c5/4,c5/16,c4/8:f3/16,a3/16,c4/16,a3/16,c4/16,a3/16 $\n\ne5/8,d5/8:f3/16,b3/16,d4/16,b3/16,d4/16,b3/16 |\na5/16,g5/16,f5/16,e5/16,d5/16,c5/16:f3/16,e4/16,b3/16,c4/16,b3/16,c4/16 |\nb4/8,a4/8,b4/8,a4/32,g4/32,a4/32,b4/32:f3/16,a3/16,c4/16,a3/16,c4/16,a3/16 |\nc5/4 d5/8,d5/8 |\ne5/8 e5/16,f5/8,a4/8 |\nc5/4 d5/16,b4/32 $";

0 commit comments

Comments
 (0)