@tialro2/rnbokit 1.0.0

package/dist/RNBOcomponents/AudioDropIn.svelte

@@ -0,0 +1,133 @@
+<script>
+	//A file drop in/media player for audio
+	import { flip } from 'svelte/animate';
+	import { crossfade } from 'svelte/transition';
+	const [send, receive] = crossfade({
+		duration: (d) => Math.sqrt(d * 200)
+	});
+
+	import FileDropZone from '../UIcomponents/FileDropZone.svelte';
+
+	
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {AudioContext} context
+	 * @property {AudioNode|undefined} audio
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { context, audio = $bindable(), ...rest } = $props();
+
+	/** @type {Array<File>} */
+	let files = $state([]);
+	/** @type {HTMLMediaElement[]} */
+	let audioElements = $state([]);
+
+	/** @type {HTMLMediaElement|undefined} */
+	let current;
+
+	/**
+	 * pause other running audio and connect new playing source on play
+	 * @param {Event} e
+	 */
+	function onPlay(e) {
+		if (current === e.target) return;
+
+		for (const audioElement of audioElements) {
+			if (audioElement !== e.target) {
+				// console.log('pause');
+				audioElement.pause();
+				continue;
+			}
+			// console.log('connect');
+			current = audioElement;
+		}
+		try {
+			audio = context.createMediaElementSource(current);
+		} catch (e) {
+			//ignore DOMexception error, as the correct source will still be used,
+			// no easy way around arror (need to investigate)
+			console.log('failed to (re)connect MediaElementSource');
+		}
+	}
+
+	/**
+	 * put files in an array, so we can do array operations like splice. e.target.files is read-only
+	 * @param {Event} e
+	 */
+	function loadFiles(e) {
+		// @ts-expect-error - quick fix for: TS2339: Property 'files' does not exist on type 'Event'.
+		files = [...e.target.files];
+	}
+
+	/**
+	 * remove a file from the files array when we click the 'x'. If no more files,
+	 * show audio drop in again
+	 * @param {Number} index
+	 */
+	function removeFile(index) {
+		if (!files) return;
+		audioElements = [];
+
+		files.splice(index, 1);
+		files = files;
+		if (files.length === 0) {
+			files = [];
+			audioElements = [];
+		}
+	}
+</script>
+
+<div class="RNBOsubcomponent" {...rest}>
+	{#if files.length === 0}
+		<FileDropZone name="audio files" on:change={loadFiles} multiple accept="audio/*" />
+	{:else}
+		{#each files as file, i (file)}
+			<div
+				class="RNBOsection RNBOaudio"
+				in:receive={{ key: file }}
+				out:send={{ key: file }}
+				animate:flip={{ duration: 200 }}
+			>
+				<p class="RNBOtext">{file.name}</p>
+				<audio
+					src={URL.createObjectURL(file)}
+					bind:this={audioElements[i]}
+					onplay={onPlay}
+					controls
+				></audio>
+				<button
+					type="button"
+					class="RNBObtn RNBOclose"
+					onclick={() => removeFile(i)}
+					onkeydown={() => removeFile(i)}
+				>
+					x
+				</button>
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.RNBOclose {
+		position: absolute;
+		top: -0.5rem;
+		right: -0.5rem;
+		padding-top: 0.2rem;
+		padding-bottom: 0.2rem;
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+		cursor: pointer;
+		border-radius: var(--local-rounded-base);
+		border-style: none;
+		background-color: rgb(var(--local-accent-color));
+	}
+	.RNBOaudio {
+		position: relative;
+		display: inline-block;
+		padding: 0.5rem;
+		margin: 0.5rem;
+	}
+</style>

package/dist/RNBOcomponents/AudioDropIn.svelte.d.ts

@@ -0,0 +1,17 @@
+export default AudioDropIn;
+type AudioDropIn = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const AudioDropIn: import("svelte").Component<{
+    context: AudioContext;
+    audio: AudioNode | undefined;
+} & {
+    [key: string]: any;
+}, {}, "audio">;
+type Props = {
+    context: AudioContext;
+    audio: AudioNode | undefined;
+};

package/dist/RNBOcomponents/ExtMidiIn.svelte

@@ -0,0 +1,93 @@
+<script>
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+	/** @type {MIDIAccess|null|false} */
+	let midi = $state(null); // global MIDIAccess object
+	/**@type {MIDIInputMap|null} */
+	let inports = $state(null); // available MIDI inports
+
+	//TODO: choose port by name rather than index
+
+	
+	/** @type {MIDIInput|null} */
+	let inport = null;
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {number|null} [port]
+	 * @property {Uint8Array} midiMessage
+	 */
+
+	/** @type {Props} */
+	let { port = $bindable(null), midiMessage = $bindable() } = $props();
+
+	/**
+	 * set the midi access point and get the midi input port
+	 * @param {MIDIAccess} midiAccess
+	 */
+	function onMIDISuccess(midiAccess) {
+		midi = midiAccess;
+		inports = midi.inputs; // store in the global (in real usage, would probably keep in an object instance)
+		if (port) {
+			setPort();
+		}
+	}
+
+	/**
+	 * handle if external MIDI not available
+	 * @param {string} msg
+	 */
+	function onMIDIFailure(msg) {
+		console.error(`Failed to get MIDI access - ${msg}`);
+		midi = false;
+	}
+
+	/**
+	 * set the input port when selected
+	 */
+	function setPort() {
+		if (inports === null || port === null) return;
+
+		// @ts-ignore - ts getting their types wrong...
+		inport = [...inports][port];
+		console.log(
+			// @ts-ignore - because inports will always exist, since we use the #if block
+			'connecting to MIDI input port: %c' + inports.get(inport[0]).name,
+			'font-style:italic'
+		);
+		// @ts-ignore - see previous comment
+		inports.get(inport[0]).onmidimessage = onMIDIMessage;
+	}
+
+	/** @param {MIDIMessageEvent} event */
+	function onMIDIMessage(event) {
+		midiMessage = event.data;
+		console.log(
+			'MIDI message from %c' + event.target.name + ': ' + midiMessage,
+			'font-style:italic'
+		);
+	}
+
+	navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
+</script>
+
+<div class="RNBOsubcomponent">
+	<p class="RNBOtext">External MIDI inputs</p>
+
+	{#if midi && inports}
+		<!-- <slot {midi} {inports} {port}> -->
+		<RadioGroup>
+			{#each [...inports.entries()] as input, i}
+				<!-- first index of the input array is the id, second the object -->
+				<RadioItem bind:group={port} name="inports" value={i} on:change={setPort}
+					>{input[1].name}
+				</RadioItem>
+			{/each}
+		</RadioGroup>
+		<!-- </slot> -->
+	{:else if midi === false}
+		<p>MIDI access failed, please try in a different browser</p>
+	{:else}
+		<p>loading MIDI ports</p>
+	{/if}
+</div>

package/dist/RNBOcomponents/ExtMidiIn.svelte.d.ts

@@ -0,0 +1,13 @@
+export default ExtMidiIn;
+type ExtMidiIn = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ExtMidiIn: import("svelte").Component<{
+    port?: number | null;
+    midiMessage: Uint8Array;
+}, {}, "midiMessage" | "port">;
+type Props = {
+    port?: number | null;
+    midiMessage: Uint8Array;
+};

package/dist/RNBOcomponents/ExtMidiOut.svelte

@@ -0,0 +1,93 @@
+<script>
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+	/** @type {MIDIAccess|null|false} */
+	let midi = $state(null); // global MIDIAccess object
+	/**@type {MIDIInputMap|null} */
+	let outports = $state(null); // available MIDI outports
+
+	//TODO: choose port by name rather than index
+
+	
+	/** @type {MIDIInput|null} */
+	let outport = null;
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {number|null} [port]
+	 * @property {Uint8Array} midiMessage
+	 */
+
+	/** @type {Props} */
+	let { port = $bindable(null), midiMessage = $bindable() } = $props();
+
+	/**
+	 * set the midi access point and get the midi output port
+	 * @param {MIDIAccess} midiAccess
+	 */
+	function onMIDISuccess(midiAccess) {
+		midi = midiAccess;
+		outports = midi.outputs; // store in the global (in real usage, would probably keep in an object instance)
+		if (port) {
+			setPort();
+		}
+	}
+
+	/**
+	 * handle if external MIDI not available
+	 * @param {string} msg
+	 */
+	function onMIDIFailure(msg) {
+		console.error(`Failed to get MIDI access - ${msg}`);
+		midi = false;
+	}
+
+	/**
+	 * set the output port when selected
+	 */
+	function setPort() {
+		if (!outports || !port) return;
+
+		// @ts-ignore - ts getting their types wrong...
+		outport = [...outports][port];
+		console.log(
+			// @ts-ignore - because outports will always exist, since we use the #if block
+			'connecting to MIDI output port: %c' + outports.get(outport[0]).name,
+			'font-style:italic'
+		);
+		// @ts-ignore - see previous comment
+		outports.get(outport[0]).onmidimessage = onMIDIMessage;
+	}
+
+	/** @param {MIDIMessageEvent} event */
+	function onMIDIMessage(event) {
+		midiMessage = event.data;
+		console.log(
+			'MIDI message from %c' + event.target.name + ': ' + midiMessage,
+			'font-style:italic'
+		);
+	}
+
+	navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
+</script>
+
+<div class="RNBOsubcomponent">
+	<p class="RNBOtext">External MIDI outputs</p>
+
+	{#if midi && outports}
+		<!-- <slot {midi} {outports} {port}> -->
+		<RadioGroup>
+			{#each [...outports.entries()] as output, i}
+				<!-- first index of the output array is the id, second the object -->
+				<RadioItem bind:group={port} name="outports" value={i} on:change={setPort}
+					>{output[1].name}
+				</RadioItem>
+			{/each}
+		</RadioGroup>
+		<!-- </slot> -->
+	{:else if midi === false}
+		<p>MIDI access failed, please try in a different browser</p>
+	{:else}
+		<p>loading MIDI ports</p>
+	{/if}
+</div>

package/dist/RNBOcomponents/ExtMidiOut.svelte.d.ts

@@ -0,0 +1,13 @@
+export default ExtMidiOut;
+type ExtMidiOut = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ExtMidiOut: import("svelte").Component<{
+    port?: number | null;
+    midiMessage: Uint8Array;
+}, {}, "midiMessage" | "port">;
+type Props = {
+    port?: number | null;
+    midiMessage: Uint8Array;
+};

package/dist/RNBOcomponents/MicIn.svelte

@@ -0,0 +1,88 @@
+<script>
+	//TODO: create a nice way to visualise the average volume!
+	import { onDestroy } from 'svelte';
+	
+
+	/** @type {MediaStream|null} */
+	let stream = $state();
+	
+	/**
+	 * @typedef {Object} Props
+	 * @property {AudioContext} context
+	 * @property {AudioNode} audio
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let { context, audio = $bindable(), ...rest } = $props();
+
+	let volumeCallback = null;
+	/** @type {number|null} */
+	let averageVolume = $state(0);
+
+	/** @param {MediaStream} stream */
+	const handleSuccess = (stream) => {
+		const source = context.createMediaStreamSource(stream);
+		let analyser = context.createAnalyser();
+		analyser.fftSize = 512;
+		analyser.minDecibels = -127;
+		analyser.maxDecibels = 0;
+		analyser.smoothingTimeConstant = 0.4;
+		source.connect(analyser);
+		const volumes = new Uint8Array(analyser.frequencyBinCount);
+		//probe every 100ms for the average volume
+		volumeCallback = setInterval(() => {
+			analyser.getByteFrequencyData(volumes);
+			let volumeSum = 0;
+			for (const volume of volumes) volumeSum += volume;
+			averageVolume = volumeSum / volumes.length;
+			// console.log(`brightness-[${averageVolume / 100}]`);
+		}, 100);
+		source.connect(analyser);
+		audio = analyser;
+		// analyser.connect(device.node, inlet.index - 1);
+	};
+
+	async function connectMic() {
+		if (!stream) {
+			stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+			handleSuccess(stream);
+		} else {
+			disconnectMic();
+		}
+	}
+	function disconnectMic() {
+		if (!stream) return;
+		clearInterval(volumeCallback);
+		volumeCallback = null;
+		averageVolume = 0;
+		stream.getTracks().forEach((track) => track.stop());
+		stream = null;
+	}
+	onDestroy(disconnectMic);
+</script>
+
+<div class="RNBOsubcomponent RNBOalign" {...rest}>
+	<button onclick={connectMic} type="button" class="RNBObutton">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" class:RNBOfill={stream}>
+			<path
+				d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"
+			/>
+		</svg>
+	</button>
+	<p>{averageVolume}</p>
+</div>
+
+<style>
+	.RNBOfill {
+		fill: rgb(var(--local-accent-color));
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+	.RNBObutton {
+		width: 3rem;
+		border-style: none;
+		background-color: transparent;
+		transition: var(--local-animation) var(--local-animation-duration);
+		transition-timing-function: var(--local-animation-function);
+	}
+</style>

package/dist/RNBOcomponents/MicIn.svelte.d.ts

@@ -0,0 +1,17 @@
+export default MicIn;
+type MicIn = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const MicIn: import("svelte").Component<{
+    context: AudioContext;
+    audio: AudioNode;
+} & {
+    [key: string]: any;
+}, {}, "audio">;
+type Props = {
+    context: AudioContext;
+    audio: AudioNode;
+};

package/dist/RNBOcomponents/RNBOInlet.svelte

@@ -0,0 +1,66 @@
+<script>
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+	import AudioDropIn from './AudioDropIn.svelte';
+	import MicIn from './MicIn.svelte';
+
+	let context = device.context;
+
+	/** @typedef {object} inlet
+	 * @property {number} index - the port index
+	 * @property {string} tag - the tag
+	 * @property {'signal'} type - the type
+	 * @property {string} meta - the meta
+	 */
+
+	/** @type {AudioNode} */
+	let audio = $state();
+
+	/** @type {{default: 'default', mic: 'mic', dropIn: 'dropIn'}} */
+	let modes = { default: 'default', mic: 'mic', dropIn: 'dropIn' };
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {inlet} [inlet]
+	 * @property {'default'|'mic'|'dropIn'} [mode]
+	 * @property {import('svelte').Snippet<[any]>} [children]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let {
+		device,
+		inlet = { index: 1, tag: 'in1', type: 'signal', meta: 'something' },
+		mode = $bindable(modes.default),
+		children,
+		...rest
+	} = $props();
+	//set a defaultMode so the radio group only shows if no mode has been specified
+	/** @type {'default'|'mic'|'dropIn'} */
+	let defaultMode = mode;
+	//make sure the default mode is mic in the radio group
+	if (mode == modes.default) mode = modes.mic;
+
+	$effect(() => {
+		if (audio) {
+			audio.connect(device.node, inlet.index - 1);
+		}
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if children}{@render children({ context, audio })}{:else}
+		<div class="RNBOtag">{inlet.tag}</div>
+		{#if defaultMode === modes.default}
+			<RadioGroup>
+				<RadioItem bind:group={mode} name="Mic" value={modes.mic}>Mic</RadioItem>
+				<RadioItem bind:group={mode} name="DropIn" value={modes.dropIn}>Drop-in</RadioItem>
+			</RadioGroup>
+		{/if}
+		{#if mode === modes.dropIn}
+			<AudioDropIn class="RNBOsubcomponent" bind:audio {context} />
+		{:else}
+			<MicIn bind:audio {context} />
+		{/if}
+	{/if}
+</div>

package/dist/RNBOcomponents/RNBOInlet.svelte.d.ts

@@ -0,0 +1,55 @@
+export default RNBOInlet;
+type RNBOInlet = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const RNBOInlet: import("svelte").Component<{
+    device: import("@rnbo/js").Device;
+    inlet?: {
+        /**
+         * - the port index
+         */
+        index: number;
+        /**
+         * - the tag
+         */
+        tag: string;
+        /**
+         * - the type
+         */
+        type: "signal";
+        /**
+         * - the meta
+         */
+        meta: string;
+    };
+    mode?: "default" | "mic" | "dropIn";
+    children?: import("svelte").Snippet<[any]>;
+} & {
+    [key: string]: any;
+}, {}, "mode">;
+type Props = {
+    device: import("@rnbo/js").Device;
+    inlet?: {
+        /**
+         * - the port index
+         */
+        index: number;
+        /**
+         * - the tag
+         */
+        tag: string;
+        /**
+         * - the type
+         */
+        type: "signal";
+        /**
+         * - the meta
+         */
+        meta: string;
+    };
+    mode?: "default" | "mic" | "dropIn";
+    children?: import("svelte").Snippet<[any]>;
+};

package/dist/RNBOcomponents/RNBOInport.svelte

@@ -0,0 +1,21 @@
+<script>
+	import Controls from '../UIcomponents/Controls.svelte';
+	import rnbo from '@rnbo/js';
+	const { TimeNow, MessageEvent } = rnbo;
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} tag
+	 * @property {import ('@rnbo/js').Device} device
+	 */
+
+	/** @type {Props} */
+	let { tag, device } = $props();
+
+	const sendMessage = () => {
+		const messageEvent = new MessageEvent(TimeNow, tag);
+		device.scheduleEvent(messageEvent);
+	};
+</script>
+
+<Controls {tag} {sendMessage} />

package/dist/RNBOcomponents/RNBOInport.svelte.d.ts

@@ -0,0 +1,13 @@
+export default RNBOInport;
+type RNBOInport = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const RNBOInport: import("svelte").Component<{
+    tag: string;
+    device: import("@rnbo/js").Device;
+}, {}, "">;
+type Props = {
+    tag: string;
+    device: import("@rnbo/js").Device;
+};

package/dist/RNBOcomponents/RNBOMidiIn.svelte

@@ -0,0 +1,63 @@
+<script>
+	import rnbo from '@rnbo/js';
+	const { MIDIEvent, TimeNow } = rnbo;
+	import XyMidiIn from './XYMidiIn.svelte';
+	import ExtMidiIn from './ExtMidiIn.svelte';
+	import RadioGroup from '../UIcomponents/RadioGroup.svelte';
+	import RadioItem from '../UIcomponents/RadioItem.svelte';
+
+	/** @type {{default: 'default', xy: 'xy', external: 'external'}} */
+	let modes = { default: 'default', xy: 'xy', external: 'external' };
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {number} [port] - type {number} - the MIDI port index
+	 * @property {import ('@rnbo/js').Device} device
+	 * @property {import('@rnbo/js').MIDIData|undefined} [midiMessage]
+	 * @property {number|undefined} [midiChannel]
+	 * @property {'default'|'xy'|'external'} [mode]
+	 * @property {import('svelte').Snippet<[any]>} [children]
+	 */
+
+	/** @type {Props & { [key: string]: any }} */
+	let {
+		port = 0,
+		device,
+		midiMessage = $bindable(undefined),
+		midiChannel = 0,
+		mode = $bindable(modes.default),
+		children,
+		...rest
+	} = $props();
+
+	//set a defaultMode so the radio group only shows if no mode has been specified
+	/** @type {'default'|'xy'|'external'} */
+	let defaultMode = mode;
+	//make sure the default mode is mic in the radio group
+	if (mode == modes.default) mode = modes.xy;
+
+	$effect(() => {
+		if (midiMessage && midiMessage.length > 0) {
+			console.log('from MidiIn', midiMessage);
+			device.scheduleEvent(new MIDIEvent(TimeNow, port, midiMessage));
+		}
+	});
+</script>
+
+<div class="RNBOcomponent RNBOsection" {...rest}>
+	{#if children}{@render children({ midiChannel })}{:else}
+		<div class="RNBOtag">in {port}</div>
+		{#if defaultMode === modes.default}
+			<RadioGroup>
+				<RadioItem bind:group={mode} name="xy" value={modes.xy}>XY-pad</RadioItem>
+				<RadioItem bind:group={mode} name="external" value={modes.external}>ext. MIDI</RadioItem>
+			</RadioGroup>
+		{/if}
+
+		{#if mode === modes.external}
+			<ExtMidiIn bind:midiMessage {midiChannel} />
+		{:else}
+			<XyMidiIn bind:midiMessage {midiChannel} />
+		{/if}
+	{/if}
+</div>