@theoryofnekomata/piano-keyboard
Version:
Simple piano keyboard in JavaScript
223 lines (205 loc) • 10.1 kB
HTML
<html lang="en-PH">
<head>
<meta charset="UTF-8">
<title>@theoryofnekomata/piano-keyboard</title>
<link rel="stylesheet" type="text/css" href="src/piano-keyboard.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main class="main-content">
<p class="lead">A simple, customizable, bare-bones piano keyboard in JavaScript.</p>
<div style="width: 100%; overflow: hidden; height: 65px; margin-bottom: 5em">
<div class="piano" data-white-key-width="auto" data-start-key="4" data-end-key="500" style="margin-left: -25%; height: 100%; width: 5000px;"></div>
</div>
<div class="content-container">
<h1>Why?</h1>
<ul>
<li>Because most JavaScript keyboards aren't simple and customizable enough.</li>
<li>I'm creating a <a target="_blank" href="https://github.com/Temoto-kun/piano-roll">piano roll control</a>, so it needs a piano keyboard to work.</li>
<li>This is ideal for music software that utilizes keyboards.</li>
</ul>
<h1>Examples</h1>
<div class="tab-container">
<nav class="tabs tab-items">
<ul class="items">
<li class="item tab-item -active">
<a class="link" href="#/sections/auto-size-keys">Automatically-sized keys</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/equal-size-keys">Equal-size keys</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/custom-key-range">Custom key range</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys">Labeled keys</a>
</li>
</ul>
</nav>
<div class="panels">
<section class="tabpanel -active" id="/sections/auto-size-keys">
<h2>Automatically-sized keys</h2>
<p>You may set the white key width to whatever value you want (in pixels), but setting it to <code>auto</code> is recommended.</p>
<div class="piano" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/equal-size-keys">
<h2>Equal-size keys</h2>
<p>The stems of the white keys have the same width as the black keys.</p>
<div class="piano" data-white-key-width="auto" data-key-proportion="balanced"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-key-proportion="balanced"></div></code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/custom-key-range">
<h2>Custom key range</h2>
<p>This keyboard is height-adjusted, so it becomes larger. Its white key width is set to <code>auto</code> so the keys will resize according to the keyboard's width.</p>
<div class="piano" style="height: 250px;" data-white-key-width="auto" data-start-key="33" data-end-key="59"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-start-key="33" data-end-key="59"></div></code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys">
<h2>Labeled keys</h2>
<p>In case you want to have the keys labeled, you may do so by applying the appropriate CSS.</p>
<div class="tab-container -vertical">
<nav class="tabs tab-items">
<ul class="items">
<li class="item tab-item -active">
<a class="link" href="#/sections/labeled-keys/all">All</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys/white-keys">White keys only</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys/black-keys">Black keys only</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys/pitch-class">Specific pitch class only</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys/octave">Specific octave only</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys/key">Specific key only</a>
</li><li class="item tab-item">
<a class="link" href="#/sections/labeled-keys/custom">Custom labels</a>
</li>
</ul>
</nav>
<div class="panels">
<section class="tabpanel -active" id="/sections/labeled-keys/all">
<h3>All</h3>
<div class="piano -labeled" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .key::after {
content: attr(data-pitch) attr(data-octave);
}</code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys/white-keys">
<h3>White keys only</h3>
<div class="piano -labeled-white" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .white.key::after {
content: attr(data-pitch);
}</code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys/black-keys">
<h3>Black keys only</h3>
<div class="piano -labeled-black" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .black.key::after {
content: attr(data-pitch);
}</code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys/pitch-class">
<h3>Specific pitch class only</h3>
<div class="piano -labeled-c" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .key[data-pitch="C"]::after {
content: attr(data-pitch) attr(data-octave);
}</code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys/octave">
<h3>Specific octave only</h3>
<div class="piano -labeled-octave" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .key[data-octave="4"]::after {
content: attr(data-pitch);
}</code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys/key">
<h3>Specific key only</h3>
<div class="piano -labeled-c4" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .key[data-pitch="C"][data-octave="4"]::after {
content: attr(data-pitch);
}</code></pre>
</div>
</section>
<section class="tabpanel" id="/sections/labeled-keys/custom">
<h3>Custom labels</h3>
<div class="piano -labeled-doremi" data-white-key-width="auto"></div>
<div class="source-code">
HTML:
<pre><code><div class="piano" data-white-key-width="auto" data-white-key-width="auto"></div></code></pre>
CSS:
<pre><code>.piano.-labeled > .key[data-pitch="C"]::after {
content: 'Do';
}
.piano.-labeled-doremi > .key[data-pitch="D"]::after {
content: 'Re';
}
.piano.-labeled-doremi > .key[data-pitch="E"]::after {
content: 'Mi';
}
.piano.-labeled-doremi > .key[data-pitch="F"]::after {
content: 'Fa';
}
.piano.-labeled-doremi > .key[data-pitch="G"]::after {
content: 'So';
}
.piano.-labeled-doremi > .key[data-pitch="A"]::after {
content: 'La';
}
.piano.-labeled-doremi > .key[data-pitch="B"]::after {
content: 'Ti';
}</code></pre>
</div>
</section>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<script src="node_modules/webmidi/webmidi.min.js"></script>
<script src="build/piano-keyboard.min.js"></script>
<script src="init.js"></script>
<script src="tabs.js"></script>
<!-- This is for adding sounds with WebMIDI, see http://npmjs.com/package/webmidi -->
<!--<script src="sounds.js"></script>-->
</body>
</html>