-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (88 loc) · 5.03 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
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
106
107
108
109
110
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>musical-note by pianosnake</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://jasonlong.github.io/cayman-theme/css/cayman.css" media="screen">
<link rel="stylesheet" type="text/css" href="https://jasonlong.github.io/cayman-theme/css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="https://jasonlong.github.io/cayman-theme/css/github-light.css" media="screen">
<script src="musical-note.js"></script>
</head>
<body>
<section class="page-header">
<h1 class="project-name"><musical-note></h1>
<h2 class="project-tagline">A custom HTML element for a musical note.</h2>
<a href="https://github.com/pianosnake/musical-note" class="btn">View on GitHub</a>
<a href="https://github.com/pianosnake/musical-note/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/pianosnake/musical-note/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<p><musical-note> is a custom HTML element for a musical note in treble clef.</p>
<h2>Install</h2>
<p>Download the musical-note.js file from this repo using the 'Download' button and load the file into your page's HEAD section.
The script can also be referenced directly from github:</p>
<pre><code><script src="//pianosnake.github.io/musical-note/musical-note.js"></script>
</code></pre>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Usage
</h2>
<p>In your page's BODY define a note by name and octave in the <code>value</code> attribute.</p>
<pre><code><musical-note value="d#4"></musical-note></code></pre>
<musical-note value=d#4></musical-note>
<p>Define using a MIDI note number. Middle C is 60. C# above that is 61.</p>
<pre><code><musical-note value="61"></musical-note></code></pre>
<musical-note value=61></musical-note>
<p>Sharps are used by default, but the <code>flat</code> attribute will ensure the note is drawn using a flat.</p>
<pre><code><musical-note value="61" flat></musical-note></code></pre>
<musical-note value=61 flat></musical-note>
<p>Create a taller container by specifying a <code>height</code> attribute.</p>
<pre><code><musical-note value="66" height="300"></musical-note></code></pre>
<musical-note value=66 height=300></musical-note>
<p>The tags can be referenced like any other HTML elements.</p>
<pre><code><musical-note value="c3" id="myNote" height="160"></musical-note></code></pre>
<div class="highlight highlight-source-js">
<pre><span class="pl-k">var</span> note <span class="pl-k">=</span> <span class="pl-smi">document</span>.<span
class="pl-c1">getElementById</span>(<span class="pl-s"><span class="pl-pds">"</span>myNote<span
class="pl-pds">"</span></span>);</pre>
</div>
<p>Change the value of an existing note using the <code>setValue</code> method. Sharps are used by default, but if
the
second parameter to <code>setValue</code> is set to <code>true</code>, the note will be drawn using a flat
instead
of a sharp.</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-smi">note</span>.<span class="pl-en">setValue</span>(<span class="pl-c1">60</span>, <span
class="pl-c1">true</span>);</pre>
</div>
<musical-note value="c3" id="myNote" height=160></musical-note>
<p>Get the value of a note using <code>getValue()</code> <span id="noteValue"></span></p>
<p>Get the numeric value of a note <code>getNumericValue()</code> <span id="noteNumericValue"></span></p>
<script>
setTimeout(function () {
const start = 36;
const end = 80;
let current = start;
const myNote = document.getElementById("myNote");
const interval = setInterval(function () {
myNote.setValue(current, true);
document.getElementById("noteValue").innerText = myNote.getValue();
document.getElementById("noteNumericValue").innerText = myNote.getNumericValue();
current++;
if (current > end) {
current = start;
}
}, 100);
}, 3000);
</script>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/pianosnake/musical-note">musical-note</a>
is maintained by <a href="https://github.com/pianosnake">pianosnake</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>
using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason
Long</a>.</span>
</footer>
</section>
</body>
</html>