2c:null 2d:["$","title",null,{"children":"Audio Worklet - Volume Monitoring RMS | Radamés Ajna | Observable"}] 32:T907,scriptURL = { const codeString = ` const QUANTUM_SIZE = 128; class audioMonitor extends AudioWorkletProcessor { constructor() { super(); this._volume = 0; this._updateIntervalInMS = 25; this._nextUpdateFrame = this._updateIntervalInMS; } static get parameterDescriptors() { return [{name: 'clipLevel', defaultValue: 0.98}, {name: 'averaging', defaultValue: 0.95}, {name: 'clipLag', defaultValue: 750}]; } get intervalInFrames() { return this._updateIntervalInMS / 1000 * sampleRate; } process(inputs, outputs, parameters) { const clipLevel = parameters.clipLevel[0]; const averaging = parameters.averaging[0]; const clipLag = parameters.clipLag[0]; const input = inputs[0]; const volumes = input.map((channel, id) => { const samples = channel; let sum = 0; let isClipping = false; let lastClip = 0; // Calculated the squared-sum. for (let i = 0; i < samples.length; ++i){ if(Math.abs(samples[i]) >= clipLevel) { isClipping = true; lastClip = Date.now(); } if((lastClip + clipLag) < Date.now()) isClipping = false; sum += samples[i] * samples[i]; } // Calculate the RMS level and update the volume. const rms = Math.sqrt(sum / samples.length); // Now smooth this out with the averaging factor applied // to the previous sample - take the max here because we // want "fast attack, slow release." this._volume = Math.max(rms, this._volume * averaging); return { value: this._volume, clipping: isClipping } }) // Update and sync the volume property with the main thread. this._nextUpdateFrame -= QUANTUM_SIZE; if (this._nextUpdateFrame < 0) { this._nextUpdateFrame += this.intervalInFrames; this.port.postMessage({ volume: volumes }); } return true; } }; registerProcessor('audio-monitor', audioMonitor)`; return URL.createObjectURL( new Blob([codeString], { type: "text/javascript" }) ); }33:[] 30:{"id":"d2ef576c668fd9b9","slug":"audio-worklet-volume-monitoring-rms","title":"Audio Worklet - Volume Monitoring RMS","thumbnail":"70640b00d9c48f8f959ed89a1f56d3374adf97a33e3c571ae78b05cfb80491f5","access_level":"public","create_time":"$D2021-10-31T17:19:00.577Z","update_time":"$D2021-11-12T21:12:49.531Z","view_time":null,"first_public_time":"$D2021-11-01T18:38:52.326Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":"starter_2024"},"version":1171,"publish_version":1171,"role":null,"authored":false,"authors":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}],"members":[{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"e6ac3b1fb1f272eb","slug":"experiments","title":"Experiments","owner":{"id":"d6fb6dd3ddf05afb","login":"radames","name":"Radamés Ajna"}},"type":"notebook","body":{"title":"Audio Worklet - Volume Monitoring RMS","cells":[{"id":0,"value":"# Audio Worklet - Volume Monitoring RMS\n\n\nInspired by:\n* https://github.com/cwilso/volume-meter/blob/master/volume-meter.js\n* https://observablehq.com/@skybrian/audio-worklet-example\n* https://codepen.io/forgived/pen/ZEQrWeW","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":104,"value":"viewof audioCtx = {\n const span = html``;\n const btn = html`

`;\n let audioCtx = new window.AudioContext();\n\n span.innerText = audioCtx.state;\n btn.value = audioCtx;\n btn.button.onclick = async () => {\n if (audioCtx.state !== \"running\") {\n audioCtx = new window.AudioContext();\n }\n btn.button.disabled = audioCtx.state === \"running\";\n span.innerText = audioCtx.state;\n await audioCtx.audioWorklet.addModule(scriptURL);\n\n btn.value = audioCtx;\n btn.dispatchEvent(new Event(\"input\"));\n };\n if (audioCtx.state === \"running\") {\n btn.button.disabled = audioCtx.state === \"running\";\n await audioCtx.audioWorklet.addModule(scriptURL);\n }\n\n invalidation.then(() => audioCtx.close());\n\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":881,"value":"viewof audioDevice = Inputs.select(new Map(devices.audio), {\n label: \"Audio Devices\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":937,"value":"{\n const p = 5;\n const total = 10;\n const h = 100;\n const amp = 10;\n const w = 10;\n return html`\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"viewof clipLevel = Inputs.range([0, 1], { value: 0.5, label: \"Clip Level\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"Plot.plot({\n color: {\n domain: [true, false],\n range: [\"red\", \"black\"]\n },\n y: { domain: [0, 1], axis: true },\n\n marks: [\n Plot.barY(volumeData, {\n x: (_, i) => i,\n y: \"value\",\n fill: \"clipping\"\n }),\n Plot.ruleY([{ label: \"Clip Level\", value: clipLevel }], {\n y: \"value\",\n strokeWidth: 1\n }),\n Plot.text([{ label: \"Clip Level\", value: clipLevel }], {\n y: \"value\",\n x: 0,\n dy: -4,\n textAnchor: \"middle\",\n text: \"label\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":871,"value":"devices = {\n await navigator.mediaDevices.getUserMedia({\n audio: true,\n video: false\n });\n return navigator.mediaDevices.enumerateDevices().then((devices) => {\n return {\n audio: devices\n .filter((e) => e.kind === \"audioinput\")\n .map((e) => [e.label, e.deviceId])\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"stream = {\n const stream = await navigator.mediaDevices.getUserMedia({\n audio: {\n deviceId: audioDevice ? { exact: audioDevice } : null,\n echoCancellation: false,\n noiseSuppression: false,\n autoGainControl: false\n // channelCount: 2zz\n // latency: 0,\n // sampleRate: 48000,\n // sampleSize: 12\n // volume: 1.0\n },\n video: false\n });\n const tracks = await stream.getTracks();\n\n invalidation.then(() => {\n console.log(\"DELETING\", tracks);\n tracks.forEach((track) => {\n track.stop();\n });\n });\n\n return stream;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"volumeData = Generators.observe((change) => {\n try {\n const microphone = audioCtx.createMediaStreamSource(stream);\n const node = new AudioWorkletNode(audioCtx, \"audio-monitor\", {\n parameterData: {\n clipLevel: clipLevel,\n averaging: 0.9,\n clipLag: 750\n }\n });\n node.port.onmessage = (event) => {\n change(event.data.volume);\n };\n\n invalidation.then(() => microphone.disconnect());\n microphone.connect(node).connect(audioCtx.destination);\n } catch (e) {\n console.log(e);\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"