[{"data":1,"prerenderedAt":489},["ShallowReactive",2],{"docs:\u002Fdocs\u002Faudio":3},{"id":4,"title":5,"body":6,"description":481,"extension":482,"meta":483,"navigation":67,"path":484,"rawbody":485,"seo":486,"stem":487,"__hash__":488},"docs\u002Fdocs\u002Faudio.md","Audio",{"type":7,"value":8,"toc":475},"minimark",[9,19,167,171,176,182,213,217,287,290,377,384,388,395,399,468,471],[10,11,12,13,18],"p",{},"The audio module measures loudness in frequency ranges and exposes each one as a ",[14,15,17],"a",{"href":16},"\u002Fdocs\u002Fjavascript\u002F#signals","signal",". Bind signals to any property.",[20,21,26],"pre",{"className":22,"code":23,"language":24,"meta":25,"style":25},"language-js shiki shiki-themes github-dark-default","import { kinesis } from \"@amineyarman\u002Fkinesis\"\nimport { createAudio } from \"@amineyarman\u002Fkinesis\u002Faudio\"\n\nconst audio = createAudio(document.querySelector(\"audio\"))\n\nkinesis(\".speaker__cone\").bind({\n  scale: audio.bass.map([0.78, 0.95], [1, 1.3]),\n})\n","js","",[27,28,29,49,62,69,101,106,126,161],"code",{"__ignoreMap":25},[30,31,34,38,42,45],"span",{"class":32,"line":33},"line",1,[30,35,37],{"class":36},"suJrU","import",[30,39,41],{"class":40},"sZEs4"," { kinesis } ",[30,43,44],{"class":36},"from",[30,46,48],{"class":47},"s9uIt"," \"@amineyarman\u002Fkinesis\"\n",[30,50,52,54,57,59],{"class":32,"line":51},2,[30,53,37],{"class":36},[30,55,56],{"class":40}," { createAudio } ",[30,58,44],{"class":36},[30,60,61],{"class":47}," \"@amineyarman\u002Fkinesis\u002Faudio\"\n",[30,63,65],{"class":32,"line":64},3,[30,66,68],{"emptyLinePlaceholder":67},true,"\n",[30,70,72,75,79,82,86,89,92,95,98],{"class":32,"line":71},4,[30,73,74],{"class":36},"const",[30,76,78],{"class":77},"sFSAA"," audio",[30,80,81],{"class":36}," =",[30,83,85],{"class":84},"sc3cj"," createAudio",[30,87,88],{"class":40},"(document.",[30,90,91],{"class":84},"querySelector",[30,93,94],{"class":40},"(",[30,96,97],{"class":47},"\"audio\"",[30,99,100],{"class":40},"))\n",[30,102,104],{"class":32,"line":103},5,[30,105,68],{"emptyLinePlaceholder":67},[30,107,109,112,114,117,120,123],{"class":32,"line":108},6,[30,110,111],{"class":84},"kinesis",[30,113,94],{"class":40},[30,115,116],{"class":47},"\".speaker__cone\"",[30,118,119],{"class":40},").",[30,121,122],{"class":84},"bind",[30,124,125],{"class":40},"({\n",[30,127,129,132,135,138,141,144,147,150,153,155,158],{"class":32,"line":128},7,[30,130,131],{"class":40},"  scale: audio.bass.",[30,133,134],{"class":84},"map",[30,136,137],{"class":40},"([",[30,139,140],{"class":77},"0.78",[30,142,143],{"class":40},", ",[30,145,146],{"class":77},"0.95",[30,148,149],{"class":40},"], [",[30,151,152],{"class":77},"1",[30,154,143],{"class":40},[30,156,157],{"class":77},"1.3",[30,159,160],{"class":40},"]),\n",[30,162,164],{"class":32,"line":163},8,[30,165,166],{"class":40},"})\n",[168,169],"demo",{"id":170},"audio",[172,173,175],"h2",{"id":174},"sources","Sources",[10,177,178,181],{},[27,179,180],{},"createAudio()"," accepts:",[183,184,185,197,207],"ul",{},[186,187,188,189,192,193,196],"li",{},"an ",[27,190,191],{},"\u003Caudio>"," or ",[27,194,195],{},"\u003Cvideo>"," element, which keeps playing through your speakers",[186,198,199,200,203,204],{},"a ",[27,201,202],{},"MediaStream",", for example from ",[27,205,206],{},"getUserMedia({ audio: true })",[186,208,209,210],{},"any Web Audio ",[27,211,212],{},"AudioNode",[172,214,216],{"id":215},"signals","Signals",[218,219,220,233],"table",{},[221,222,223],"thead",{},[224,225,226,230],"tr",{},[227,228,229],"th",{},"Signal",[227,231,232],{},"Range",[234,235,236,247,257,267,277],"tbody",{},[224,237,238,244],{},[239,240,241],"td",{},[27,242,243],{},"volume",[239,245,246],{},"overall loudness",[224,248,249,254],{},[239,250,251],{},[27,252,253],{},"bass",[239,255,256],{},"20 to 250 Hz",[224,258,259,264],{},[239,260,261],{},[27,262,263],{},"mid",[239,265,266],{},"250 Hz to 2 kHz",[224,268,269,274],{},[239,270,271],{},[27,272,273],{},"treble",[239,275,276],{},"2 to 16 kHz",[224,278,279,284],{},[239,280,281],{},[27,282,283],{},"band(from, to)",[239,285,286],{},"any range in Hz",[10,288,289],{},"Values go from 0 to 1 on a decibel scale, like the meters on a mixing desk. A loud band often sits between 0.7 and 1, and the useful range depends on the track. Log a band while it plays, then map the range you see:",[20,291,293],{"className":22,"code":292,"language":24,"meta":25,"style":25},"audio.bass.subscribe((level) => console.log(level.toFixed(2)))\n\nkinesis(\".cone\").bind({ scale: audio.bass.map([0.78, 0.95], [1, 1.3]) })\n",[27,294,295,336,340],{"__ignoreMap":25},[30,296,297,300,303,306,310,313,316,319,322,325,328,330,333],{"class":32,"line":33},[30,298,299],{"class":40},"audio.bass.",[30,301,302],{"class":84},"subscribe",[30,304,305],{"class":40},"((",[30,307,309],{"class":308},"sQhOw","level",[30,311,312],{"class":40},") ",[30,314,315],{"class":36},"=>",[30,317,318],{"class":40}," console.",[30,320,321],{"class":84},"log",[30,323,324],{"class":40},"(level.",[30,326,327],{"class":84},"toFixed",[30,329,94],{"class":40},[30,331,332],{"class":77},"2",[30,334,335],{"class":40},")))\n",[30,337,338],{"class":32,"line":51},[30,339,68],{"emptyLinePlaceholder":67},[30,341,342,344,346,349,351,353,356,358,360,362,364,366,368,370,372,374],{"class":32,"line":64},[30,343,111],{"class":84},[30,345,94],{"class":40},[30,347,348],{"class":47},"\".cone\"",[30,350,119],{"class":40},[30,352,122],{"class":84},[30,354,355],{"class":40},"({ scale: audio.bass.",[30,357,134],{"class":84},[30,359,137],{"class":40},[30,361,140],{"class":77},[30,363,143],{"class":40},[30,365,146],{"class":77},[30,367,149],{"class":40},[30,369,152],{"class":77},[30,371,143],{"class":40},[30,373,157],{"class":77},[30,375,376],{"class":40},"]) })\n",[10,378,379,380,383],{},"Add ",[27,381,382],{},".spring()"," for smoother motion.",[172,385,387],{"id":386},"autoplay","Autoplay",[10,389,390,391,394],{},"Browsers keep audio silent until the visitor interacts with the page. With a media element, Kinesis resumes the audio context when playback starts. If you start sound yourself, call ",[27,392,393],{},"audio.resume()"," from a click handler.",[172,396,398],{"id":397},"options-and-cleanup","Options and cleanup",[20,400,402],{"className":22,"code":401,"language":24,"meta":25,"style":25},"const audio = createAudio(element, {\n  fftSize: 1024,      \u002F\u002F analyser resolution\n  smoothing: 0.75,    \u002F\u002F 0 reacts instantly, 1 never changes\n})\n\naudio.destroy()       \u002F\u002F disconnect the analyser\n",[27,403,404,417,432,446,450,454],{"__ignoreMap":25},[30,405,406,408,410,412,414],{"class":32,"line":33},[30,407,74],{"class":36},[30,409,78],{"class":77},[30,411,81],{"class":36},[30,413,85],{"class":84},[30,415,416],{"class":40},"(element, {\n",[30,418,419,422,425,428],{"class":32,"line":51},[30,420,421],{"class":40},"  fftSize: ",[30,423,424],{"class":77},"1024",[30,426,427],{"class":40},",      ",[30,429,431],{"class":430},"sH3jZ","\u002F\u002F analyser resolution\n",[30,433,434,437,440,443],{"class":32,"line":64},[30,435,436],{"class":40},"  smoothing: ",[30,438,439],{"class":77},"0.75",[30,441,442],{"class":40},",    ",[30,444,445],{"class":430},"\u002F\u002F 0 reacts instantly, 1 never changes\n",[30,447,448],{"class":32,"line":71},[30,449,166],{"class":40},[30,451,452],{"class":32,"line":103},[30,453,68],{"emptyLinePlaceholder":67},[30,455,456,459,462,465],{"class":32,"line":108},[30,457,458],{"class":40},"audio.",[30,460,461],{"class":84},"destroy",[30,463,464],{"class":40},"()       ",[30,466,467],{"class":430},"\u002F\u002F disconnect the analyser\n",[10,469,470],{},"Analysis runs only while something reads the signals and the media plays. A paused track costs nothing.",[472,473,474],"style",{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}",{"title":25,"searchDepth":64,"depth":64,"links":476},[477,478,479,480],{"id":174,"depth":51,"text":175},{"id":215,"depth":51,"text":216},{"id":386,"depth":51,"text":387},{"id":397,"depth":51,"text":398},"Turn an audio or video element, a microphone, or any Web Audio node into signals that drive motion.","md",{},"\u002Fdocs\u002Faudio","---\ntitle: Audio\ndescription: Turn an audio or video element, a microphone, or any Web Audio node into signals that drive motion.\n---\n\nThe audio module measures loudness in frequency ranges and exposes each one as a [signal](\u002Fdocs\u002Fjavascript\u002F#signals). Bind signals to any property.\n\n```js\nimport { kinesis } from \"@amineyarman\u002Fkinesis\"\nimport { createAudio } from \"@amineyarman\u002Fkinesis\u002Faudio\"\n\nconst audio = createAudio(document.querySelector(\"audio\"))\n\nkinesis(\".speaker__cone\").bind({\n  scale: audio.bass.map([0.78, 0.95], [1, 1.3]),\n})\n```\n\n::demo{id=\"audio\"}\n::\n\n## Sources\n\n`createAudio()` accepts:\n\n- an `\u003Caudio>` or `\u003Cvideo>` element, which keeps playing through your speakers\n- a `MediaStream`, for example from `getUserMedia({ audio: true })`\n- any Web Audio `AudioNode`\n\n## Signals\n\n| Signal | Range |\n| --- | --- |\n| `volume` | overall loudness |\n| `bass` | 20 to 250 Hz |\n| `mid` | 250 Hz to 2 kHz |\n| `treble` | 2 to 16 kHz |\n| `band(from, to)` | any range in Hz |\n\nValues go from 0 to 1 on a decibel scale, like the meters on a mixing desk. A loud band often sits between 0.7 and 1, and the useful range depends on the track. Log a band while it plays, then map the range you see:\n\n```js\naudio.bass.subscribe((level) => console.log(level.toFixed(2)))\n\nkinesis(\".cone\").bind({ scale: audio.bass.map([0.78, 0.95], [1, 1.3]) })\n```\n\nAdd `.spring()` for smoother motion.\n\n## Autoplay\n\nBrowsers keep audio silent until the visitor interacts with the page. With a media element, Kinesis resumes the audio context when playback starts. If you start sound yourself, call `audio.resume()` from a click handler.\n\n## Options and cleanup\n\n```js\nconst audio = createAudio(element, {\n  fftSize: 1024,      \u002F\u002F analyser resolution\n  smoothing: 0.75,    \u002F\u002F 0 reacts instantly, 1 never changes\n})\n\naudio.destroy()       \u002F\u002F disconnect the analyser\n```\n\nAnalysis runs only while something reads the signals and the media plays. A paused track costs nothing.\n",{"title":5,"description":481},"docs\u002Faudio","t7qprZ_Bl5KUo4yUs5BzdtoZEPWexrKYsnBaTSToD5c",1791309903049]