-
Notifications
You must be signed in to change notification settings - Fork 52
/
index.html
66 lines (66 loc) · 4.6 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>HTML5 JavaScript Piano - with Data URIs</title>
<meta name="description" content="A synth piano synth that generates all of its audio files dynamically using JavaScript and data URIs. Choose from a variety of sounds styles and play with the looper, visual waveforms, and more." />
<link rel="stylesheet" type="text/css" href="piano.css" />
<meta property="og:image" content="http://mrcoles.com/media/img/piano-visual-mode.png">
<link rel="image_src" href="http://mrcoles.com/media/img/piano-visual-mode.png" />
</head>
<body>
<div id="content">
<div id="content-inner">
<div id="piano">
<h1>Javascript Piano</h1>
<div class="help show" tabindex="1">
<div class="help-inner">
<div id="synth-settings"></div>
<div class="opts">
<p><strong>Controls:</strong></p>
<p>play using home row & above /</p>
<p>change playable keys: “,” & “.” /</p>
<p>shift keyboard: ← & → <span id="shift"></span></p>
</div>
<div class="opts">
<p><strong>Extras:</strong></p>
<p class="toggle-color toggle hold">Color - c /</p>
<p class="toggle-demo toggle">Demo - m /</p>
<p class="toggle-animate toggle">Visual mode - 8 /</p>
<p class="toggle-looper">Looper - 9 /</p>
<p>Help - 0</p>
</div>
</div>
</div>
<div class="loop" tabindex="2">loop</div>
</div>
</div>
</div>
<div id="below">
<p id="info">info</p>
<p id="top">↑</p>
<div id="below-inner">
<h2>HTML5 Javascript Piano</h2>
<p>This synth piano is written <em>solely</em> using HTML, JS, and CSS. It contains a small handful of synths with configurable decays, a looper, demo mode, visual mode, and a variety of colors. View controls by hitting the top-right button on the piano.</p>
<p>
It doesn't use a single static audio file, instead it generates them on the fly at the byte level and then converts them to files using the data URI schema. On a similar note, it doesn't use a single image either, just CSS.
You can make pretty much any kind of file with a data URI, such as a
<a href="http://mrcoles.com/low-res-paint/">bitmap file</a> or a
<a href="http://mrcoles.com/favicon-generator/">favicon</a>.
</p>
<p><span title="May 16, 2012">Currently</span> iOS doesn’t support HTML5 audio well enough in the browser to make this work. So, no go on iPhone and iPad, for now.</p>
<p>Various people have been experimenting with audio files and data URIs for a while now. I first came across <a href="http://www.sk89q.com/playground/jswav/">this implementation</a> by sk89q, which was helpful in getting my audio files to work. For future projects, I will probably use an audio api, but currently it’s just <a href="http://caniuse.com/audio-api">firefox & chrome</a>. For further reading, here is a good overview of <a href="http://matt.west.co.tt/music/jasmid-midi-synthesis-with-javascript-and-html5-audio/">the state of HTML5 audio</a> from December 2010.</p>
<p>
By <a href="http://mrcoles.com">Peter Coles</a>
/ <a href="http://twitter.com/lethys">@lethys</a>
– May 16, 2012
</p>
</div>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mrcoles.com/piano/" data-text="HTML5 Piano - with a data URI synth" data-via="lethys">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<script src="jquery-1.7.1.min.js"></script>
<script src="audio.js"></script>
<script src="piano.js"></script>
</body>
</html>