175 lines
No EOL
6.1 KiB
HTML
175 lines
No EOL
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>qrplay</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
max-width: 40rem;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|
|
</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=initial-scale=1>
|
|
<center>
|
|
<p><a href=http://nycki.net/qrplay>qrplay v2c</a></p>
|
|
<textarea id=f style=width:min(40em,99%);height:9lh></textarea><p>
|
|
<button onclick='
|
|
s=`@`+f.value.toLowerCase();
|
|
f.A?.close();
|
|
A=f.A=new AudioContext;
|
|
// per-channel data
|
|
T=[];L=[];
|
|
// tempo in beats per minute
|
|
u=137;
|
|
// volume. 40 is default, 35 is half, 30 is half again.
|
|
v=40;
|
|
// percussion can be approximated as 1024th notes.
|
|
P=x=>(s=`z99${x}z${Z} o${o+4} x`+s.slice(c),c=0,T[99]=t,L[99]=2**-5);
|
|
for(
|
|
c=t=k=Z=0;D=s[c+1],E=D+s[c+2],C=s[c++];
|
|
// no match
|
|
z<0?0:
|
|
// comments
|
|
z<2?k=z:k?0:
|
|
// - + octave
|
|
z<4?o+=C+1|0:
|
|
// dots and triplets
|
|
z<5?l*=3/2:
|
|
z<6?l/=3:
|
|
// percussion
|
|
C==`0`?P(`o07g`):
|
|
C==`1`?P(`o05b+c#deff#gg#aa#b+cc#d`):
|
|
C==`2`?P(`o06g++ddb--g++ddb--g++ddb--g++ddb`):
|
|
C==`4`?P(`o07g`): // todo
|
|
C==`5`?P(`o07g`): // todo
|
|
C==`6`?P(`o05a++c#-aae+e--a++c#-aae+e--a++c#`):
|
|
C==`7`?P(`o07g`): // todo
|
|
C==`8`?P(`o07g`): // todo
|
|
C==`9`?P(`o04a++c#-aae+e--a++c#-aae+e--a++c#`): // todo
|
|
// note or rest
|
|
z<23?(
|
|
z-=6,
|
|
O=new OscillatorNode(A,{
|
|
type:`square`,
|
|
detune:100*(z*2-(z>2)-(D==`!`)+(D==`#`)+12*o-9)
|
|
}),
|
|
G=new GainNode(A,{gain:z<7&&.5**(12-v/5)}),
|
|
O.connect(G),
|
|
G.connect(A.destination),
|
|
O.start(t),
|
|
O.stop(t+=7.5*l/u)
|
|
):
|
|
// reset octave and duration
|
|
z<24?(o=0,l=1):
|
|
// set note length
|
|
z<31?l=2**(z-25):
|
|
// change channel
|
|
z<32?(
|
|
T[Z]=t,L[Z]=l,
|
|
t=T[Z=E|0]||0,l=L[Z]||l,
|
|
c+=2
|
|
):
|
|
// change tempo
|
|
z<33?u=E+s[c+=2,c++]:
|
|
// change volume
|
|
z<34?(v=E,c+=2):
|
|
// set octave
|
|
(o=E-4,c+=2)
|
|
)z=`\n;-+.3cdefgab012456789x@jtsiqhwzuvo`.indexOf(C)
|
|
'>#play</button> <button onclick=f.A.close()>#stop</button>
|
|
<!-- stop snipping here -->
|
|
</center>
|
|
<hr>
|
|
|
|
<table style="text-align: center;">
|
|
<tr><td>qrplay</td><td>Solfeggettio in C Minor</td></tr>
|
|
<tr>
|
|
<td>
|
|
<img src="qrplay-v1.png">
|
|
</td>
|
|
<td>
|
|
<img src="qrplay-solfeggettio.png">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><textarea>data:text/html,<meta%20name="viewport"%20content="width=device-width%20initial-scale=1.0"><textarea%20id=f></textarea><br><button%20onclick='/*qrplay%20v1,%20nycki%20&%20SArpnt,%202025*/v=f.value;T=[];Z=0;f.A=A=f.A||new%20AudioContext;B=new%20GainNode(A,{gain:0.4});B.connect(A.destination);for(i=o=k=t=0,l=1;c=v[i++],d=v[i],c;z<0?0:z>29?k=1:z>28?k=0:k?0:z>27?(T[Z]=t,Z=+v.slice(i,i+=2),t=T[Z]||0):z>17?t+=l:z<3?z?o+=g:(o=0,l=1/8):(console.log(z),z)&1?console.log(l=g):(a=new%20OscillatorNode(A,{type:`square`,detune:100*(g+o+(d==`%23`)-(d==`!`))}),a.connect(B),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.x012456789z\npovukr\x27`.indexOf(c.toLowerCase())]'>%23play</button><button%20onclick='f.A.close();f.A=0'>%23stop</button></textarea></td>
|
|
<td><textarea id="s">;; title Solfeggettio
|
|
;; artist JS Bach
|
|
@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>qrplay v2a</p>
|
|
<img src="qrplay-v2a3.png">
|
|
<textarea>data:text/html,<meta%20name=viewport%20content=initial-scale=1><textarea%20id=f></textarea><br><button%20onclick="/*qrplay%20v2a,%20nycki%20&%20SArpnt,%202025*/f.A?.close();B=new%20GainNode(f.A=A=new%20AudioContext,{gain:0.1});B.connect(A.destination);r=.4;l=1;T=[];v=f.value;W=A.createBuffer(1,s=A.sampleRate,s);for(i=0;i++<2*s;W.getChannelData(0)[i]=Math.random()*2-1);p=n=>(n.connect(B),n.start(t*r),t+=l,n.stop(t*r));for(i=o=k=t=Z=0;c=v[i++],d=v[i],c;z<0?0:!z?(o=0,l=1/8):z<3?o+=g:z>28?k=z-29:k?0:z>27?(T[Z]=t,Z=+v.slice(i,i+=2),t=T[Z]||0):z>18?p((w=A.createBufferSource(),w.buffer=W,w.loop=1,w)):z>17?t+=l:z&1?l=g:p(new%20OscillatorNode(A,{type:'square',detune:100*(g+o+(d=='%23')-(d=='!'))})))%20g=[,-12,12,4,-9,2,-7,1,-5,.5,-4,.25,-2,1/8,0,l/3,2,l*1.5][z=`@-+wchdqeifsgta3b.x012456789z\npovukr'`.indexOf(c.toLowerCase())]">%23play</button>%20<button%20onclick=f.A.close()>%23stop</button></textarea>
|
|
|
|
<p>we will rock you</p>
|
|
<textarea id="rock">U137V40
|
|
@s.9x9x6xxx9x9x6xxx9x9x6xxx9x9x6xxx
|
|
@s.deedi.es.eei.des.de
|
|
@s.edi.es.eeedi.eags.g-b+dx
|
|
@s.ei.es.dexxdexexe
|
|
@s.xxxdddxdd-bxage+eq.x
|
|
@q.gf#eds.exex6xxx9x9x6xxx
|
|
@q.gf#eds.exex6xxx9x9x6xxx
|
|
@s.deedi.es.eei.des.de
|
|
@s.edi.es.eeedi.eags.g-b+dx
|
|
@s.ei.es.dexxdexexe
|
|
@s.xxxdddxdd-bxage+eq.x
|
|
@q.gf#eds.exex6xxx9x9x6xxx
|
|
@q.gf#eds.exex6xxx9x9x6xxx
|
|
@q.gf#eds.exex6xxx9x9x6xxx
|
|
@q.gf#eds.exex6xxx9x9x6xxx
|
|
</textarea>
|
|
|
|
<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>
|
|
|
|
<script>
|
|
// set default value for input
|
|
f.value=(
|
|
window.location.search.slice(1)
|
|
.replaceAll('%20', ' ')
|
|
.replaceAll('%0a','\n')
|
|
.replaceAll('%0A','\n')
|
|
.replaceAll('%23', '#')
|
|
.replaceAll('%27', "'")
|
|
|| f.value
|
|
|| s.value
|
|
);
|
|
|
|
// remove redundant title
|
|
document.querySelector('center p').setAttribute('hidden', 'true');
|
|
|
|
// add save button
|
|
document.querySelector('center p:last-child').innerHTML+=`
|
|
<button onclick='
|
|
window.location.search = "?"+f.value
|
|
.replaceAll(" ","%20")
|
|
.replaceAll("\\n","%0a")
|
|
.replaceAll("#","%23")
|
|
.replaceAll("\\x27","%27")
|
|
'>#save</button>
|
|
`;
|
|
</script>
|
|
</body>
|
|
</html> |