https://cdn.webgamedev.com/_next/static/chunks/pages/assets/audio-37e00c71eaca7616.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5778],{8105:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/assets/audio",function(){return s(922)}])},922:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>d,useTOC:()=>c});var n=s(5893),r=s(7812),o=s(1304),i=s(8925),a=s(4306),l=s(8289);function c(e){return[{value:"Web Audio API",id:"web-audio-api",depth:2},{value:"Toolkits",id:"toolkits",depth:2},{value:"Music Production and Effects",id:"music-production-and-effects",depth:2},{value:"Resources",id:"resources",depth:2}]}let d=(0,r.c)(function(e){let{toc:t=c(e)}=e,s={a:"a",h1:"h1",h2:"h2",li:"li",p:"p",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.h1,{children:"\uD83D\uDD08 Audio"}),"\n",(0,n.jsx)(s.p,{children:"Audio is essential to game feel — sound effects provide feedback for player actions, ambient sounds build atmosphere, and music sets the emotional tone."}),"\n",(0,n.jsx)(s.h2,{id:t[0].id,children:t[0].value}),"\n",(0,n.jsxs)(s.p,{children:["The ",(0,n.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API",children:"Web Audio API"})," is the browser’s built-in system for playing and processing audio. It provides a node-based graph where you connect sources, effects, and outputs. For games, the key features are low-latency playback, volume control, and ",(0,n.jsx)(s.strong,{children:"spatial/positional audio"})," — sounds that get louder or quieter based on the listener’s distance and direction, with panning between left and right channels."]}),"\n",(0,n.jsx)(s.p,{children:"Note that browsers require a user interaction (click, tap) before audio can play — you can’t autoplay sounds on page load."}),"\n",(0,n.jsxs)(s.p,{children:["For heavy audio processing, ",(0,n.jsx)(s.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet",children:"Audio Worklets"})," let you run custom audio code in a dedicated thread."]}),"\n",(0,n.jsx)(s.h2,{id:t[1].id,children:t[1].value}),"\n",(0,n.jsx)(a.Z,{projects:[l.n0.howler,l.n0.soundJs]}),"\n",(0,n.jsx)(s.h2,{id:t[2].id,children:t[2].value}),"\n",(0,n.jsx)(a.Z,{projects:[{...l.n0.tone,description:"DAW"},{...l.n0.wad,description:"DAW"},{...l.n0.tuna,description:"Effects"},{...l.n0.xsound,description:"DAW"},{...l.n0.reactronica,description:"Tone.js in React"},{...l.n0.pizzicato,description:"DAW"},{...l.n0.reactMusic,description:"Archived"}]}),"\n",(0,n.jsx)(s.h2,{id:t[3].id,children:t[3].value}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://soundraw.io/",children:"soundraw.io"})}),"\n"]})]})},"/assets/audio",{filePath:"src/pages/assets/audio.mdx",pageMap:o.v,frontMatter:{},title:"\uD83D\uDD08 Audio"},"undefined"==typeof RemoteContent?c:RemoteContent.useTOC)},4306:(e,t,s)=>{"use strict";s.d(t,{Z:()=>j});var n=s(5893),r=s(2702),o=s(3685),i=s(7654),a=s(7294),l=s(7077),c=s.n(l);let d="black-text",h="red-text",u="orange-text",p="green-text",j=e=>{let{projects:t,rust:s}=e,l=t.some(e=>e.logo),[j,x]=(0,a.useState)(!1),m=j?t:t.filter(e=>!e.collapsed),f=m.length!==t.length;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("ul",{className:c().table,style:{"--columns":s?4:5},children:[(0,n.jsxs)("li",{className:"".concat(c().row," ").concat(c().header),children:[(0,n.jsx)("div",{}),(0,n.jsxs)("div",{children:["Stars ",(0,n.jsx)(o.r7,{})]}),(0,n.jsxs)("div",{children:[s?"Crate":"NPM"," ",(0,n.jsx)(o._8,{})]}),!s&&(0,n.jsx)("div",{children:"TS"}),(0,n.jsx)("div",{children:"Maintained"})]}),m.map(e=>{var t,a;let j=e.lastCommitDate?Math.round((Date.now()-new Date(e.lastCommitDate).getTime())/1e3/60/60/24/365):null,x=j>=2?h:u,m=s?e.crateDownloads:e.downloads,f=m?m>=1e6?"".concat(Math.round(m/1e6),"M"):m>=1e3?"".concat(Math.round(m/1e3),"k"):m:null,g=m>=1e5?p:m<1e3?h:m<1e4?u:d,_=e.stars?e.stars>=1e3?"".concat(Math.round(e.stars/1e3),"k"):e.stars:null,v=e.stars>=1e4?p:e.stars<100?h:e.stars<1e3?u:d,b="https://github.com/".concat(e.repo),w="https://www.npmjs.com/package/".concat(e.npm),y="https://crates.io/crates/".concat(e.crate),N=null!==(a=null!==(t=e.url)&&void 0!==t?t:b)&&void 0!==a?a:y;return(0,n.jsxs)("li",{className:c().row,children:[(0,n.jsxs)("div",{className:c().project,children:[(0,n.jsxs)("span",{children:[l?e.logo||(0,n.jsx)("span",{className:c().noLogo}):(0,n.jsx)(n.Fragment,{})," ",(0,n.jsx)(r.Z,{href:N,isExternal:!0,children:(0,n.jsx)("b",{children:e.name})})]}),(0,n.jsxs)("div",{className:c().mobileStats,children:[(0,n.jsxs)("div",{className:null===_?c().empty:v,children:[(0,n.jsx)(o.r7,{})," ",_]}),(0,n.jsxs)("div",{className:null===f?c().empty:g,children:[(0,n.jsx)(o._8,{})," ",f,"/w"]}),(0,n.jsxs)("div",{style:{lineHeight:0}

1,children:["ts"===e.ts&&(0,n.jsx)(i.Av,{}),"js"===e.ts&&(0,n.jsx)(i.Xn,{}),"dt"===e.ts&&(0,n.jsx)(i.Pu,{})]})]}),e.description&&(0,n.jsxs)("span",{className:c().description,children:[(0,n.jsx)("span",{className:c().mobileHidden,children:" – "}),e.description?(0,n.jsx)("span",{children:e.description}):(0,n.jsx)(n.Fragment,{})]})]}),(0,n.jsx)("a",{href:b,target:"_blank",rel:"noopener",style:{textDecoration:"none"},className:null===_?c().empty:v,children:null!==_?_:"N/A"}),(0,n.jsx)("a",{href:e.npm?w:e.crate?y:"",style:{textDecoration:"none"},target:"_blank",rel:"noopener",className:null===f?c().empty:g,children:null!==f?"".concat(f,"/w"):"N/A"}),!s&&(0,n.jsx)("div",{children:(0,n.jsxs)("div",{style:{position:"relative",bottom:"2px"},children:["ts"===e.ts&&(0,n.jsx)(i.Av,{}),"js"===e.ts&&(0,n.jsx)(i.Xn,{}),"dt"===e.ts&&(0,n.jsx)(i.Pu,{})]})}),(0,n.jsx)("a",{style:{textAlign:"center",textDecoration:"none"},href:"".concat(b,"/commits"),target:"_blank",rel:"noopener",children:j?(0,n.jsxs)("span",{className:x,children:[j," year",1===j?"":"s"]}):(0,n.jsx)("span",{className:c().empty,children:(0,n.jsxs)("svg",{style:{width:20,display:"inline-block"},stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 24 24",children:[(0,n.jsx)("path",{fill:"none",d:"M0 0h24v24H0z"}),(0,n.jsx)("path",{d:"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"})]})})})]},e.name)})]}),!j&&f&&(0,n.jsx)("div",{children:(0,n.jsx)("button",{className:c().showMore,onClick:()=>x(!0),children:(0,n.jsx)("span",{children:"Show more"})})})]})}},7077:e=>{e.exports={table:"ProjectList_table__WYcOf",row:"ProjectList_row__4Hk_9",header:"ProjectList_header__CwD4d",project:"ProjectList_project__OGiEA",noLogo:"ProjectList_noLogo__EoNjV",empty:"ProjectList_empty__nQGNo",mobileHidden:"ProjectList_mobileHidden__GTBlg",mobileStats:"ProjectList_mobileStats__bnZRk",description:"ProjectList_description__n8FHK",showMore:"ProjectList_showMore___UFt6"}},8925:(e,t,s)=>{"use strict";s.d(t,{a:()=>l});var n=s(1151),r=s(5675),o=s.n(r),i=s(7294);let a={img:e=>(0,i.createElement)("object"==typeof e.src?o():"img",e)},l=e=>(0,n.a)({...a,...e})},7812:(e,t,s)=>{"use strict";s.d(t,{c:()=>c});var n=s(5893),r=s(3665),o=s(8644);let i=(0,s(7294).createContext)({}),a=i.Provider;i.displayName="SSG";var l=s(8925);function c(e,t,s,n){let o=globalThis[r.ud];return o.route=t,o.pageMap=s.pageMap,o.context[t]={Content:e,pageOpts:s,useTOC:n},d}function d({__nextra_pageMap:e=[],__nextra_dynamic_opts:t,...s}){let i=globalThis[r.ud],{Layout:l,themeConfig:c}=i,{route:d,locale:u}=(0,o.t)(),p=i.context[d];if(!p)throw Error(`No content found for the "${d}" route. Please report it as a bug.`);let{pageOpts:j,useTOC:x,Content:m}=p;if(d.startsWith("/["))j.pageMap=e;else for(let{route:t,children:s}of e){let e=t.split("/").slice(u?2:1);(function e(t,[s,...n]){for(let r of t)if("children"in r&&s===r.name)return n.length?e(r.children,n):r})(j.pageMap,e).children=s}if(t){let{title:e,frontMatter:s}=t;j={...j,title:e,frontMatter:s}}return(0,n.jsx)(l,{themeConfig:c,pageOpts:j,pageProps:s,children:(0,n.jsx)(a,{value:s,children:(0,n.jsx)(h,{useTOC:x,children:(0,n.jsx)(m,{...s})})})})}function h({children:e,useTOC:t}){let{wrapper:s}=(0,l.a)();return(0,n.jsx)(u,{useTOC:t,wrapper:s,children:e})}function u({children:e,useTOC:t,wrapper:s,...r}){let o=t(r);return s?(0,n.jsx)(s,{toc:o,children:e}):e}}},e=>{var t=t=>e(e.s=t);e.O(0,[1304,7654,6223,2888,9774,179],()=>t(8105)),_N_E=e.O()}]);