Skip to content

Instantly share code, notes, and snippets.

@janogarcia

janogarcia/index.html

Forked from lostintangent/index.html
Created February 27, 2024 20:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save janogarcia/d09652f2eb74a4c0b4bbcfd6f2ed80bf to your computer and use it in GitHub Desktop.
Save janogarcia/d09652f2eb74a4c0b4bbcfd6f2ed80bf to your computer and use it in GitHub Desktop.
Download ZIP
ZzFX Sound Board - Zuper Zmall Zeeded Zound Zynth
Raw
index.html
<body bgcolor=#223><center>
<div style=font-size:45px><b>โ„ค๐•ซ๐”ฝ๐• - Zuper Zmall Zound Zynth</b></div>
<div style=font-size:20px><i>A tiny tool for creating and playing sound effects with JavaScript</i></div>
<div style=max-width:799px>
<div style=font-size:20px>
<input id=volume type=range min=0 max=1 step=.01 oninput='zzfxV=volume.value;volumeText.innerHTML=volume.value*100|0'></input>
Volume <span id=volumeText>30</span> %
</div>
<button onClick=zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06])>๐Ÿ’ฐ</button>
<button onClick=zzfx(...[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17])>๐ŸฅŠ</button>
<button onClick=zzfx(...[,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04])>โœจ</button>
<button onClick=zzfx(...[,,190,.03,.4,.9,,.76,1.56,,219,.01,.06,.1,,,.14])>๐ŸŒŸ</button>
<button onClick=zzfx(...[,,537,.02,.02,.22,1,1.59,-6.98,4.97])>๐Ÿ’“</button>
<button onClick=zzfx(...[,,528,.01,,.48,,.6,-11.6,,,,.32,4.2])>๐Ÿ’”</button>
<button onClick=zzfx(...[,,20,.04,,.6,,1.31,,,-990,.06,.17,,,.04,.07])>๐Ÿ’–</button>
<button onClick=zzfx(...[,,333,.01,0,.9,4,1.9,,,,,,.5,,.6])>๐Ÿ’ฅ</button>
<button onClick=zzfx(...[,,418,0,.02,.2,4,1.15,-8.5,,,,,.7,,.1]);>๐Ÿงจ</button>
<button onClick=zzfx(...[,,662,.82,.11,.33,1,0,,-0.2,,,,1.2,,.26,.01])>๐Ÿ‘พ</button>
<button onClick=zzfx(...[2,.8,999,,,,,1.5,,.3,-99,.1,1.63,,,.11,.22])>๐Ÿ””</button>
<button onClick=zzfx(...[,.3,1975,.08,.56,.02,,,-0.4,,-322,.56,.41,,,,.25])>๐Ÿฆ</button>
<button onClick=zzfx(...[,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1])>๐Ÿ›ฐ๏ธ</button>
<button onClick=zzfx(...[,0,1600,.13,.52,.61,1,1.1,,,,,,.1,,.14])>โ˜Ž๏ธ</button>
<button onClick=zzfx(...[1.5,.8,270,,.1,,1,1.5,,,,,,,,.1,.01])>๐ŸŽน</button>
<button onClick=zzfx(...[,,518,,.07,.19,1,.31,5.14])>๐Ÿฆ˜</button>
<button onClick=zzfx(...[,,224,.02,.02,.08,1,1.7,-13.9,,,,,,6.7])>๐Ÿพ</button>
<button onClick=zzfx(...[,,129,.01,,.15,,,,,,,,5])>๐Ÿฅ</button>
<button onClick=zzfx(...[,,172,.8,,.8,1,.76,7.7,3.73,-482,.08,.15,,.14])>๐Ÿ›ธ</button>
<button onClick=zzfx(...[,,448,.01,.1,.3,3,.39,-0.5,,,,,,.2,.1,.08])>๐Ÿ”ซ</button>
<button onClick=zzfx(...[,,941,.8,,.8,4,.74,-222,,,,,.8,,1])>๐Ÿš€</button>
</div>
<a href=https://zzfx.3d2k.com target=_blank>ZzFX Sound Effect Designer at zzfx.3d2k.com โ˜ฎโ™ฅโ˜ปโŒ</a>
Raw
script.js
// ZzFX - Zuper Zmall Zound Zynth - Micro Edition
// MIT License - Copyright 2019 Frank Force
// https://github.com/KilledByAPixel/ZzFX
'use strict';let zzfx,zzfxV,zzfxX
// ZzFXMicro - Zuper Zmall Zound Zynth
zzfxV=.3 // volume
zzfx= // play sound
(I=1,J=.05,g=220,f=0,h=0,m=.1,n=0,K=1,r=0,A=0,t=0,B=0,u=0,C=0,v=0,L=0,e=0,d=2*Math.PI,b=44100,w=p=>2*p*Math.random()-p,x=p=>0<p?1:-1,M=r*=500*d/b**2,D=g*=(1+w(J))*d/b,N=x(v)*d/4,q=[],E=0,F=0,c=0,k=1,G=0,H=0,a=0,l,y,z=zzfxX.createBufferSource())=>{f=50+f*b|0;h=h*b|0;m=m*b|0;e=e*b|0;A*=500*d/b**3;l=f+h+m+e;v*=d/b;t*=d/b;B*=b;for(u*=b;c<l;q[c++]=a)++H>100*L&&(H=0,a=E*g*Math.sin(F*v-N),a=n?1<n?2<n?3<n?x(Math.sin((a%d)**3)):Math.max(Math.min(Math.tan(a),1),-1):1-(2*a/d%2+2)%2:1-4*Math.abs(Math.round(a/d)-a/d):Math.sin(a),a=x(a)*Math.abs(a)**K,a*=I*zzfxV*(c<f?c/f:c<f+h?1:c<l-e?1-(c-f-h)/m:0),a=e?a/2+(e>c?0:(c<l-e?1:(c-l)/e)*q[c-e]/2):a),E+=1+w(C),F+=1+w(C),g+=r+=A,k&&++k>B&&(D+=t,g+=t,k=0),u&&++G>u&&(g=D,r=M,G=1,k=k||1);y=zzfxX.createBuffer(1,q.length,b);y.getChannelData(0).set(q);z.buffer=y;z.connect(zzfxX.destination);z.start()}
zzfxX=new(window.AudioContext||webkitAudioContext);zzfxX.z=zzfxX.createBufferSource;zzfxX.createBufferSource=(s=zzfxX.z())=>(s.start=s.start||(t=>zzfxX.noteOn(t)),s)
Raw
style.css
button
{
height:100px;
width:100px;
font-size:60px;
border:3px solid;
border-radius: 15px;
background:#BBB;
}
div { color:rgb(211, 33, 33); }
a { color:#5FF; }
a:visited { color:#A5A; }
Raw
zzfx-sound-board-zuper-zmall-zeeded-zound-zynth.markdown

ZzFX Sound Board - Zuper Zmall Zeeded Zound Zynth

This is an example of how to use ZzFX sounds on your website. ZzFX is a tool for creating and playing sound effects with JavaScript. It's easy to use and open source on GitHub!

https://zzfx.3d2k.com

A Pen by Frank Force on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment