https://building-audio-apps-with-js.vercel.app/assets/md-Cafi33H-.js

1import{_ as I}from"./LanguageSwitcher-DtvM7PCS.js";import{d as W,r as D,K as N,L as $,O as j,f as G,o as v,g as s,n as F,b as R,T as d,w as y,ag as r,e as m,t as P,m as E,v as M,x as O}from"./modules/vue-Bw_6t8Ev.js";import{I as b,ak as U,_ as V,aj as Y}from"./index-BgHgLzyu.js";import{u as J,A as K}from"./AudioDemo-JrtIWsDv.js";import{_ as Q}from"./slidev/CodeBlockWrapper.vue_vue_type_script_setup_true_lang-p8Vw0qtv.js";import{_ as X}from"./slidev/two-cols.vue_vue_type_script_setup_true_lang-DLqxyFz5.js";import"./modules/shiki-BPPYVDiq.js";import"./modules/unplugin-icons-D1dQlrY5.js";const Z=1,ss=W({__name:"SpectrumAnalyzer",props:{source:{default:null},width:{default:600},height:{default:150},fullscreen:{type:Boolean,default:!1},fftSize:{default:2048},barWidth:{default:3},barGap:{default:1}},setup(B){b();const e=B,t=D(null);let i=null,h=null,l=null;function u(){if(k(),!e.source)return;i=e.source.context.createAnalyser(),i.fftSize=e.fftSize;const n=i.frequencyBinCount;l=new Uint8Array(n),e.source.connect(i),p()}function p(){if(!t.value||!i||!l)return;h=requestAnimationFrame(p),i.getByteFrequencyData(l);const n=t.value.getContext("2d");if(!n)return;const f=e.fullscreen?window.innerWidth:e.width,o=e.fullscreen?window.innerHeight:e.height,a=window.devicePixelRatio||1;t.value.width=f*a,t.value.height=o*a,n.scale(a,a),n.fillStyle="rgb(18, 18, 18)",n.fillRect(0,0,f,o);let g=!1;for(let c=0;c<l.length;c++)if(l[c]>Z){g=!0;break}if(!g)return;const x=e.barWidth+e.barGap,w=Math.floor(f/x),A=Math.floor(l.length/w);for(let c=0;c<w;c++){let C=0;for(let _=0;_<A;_++){const z=c*A+_;z<l.length&&(C+=l[z])}const S=C/A,q=S/255*o,H=c*x,L=o-q,T=120-S/255*120;n.fillStyle=`hsl(${T}, 80%, 60%)`,n.fillRect(H,L,e.barWidth,q)}}function k(){h!==null&&(cancelAnimationFrame(h),h=null),i&&(i.disconnect(),i=null),l=null}return N(()=>e.source,n=>{n?u():k()}),$(()=>{e.source&&u()}),U(()=>{k()}),j(()=>{k()}),(n,f)=>(v(),G("div",{class:F(["spectrum-analyzer",{"spectrum-analyzer--fullscreen":n.fullscreen}])},[s("canvas",{ref_key:"canvas",ref:t,class:F(["spectrum-canvas",{"spectrum-canvas--fullscreen":n.fullscreen}])},null,2)],2))}}),is=V(ss,[["__scopeId","data-v-75e35b1d"]]),es={class:"flex flex-col items-center gap-4"},ts=["disabled"],as={class:"flex flex-col items-center gap-2 w-64"},ls={class:"text-sm font-medium"},ns=["value"],rs=W({__name:"SimpleWebAudioButton",setup(B){b();let e=null,t=null,i=null;const h=D(1e4),l=D(!1),{isPlaying:u,toggle:p,masterGain:k}=J({onSetup:(o,a)=>{t=o.createBiquadFilter(),t.type="lowpass",t.frequency.value=h.value,t.connect(a)},onCleanup:()=>{if(i){try{i.stop(),i.disconnect()}catch{}i=null}}}),n=()=>{if(!e||!t||!u.value)return;if(i)try{i.stop(),i.disconnect()}catch{}i=t.context.createBufferSource(),i.buffer=e,i.connect(t),i.start(),l.value=!0,i.onended=()=>{l.value=!1}},f=o=>{const a=parseFloat(o.target.value);h.value=a,t&&(t.frequency.value=a)};return $(async()=>{const a=await(await fetch("/sample-music.wav")).arrayBuffer(),g=new AudioContext;e=await g.decodeAudioData(a),g.close()}),(o,a)=>(v(),R(K,{"is-playing":d(u),"master-gain":d(k),onToggle:d(p)},{default:y(()=>[s("div",es,[a[0]||(a[0]=r(" Music: ")),a[1]||(a[1]=s("a",{href:"https://open.spotify.com/album/4i1UpRUHk6a6DkiCyjYwbn?si=uRfqlJlnRkiC96SzkgG1Ng",target:"_blank",rel:"noopener noreferrer"}," It's just a... / YOGO ",-1)),s("button",{class:"px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",disabled:l.value||!d(e),onClick:n},P(l.value?"Playing...":"play"),9,ts),s("div",as,[s("label",ls," Low-Pass Filter: "+P(h.value)+"Hz ",1),s("input",{type:"range",min:"100",max:"10000",step:"10",value:h.value,onInput:f,class:"w-full"},null,40,ns)]),m(is,{source:d(k)},null,8,["source"])])]),_:1},8,["is-playing","master-gain","onToggle"]))}}),hs={class:"h-full grid place-items-center"},os={class:"h-full grid place-items-center"},ms={__name:"slides.md__slidev_14",setup(B){const{$clicksContext:e,$frontmatter:t}=b();return e.setup(),(i,h)=>{const l=Q,u=rs,p=I;return v(),R(X,M(O(d(Y)(d(t),13))),{right:y(k=>[s("div",os,[m(u)]),m(p)]),default:y(()=>[s("div",hs,[m(l,E({},{title:"",ranges:[]}),{default:y(()=>h[0]||(h[0]=[s("pre",{class:"shiki shiki-themes vitesse-dark vitesse-light slidev-code",style:{"--shiki-dark":"#dbd7caee","--shiki-light":"#393a34","--shiki-dark-bg":"#121212","--shiki-light-bg":"#ffffff"}},[s("code",{class:"language-js"},[s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#CB7676","--shiki-light":"#AB5959"}},"const"),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}}," ctx"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}}," ="),s("span",{style:{"--shiki-dark":"#CB7676","--shiki-light":"#AB5959"}}," new"),s("span",{style:{"--shiki-dark":"#80A665","--shiki-light":"#59873A"}}," AudioContext"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"()")]),r(`
2`),s("span",{class:"line"}),r(`
3`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#CB7676","--shiki-light":"#AB5959"}},"const"),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}}," source"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}}," ="),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}}," ctx"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#80A665","--shiki-light":"#59873A"}},"createBufferSource"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"()")]),r(`
4`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"source"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"buffer"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}}," ="),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}}," audioBuffer")]),r(`
5`),s("span",{class:"line"}),r(`
6`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#CB7676","--shiki-light":"#AB5959"}},"const"),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}}," filter"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}}," ="),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}}," ctx"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#80A665","--shiki-light":"#59873A"}},"createBiquadFilter"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"()")]),r(`
7`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"filter"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"type"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}}," ="),s("span",{style:{"--shiki-dark":"#C98A7D77","--shiki-light":"#B5695977"}}," '"),s("span",{style:{"--shiki-dark":"#C98A7D","--shiki-light":"#B56959"}},"lowpass"),s("span",{style:{"--shiki-dark":"#C98A7D77","--shiki-light":"#B5695977"}},"'")]),r(`
8`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"filter"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"frequency"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"value"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}}," ="),s("span",{style:{"--shiki-dark":"#4C9A91","--shiki-light":"#2F798A"}}," 1000")]),r(`
9`),s("span",{class:"line"}),r(`
10`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"source"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#80A665","--shiki-light":"#59873A"}},"connect"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"("),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"filter"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},")"),s("span",{style:{"--shiki-dark":"#758575DD","--shiki-light":"#A0ADA0"}},"  // source → filter → destination")]),r(`
11`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"filter"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#80A665","--shiki-light":"#59873A"}},"connect"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"("),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"ctx"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"destination"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},")")]),r(`
12`),s("span",{class:"line"}),r(`
13`),s("span",{class:"line"},[s("span",{style:{"--shiki-dark":"#BD976A","--shiki-light":"#B07D48"}},"source"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"."),s("span",{style:{"--shiki-dark":"#80A665","--shiki-light":"#59873A"}},"start"),s("span",{style:{"--shiki-dark":"#666666","--shiki-light":"#999999"}},"()"),s("span",{style:{"--shiki-dark":"#758575DD","--shiki-light":"#A0ADA0"}}," // play the source sound")])])],-1)])),_:1,__:[0]},16)])]),_:1},16)}}};export{ms as default};