83 lines
No EOL
2.9 KiB
HTML
83 lines
No EOL
2.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>qrplay</title>
|
|
</head>
|
|
<body>
|
|
|
|
<nav><a href="/">home</a></nav>
|
|
|
|
<h2>qrplay by nycki and SArpnt</h2>
|
|
<p>a QR-code sized implementation of ZZT Play, which you may know from the <a href="https://chriskallen.com/zzt/hallofmusic.html">ZZT Hall of Music</a>.</p>
|
|
|
|
<p>I designed this because I wanted a program I could print on a business card, and <a href="https://git.disroot.org/SArpnt">SArpnt</a> found some clever ways to shrink it even further. The version on this page is commented, the version in the QR code is minified.</p>
|
|
|
|
<p>paste ZZT music code in this box, then click the button to #play!</p>
|
|
|
|
<!-- snip here -->
|
|
<meta name="viewport" content="width=device-width initial-scale=1.0">
|
|
<textarea id=f></textarea><br>
|
|
<button onclick='
|
|
v=f.value;
|
|
A=new AudioContext;
|
|
for(
|
|
i=t=o=0,l=1;
|
|
c=v[i++],d=v[i],c;
|
|
|
|
z<0?0: // no match
|
|
z>17?t+=l: // rest
|
|
z<4? // @-+
|
|
z?o+=g: // change octave
|
|
(o=0,l=1/8): // @
|
|
z&1?l=g: // change speed
|
|
( // note
|
|
a=new OscillatorNode(A,{
|
|
type:`square`,
|
|
detune:100*(g+o+(d==`#`)-(d==`!`)) // # sharp or ! flat
|
|
}),
|
|
a.connect(A.destination),
|
|
a.start(t*.4),
|
|
t+=l,
|
|
a.stop(t*.4)
|
|
)
|
|
)
|
|
g=[,-12,12,4,-9,2,-7,1,-5,.5,-4,.25,-2,1/8,0,l/3,2,l*1.5][z=`@-+wchdqeifsgta3b.x012456789`.indexOf(c.toLowerCase())]
|
|
'>#play</button>
|
|
<!-- stop snipping here -->
|
|
|
|
<script>f.value=f.value||window.location.search.slice(1)||`@i-e!ce!g+ce!dc-bgb+dgfe!de!
|
|
@ice!g+ce!dcdc-bagfe!d
|
|
@ie!ce!g+ce!dc-bgb+dgfe!d
|
|
@i+e!ce!g+ce!dcdc-bagfe!d
|
|
@i+e!c-ge!c++c-ge!a!--fa!+cfa!+ce!
|
|
@i+d-b!fd-b!++b!fdg--e!gb!+dgb!+d
|
|
@i+ge!dc-ge!dh.c`</script>
|
|
|
|
<hr>
|
|
|
|
<table style="text-align: center;">
|
|
<tr><td>qrplay</td><td>Solfeggetio in C Minor</td></tr>
|
|
<tr>
|
|
<td>
|
|
<img src="qrplay.png">
|
|
</td>
|
|
<td>
|
|
<img src="qrplay-solfeggettio.png">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><textarea>data:text/html;base64,PG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCI+PHRleHRhcmVhIGlkPWY+PC90ZXh0YXJlYT48YnI+PGJ1dHRvbiBvbmNsaWNrPSd2PWYudmFsdWU7QT1uZXcgQXVkaW9Db250ZXh0O2ZvcihpPXQ9bz0wLGw9MTtjPXZbaSsrXSxkPXZbaV0sYzt6PDA/MDp6PjE3P3QrPWw6ejw0P3o/bys9Zzoobz0wLGw9MS84KTp6JjE/bD1nOihhPW5ldyBPc2NpbGxhdG9yTm9kZShBLHt0eXBlOmBzcXVhcmVgLGRldHVuZToxMDAqKGcrbysoZD09YCNgKS0oZD09YCFgKSl9KSxhLmNvbm5lY3QoQS5kZXN0aW5hdGlvbiksYS5zdGFydCh0Ki40KSx0Kz1sLGEuc3RvcCh0Ki40KSkpZz1bLC0xMiwxMiw0LC05LDIsLTcsMSwtNSwuNSwtNCwuMjUsLTIsMS84LDAsbC8zLDIsbCoxLjVdW3o9YEAtK3djaGRxZWlmc2d0YTNiLngwMTI0NTY3ODlgLmluZGV4T2YoYy50b0xvd2VyQ2FzZSgpKV0nPiNwbGF5PC9idXR0b24+</textarea></td>
|
|
<td><textarea>@i-e!ce!g+ce!dc-bgb+dgfe!de!
|
|
@ice!g+ce!dcdc-bagfe!d
|
|
@ie!ce!g+ce!dc-bgb+dgfe!d
|
|
@i+e!ce!g+ce!dcdc-bagfe!d
|
|
@i+e!c-ge!c++c-ge!a!--fa!+cfa!+ce!
|
|
@i+d-b!fd-b!++b!fdg--e!gb!+dgb!+d
|
|
@i+ge!dc-ge!dh.c</textarea></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p>for security reasons, your phone probably won't open these as links. you'll have to copy and paste the text into your browser's uri input.</p>
|
|
|
|
</body>
|
|
</html> |