@grame/faust-web-component 0.1.0

package/src/faust-widget.ts

@@ -0,0 +1,212 @@
+import { icon } from "@fortawesome/fontawesome-svg-core"
+import faustCSS from "@shren/faust-ui/dist/esm/index.css?inline"
+import faustSvg from "./faustText.svg"
+import { IFaustMonoWebAudioNode } from "@grame/faustwasm"
+import { IFaustPolyWebAudioNode } from "@grame/faustwasm"
+import { FaustUI } from "@shren/faust-ui"
+import { faustPromise, audioCtx, mono_generator, poly_generator, compiler, getInputDevices, deviceUpdateCallbacks, accessMIDIDevice, midiInputCallback } from "./common"
+
+const template = document.createElement("template")
+template.innerHTML = `
+<div id="root">
+    <div id="controls">
+        <button title="On/off" class="button" id="power" disabled>${icon({ prefix: "fas", iconName: "power-off" }).html[0]}</button>
+        <select id="audio-input" class="dropdown" disabled>
+            <option>Audio input</option>
+        </select>
+        <!-- TODO: MIDI input
+        <select id="midi-input" class="dropdown" disabled>
+            <option>MIDI input</option>
+        </select>
+        -->
+        <!-- TODO: volume control? <input id="volume" type="range" min="0" max="100"> -->
+        <a title="Faust website" id="faust" href="https://faust.grame.fr/" target="_blank"><img src="${faustSvg}" height="15px" /></a>
+    </div>
+    <div id="faust-ui"></div>
+</div>
+<style>
+    #root {
+        border: 1px solid black;
+        border-radius: 5px;
+        box-sizing: border-box;
+        display: inline-block;
+        background-color: #384d64;
+    }
+
+    *, *:before, *:after {
+        box-sizing: inherit; 
+    }
+
+    #controls {
+        display: flex;
+        margin-bottom: -20px;
+        position: relative;
+        z-index: 1;
+    }
+
+    #faust {
+        margin-left: auto;
+        padding-left: 10px;
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+    }
+
+    a.button {
+        appearance: button;
+    }
+
+    .button {
+        background-color: #384d64;
+        border: 0;
+        padding: 5px;
+        width: 25px;
+        height: 25px;
+        color: #fff;
+    }
+
+    .button:hover {
+        background-color: #4b71a1;
+    }
+
+    .button:active {
+        background-color: #373736;
+    }
+
+    .button:disabled {
+        opacity: 0.65;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    #controls > .button > svg {
+        width: 15px;
+        height: 15px;
+        vertical-align: top;
+    }
+
+    .dropdown {
+        height: 19px;
+        margin: 3px 0 3px 10px;
+        border: 0;
+        background: #fff;
+    }
+
+    ${faustCSS}
+</style>
+`
+
+export default class FaustWidget extends HTMLElement {
+    constructor() {
+        super()
+    }
+
+    connectedCallback() {
+        const code = this.innerHTML.replace("<!--", "").replace("-->", "").trim()
+        this.attachShadow({ mode: "open" }).appendChild(template.content.cloneNode(true))
+
+        const powerButton = this.shadowRoot!.querySelector("#power") as HTMLButtonElement
+        const faustUIRoot = this.shadowRoot!.querySelector("#faust-ui") as HTMLDivElement
+
+        faustPromise.then(() => powerButton.disabled = false)
+
+        let on = false
+        //let node: IFaustMonoWebAudioNode | undefined
+        let node: IFaustPolyWebAudioNode | undefined
+        let input: MediaStreamAudioSourceNode | undefined
+        let faustUI: FaustUI
+
+        const setup = async () => {
+            await faustPromise
+            // Compile Faust code
+            //await mono_generator.compile(compiler, "main", code, "")
+            await poly_generator.compile(compiler, "main", code, "")
+            // Create controls via Faust UI
+            //const ui = mono_generator.getUI()
+            const ui = poly_generator.getUI()
+            faustUI = new FaustUI({ ui, root: faustUIRoot })
+            faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px"
+            faustUIRoot.style.height = faustUI.minHeight * 1.25 + "px"
+            faustUI.resize()
+        }
+
+        const start = async () => {
+            if (audioCtx.state === "suspended") {
+                await audioCtx.resume()
+            }
+            // Create an audio node from compiled Faust
+            if (node === undefined) {
+                //node = (await mono_generator.createNode(audioCtx))!
+                node = (await poly_generator.createNode(audioCtx, 16))!
+            }
+
+            faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value)
+            node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value))
+
+            if (node.numberOfInputs > 0) {
+                audioInputSelector.disabled = false
+                updateInputDevices(await getInputDevices())
+                await connectInput()
+            } else {
+                audioInputSelector.disabled = true
+                audioInputSelector.innerHTML = "<option>Audio input</option>"
+            }
+
+            accessMIDIDevice(midiInputCallback(node))
+                .then(() => {
+                    console.log('Successfully connected to the MIDI device.');
+                })
+                .catch((error) => {
+                    console.error('Error accessing MIDI device:', error.message);
+                });
+
+            node.connect(audioCtx.destination)
+            powerButton.style.color = "#ffa500"
+        }
+
+        const stop = () => {
+            node?.disconnect()
+            powerButton.style.color = "#fff"
+        }
+
+        powerButton.onclick = () => {
+            if (on) {
+                stop()
+            } else {
+                start()
+            }
+            on = !on
+        }
+
+        const audioInputSelector = this.shadowRoot!.querySelector("#audio-input") as HTMLSelectElement
+
+        const updateInputDevices = (devices: MediaDeviceInfo[]) => {
+            if (audioInputSelector.disabled) return
+            while (audioInputSelector.lastChild) audioInputSelector.lastChild.remove()
+            for (const device of devices) {
+                if (device.kind === "audioinput") {
+                    audioInputSelector.appendChild(new Option(device.label || device.deviceId, device.deviceId))
+                }
+            }
+        }
+        deviceUpdateCallbacks.push(updateInputDevices)
+
+        const connectInput = async () => {
+            const deviceId = audioInputSelector.value
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId, echoCancellation: false, noiseSuppression: false, autoGainControl: false } })
+            if (input) {
+                input.disconnect()
+                input = undefined
+            }
+            if (node && node.numberOfInputs > 0) {
+                input = audioCtx.createMediaStreamSource(stream)
+                input.connect(node!)
+            }
+        }
+
+        audioInputSelector.onchange = connectInput
+
+        setup()
+    }
+}
+

package/src/faustText.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" xml:space="preserve" width="64.333328" height="12.414666" viewBox="0 0 64.333327 12.414666"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath clipPathUnits="userSpaceOnUse" id="clipPath18"><path d="M 0,93.507 H 93.507 V 0 H 0 Z" id="path16"/></clipPath></defs><g style="fill:#ffffff" id="g10" transform="matrix(1.3333333,0,0,-1.3333333,-31.440266,68.495732)"><g id="g12" style="fill:#ffffff"><g id="g14" clip-path="url(#clipPath18)" style="fill:#ffffff"><g id="g20" transform="translate(69.0172,49.3868)" style="fill:#ffffff"><path d="M 0,0 V -7.026 H -2.017 V 0 H -4.843 V 1.747 H 2.813 V 0 Z m -8.276,-5.615 c -0.176,-0.333 -0.415,-0.62 -0.718,-0.863 -0.302,-0.243 -0.658,-0.433 -1.067,-0.569 -0.409,-0.136 -0.849,-0.204 -1.321,-0.204 -0.435,0 -0.833,0.041 -1.193,0.124 -0.361,0.082 -0.685,0.191 -0.973,0.327 -0.289,0.135 -0.548,0.29 -0.779,0.463 -0.232,0.174 -0.431,0.352 -0.598,0.534 l 1.278,1.384 c 0.115,-0.125 0.248,-0.252 0.4,-0.381 0.152,-0.129 0.321,-0.247 0.509,-0.352 0.187,-0.106 0.392,-0.191 0.614,-0.255 0.221,-0.065 0.46,-0.097 0.716,-0.097 0.15,0 0.3,0.021 0.447,0.064 0.149,0.043 0.285,0.107 0.41,0.191 0.124,0.084 0.223,0.185 0.296,0.303 0.073,0.119 0.11,0.253 0.11,0.404 0,0.327 -0.158,0.581 -0.474,0.762 -0.316,0.181 -0.817,0.36 -1.504,0.536 -0.333,0.078 -0.64,0.192 -0.922,0.342 -0.283,0.151 -0.526,0.332 -0.729,0.543 -0.204,0.211 -0.361,0.453 -0.474,0.726 -0.112,0.274 -0.169,0.578 -0.169,0.914 0,0.368 0.065,0.714 0.195,1.038 0.13,0.325 0.328,0.611 0.595,0.859 0.266,0.247 0.597,0.443 0.993,0.589 0.397,0.145 0.865,0.218 1.406,0.218 0.446,0 0.842,-0.046 1.187,-0.137 0.344,-0.092 0.637,-0.201 0.877,-0.329 0.24,-0.127 0.437,-0.258 0.591,-0.391 0.155,-0.134 0.271,-0.239 0.348,-0.316 l -1.143,-1.266 c -0.099,0.078 -0.212,0.162 -0.338,0.255 -0.127,0.093 -0.268,0.179 -0.425,0.258 -0.156,0.08 -0.33,0.147 -0.521,0.201 -0.19,0.053 -0.391,0.08 -0.601,0.08 -0.142,0 -0.28,-0.022 -0.416,-0.067 -0.135,-0.046 -0.258,-0.105 -0.367,-0.178 -0.11,-0.073 -0.198,-0.161 -0.264,-0.265 -0.066,-0.103 -0.1,-0.211 -0.1,-0.323 0,-0.301 0.159,-0.544 0.477,-0.73 0.318,-0.185 0.753,-0.34 1.307,-0.465 0.327,-0.077 0.645,-0.184 0.955,-0.319 0.311,-0.136 0.588,-0.314 0.832,-0.536 0.244,-0.222 0.441,-0.493 0.591,-0.814 0.15,-0.321 0.225,-0.711 0.225,-1.172 0,-0.392 -0.088,-0.754 -0.263,-1.086 m -10.307,1.854 c 0,-0.527 -0.086,-1.01 -0.257,-1.449 -0.172,-0.439 -0.418,-0.813 -0.74,-1.124 -0.321,-0.31 -0.71,-0.553 -1.167,-0.729 -0.456,-0.175 -0.965,-0.263 -1.526,-0.263 -0.56,0 -1.067,0.086 -1.522,0.257 -0.455,0.171 -0.841,0.414 -1.159,0.729 -0.318,0.315 -0.563,0.691 -0.734,1.13 -0.171,0.439 -0.256,0.922 -0.256,1.449 v 5.446 h 1.985 v -5.271 c 0,-0.295 0.029,-0.56 0.086,-0.795 0.058,-0.235 0.153,-0.437 0.284,-0.606 0.131,-0.169 0.304,-0.301 0.521,-0.394 0.217,-0.094 0.481,-0.14 0.795,-0.14 0.309,0 0.57,0.046 0.785,0.14 0.214,0.093 0.388,0.225 0.521,0.394 0.133,0.169 0.227,0.371 0.283,0.606 0.056,0.235 0.084,0.5 0.084,0.795 v 5.271 h 2.017 z M -30.68,-7.026 c -0.596,0 -1.078,0.482 -1.078,1.077 0,0.595 0.482,1.078 1.078,1.078 0.595,0 1.077,-0.483 1.077,-1.078 0,-0.595 -0.482,-1.077 -1.077,-1.077 m -1.702,3.551 -1.067,3.314 -1.092,-3.314 -0.054,-0.181 h -1.899 l 2.018,5.403 h 2.196 l 1.977,-5.4 -2.023,-0.005 z m -3.708,-3.551 c -0.595,0 -1.078,0.482 -1.078,1.077 0,0.595 0.483,1.078 1.078,1.078 0.595,0 1.078,-0.483 1.078,-1.078 0,-0.595 -0.483,-1.077 -1.078,-1.077 M -39.541,0 h -3.912 v -1.991 h 2.974 v -1.696 h -2.974 v -3.339 h -1.984 v 8.773 h 5.896 z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" id="path22"/></g></g></g></g></svg>

package/src/main.ts

@@ -0,0 +1,5 @@
+import FaustEditor from "./faust-editor"
+import FaustWidget from "./faust-widget"
+
+customElements.define("faust-editor", FaustEditor)
+customElements.define("faust-widget", FaustWidget)

package/src/scope.ts

@@ -0,0 +1,205 @@
+// Based on https://codepen.io/ContemporaryInsanity/pen/Mwvqpb
+
+export class Scope {
+    container: HTMLElement
+    canvas: HTMLCanvasElement
+    ctx: CanvasRenderingContext2D
+    
+    constructor(container: HTMLElement) {
+        this.container = container
+        this.container.classList.add("scope")
+        
+        this.canvas = document.createElement("canvas")
+        this.canvas.style.transformOrigin = "top left"
+        this.ctx = this.canvas.getContext("2d")!
+        this.onResize = this.onResize.bind(this)
+        
+        this.container.appendChild(this.canvas)
+        this.onResize()
+        window.addEventListener("resize", this.onResize)
+    }
+    
+    get canvasWidth() { return this.canvas.width / devicePixelRatio }
+    set canvasWidth(canvasWidth) {
+        this.canvas.width = Math.floor(canvasWidth * devicePixelRatio)
+        this.canvas.style.width = `${canvasWidth}px`
+    }
+    
+    get canvasHeight() { return this.canvas.height / devicePixelRatio }
+    set canvasHeight(canvasHeight) {
+        this.canvas.height = Math.floor(canvasHeight * devicePixelRatio)
+        this.canvas.style.height = `${canvasHeight}px`
+    }
+    
+    renderScope(toRender: { analyser: AnalyserNode, style: string, edgeThreshold: number }[] = []) {
+        // grid
+        this.ctx.fillStyle = "white"
+        this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+        this.ctx.lineWidth = 1
+        this.ctx.strokeStyle = "rgba(200, 200, 200, 0.5)"
+        this.ctx.fillStyle = "rgba(200, 200, 200, 0.5)"
+        this.ctx.beginPath()
+        
+        const numHorzSteps = 8
+        const horzStep = this.canvasWidth / numHorzSteps
+        for (let i = horzStep; i < this.canvasWidth; i += horzStep) {
+            this.ctx.moveTo(i, 0)
+            this.ctx.lineTo(i, this.canvasHeight)
+        }
+        
+        const numVertSteps = 4
+        const vertStep = this.canvasHeight / numVertSteps
+        for (let i = 0; i < this.canvasHeight; i += vertStep) {
+            this.ctx.moveTo(0, i)
+            this.ctx.lineTo(this.canvasWidth, i)
+        }
+        this.ctx.stroke()
+        
+        // 0 line
+        this.ctx.strokeStyle = "rgba(100, 100, 100, 0.5)"
+        this.ctx.beginPath()
+        this.ctx.lineWidth = 2
+        this.ctx.moveTo(0, this.canvasHeight / 2)
+        this.ctx.lineTo(this.canvasWidth, this.canvasHeight / 2)
+        this.ctx.stroke()
+        
+        // waveforms
+        toRender.forEach(({ analyser, style = "rgb(43, 156, 212)", edgeThreshold = 0 }) => {
+            if (analyser === undefined) { return }
+            
+            const timeData = new Float32Array(analyser.frequencyBinCount)
+            let risingEdge = 0
+            
+            analyser.getFloatTimeDomainData(timeData)
+            
+            this.ctx.lineWidth = 2
+            this.ctx.strokeStyle = style
+            
+            this.ctx.beginPath()
+            
+            while (timeData[risingEdge] > 0 &&
+                risingEdge <= this.canvasWidth &&
+                risingEdge < timeData.length) {
+                risingEdge++
+            }
+            
+            if (risingEdge >= this.canvasWidth) { risingEdge = 0 }
+            
+            
+            while (timeData[risingEdge] < edgeThreshold &&
+                risingEdge <= this.canvasWidth  &&
+                risingEdge< timeData.length) {
+                    risingEdge++
+                }
+                
+            if (risingEdge >= this.canvasWidth) { risingEdge = 0 }
+            
+            for (let x = risingEdge; x < timeData.length && x - risingEdge < this.canvasWidth; x++) {
+                const y = this.canvasHeight - (((timeData[x] + 1) / 2) * this.canvasHeight)
+                this.ctx.lineTo(x - risingEdge, y)
+            }
+            
+            this.ctx.stroke()
+        })
+        
+        // markers
+        this.ctx.fillStyle = "black"
+        this.ctx.font = "11px Courier"
+        this.ctx.textAlign = "left"
+        const numMarkers = 4
+        const markerStep = this.canvasHeight / numMarkers
+        for (let i = 0; i <= numMarkers; i++) {
+            this.ctx.textBaseline =
+                  i === 0          ? "top"
+                : i === numMarkers ? "bottom"
+                :                    "middle"
+
+            const value = ((numMarkers - i) - (numMarkers / 2)) / numMarkers * 2
+            this.ctx.textAlign = "left"
+            this.ctx.fillText(value + "", 5, i * markerStep)
+            this.ctx.textAlign = "right"
+            this.ctx.fillText(value + "", this.canvasWidth - 5, i * markerStep)
+        }
+    }
+    
+    renderSpectrum(analyser: AnalyserNode) {
+        const freqData = new Uint8Array(analyser.frequencyBinCount)
+        
+        analyser.getByteFrequencyData(freqData)
+        
+        this.ctx.fillStyle = "white"
+        this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+        
+        this.ctx.lineWidth = 2
+        this.ctx.strokeStyle = "rgb(43, 156, 212)"
+        this.ctx.beginPath()
+        
+        for (let i = 0; i < freqData.length; i++) {
+            const x = (Math.log(i / 1)) / (Math.log(freqData.length / 1)) * this.canvasWidth
+            const height = (freqData[i] * this.canvasHeight) / 256
+            this.ctx.lineTo(x, this.canvasHeight - height)
+        }
+        this.ctx.stroke()
+        
+        const fontSize = 12
+        
+        // frequencies
+        function explin(value: number, inMin: number, inMax: number, outMin: number, outMax: number) {
+            inMin = Math.max(inMin, 1)
+            outMin = Math.max(outMin, 1)
+            return Math.log10(value / inMin) / Math.log10(inMax / inMin) * (outMax - outMin) + outMin
+        }
+        
+        const nyquist = analyser.context.sampleRate / 2;
+        [0, 100, 300, 1000, 3000, 10000, 20000].forEach(freq => {
+            const minFreq = 20
+            const x = freq <= 0
+            ? fontSize - 5
+            : explin(freq, minFreq, nyquist, 0, this.canvasWidth)
+            
+            this.ctx.fillStyle = "black"
+            this.ctx.textBaseline = "middle"
+            this.ctx.textAlign = "right"
+            this.ctx.font = `${fontSize}px Courier`
+            this.ctx.save()
+            this.ctx.translate(x, this.canvasHeight - 5)
+            this.ctx.rotate(Math.PI * 0.5)
+            this.ctx.fillText(`${freq.toFixed(0)}hz`, 0, 0)
+            this.ctx.restore()
+        });
+        
+        [0, -3, -6, -12].forEach(db => {
+            const x = 5
+            const amp = Math.pow(10, db * 0.05)
+            const y = (1 - amp) * this.canvasHeight
+            
+            this.ctx.fillStyle = "black"
+            this.ctx.textBaseline = "top"
+            this.ctx.textAlign = "left"
+            this.ctx.font = `${fontSize}px Courier`
+            this.ctx.fillText(`${db.toFixed(0)}db`, x, y)
+        })
+    }
+    
+    onResize() {
+        this.canvasWidth = 0
+        this.canvasHeight = 0
+        
+        const rect = this.container.getBoundingClientRect()
+        const style = getComputedStyle(this.container)
+        
+        let borderLeft = style.getPropertyValue("border-left-width")
+        let left = borderLeft === "" ? 0 : parseFloat(borderLeft)
+        let borderRight = style.getPropertyValue("border-right-width")
+        let right = borderRight === "" ? 0 : parseFloat(borderRight)
+        this.canvasWidth = rect.width - left - right
+        
+        let borderTop = style.getPropertyValue("border-top-width")
+        let top = borderTop === "" ? 0 : parseFloat(borderTop)
+        let borderBottom = style.getPropertyValue("border-bottom-width")
+        let bottom = borderBottom === "" ? 0 : parseFloat(borderBottom)
+        this.canvasHeight = rect.height - top - bottom
+        
+        this.ctx.scale(devicePixelRatio, devicePixelRatio)
+    }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/vite.config.js

@@ -0,0 +1,13 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, "src/main.ts"),
+            name: "faust_web_component",
+            formats: ["iife"],
+            fileName: () => "faust-web-component.js",
+        },
+    },
+})