fragment-tools 0.1.0

package/src/client/app/lib/tempo/Analyser.js

@@ -0,0 +1,165 @@
+import Range from "./Range.js";
+
+const defaultRanges = [0.125, 0.125, 0.125, 0.125, 0.125, 0.125, 0.125, 0.125];
+
+class Analyser {
+
+	/**
+	 * @param {Object} params
+	 * @param {AudioContext} [params.context]
+	 * @param {Number[]} [params.ranges]
+	 * @param {Number} [params.smoothingTimeConstant = 0.3]
+	 * @param {Number} [params.fftSize=512]
+	 */
+	constructor({
+		context = new AudioContext(),
+		ranges = defaultRanges,
+		smoothingTimeConstant = 0.3,
+		fftSize = 512,
+	} = []) {
+		this.context = context;
+
+		this.ranges = [];
+		
+		this._analyser = this.context.createAnalyser()
+		this._analyser.smoothingTimeConstant = smoothingTimeConstant;
+        this._analyser.fftSize = fftSize;
+
+		this.master = this.context.createGain();
+		this.master.connect(this._analyser);
+
+		const { frequencyBinCount } = this._analyser;
+
+		this.frequencyBinCount = frequencyBinCount;
+        this.freqByteData = new Uint8Array(frequencyBinCount);
+        this.timeByteData = new Uint8Array(frequencyBinCount);
+
+		this.setRanges(ranges);
+	}
+
+	/**
+	 * Set the weight of the ranges used for the analysis
+	 * @param {Number[]} [ranges] 
+	 */
+	setRanges(ranges = defaultRanges) {
+		if (this.ranges.length > 0) {
+			for (let i = 0; i < this.ranges.length; i++) {
+				this.ranges[i].dispose();
+				this.ranges[i] = null;
+			}
+
+			this.ranges = [];
+		}
+
+		this.rangeCount = ranges.length;
+
+		const sum = ranges.reduce((total, v) => {
+			return total + v;
+		}, 0);
+
+		if (sum > 0 && sum !== 1) {
+			console.error(`Tempo.Analyser :: sum of ranges is not equal to 1.`);
+			return;
+		}
+
+		let start = 0;
+		let end = this.frequencyBinCount;
+
+		for (let i = 0; i < ranges.length; i++) {
+			const step = ranges[i] * end;
+
+			const range = new Range(start, start + step);
+
+			this.ranges.push(range);
+
+			start += step;
+		}
+
+		// global
+		this.ranges.push(new Range(0, end));
+	}
+
+	/**
+	 * Run the analysis of the current source
+	 * @param {Number} deltaTime - Time elapsed since last call in milliseconds
+	 */
+	update(deltaTime) {
+		this._analyser.getByteFrequencyData(this.freqByteData);
+
+        for (let i = 0; i < this.ranges.length; i++) {
+            this.ranges[i].update(deltaTime, this.freqByteData);
+        }
+	}
+
+	/**
+	 * Disconnect the current source of the analyser
+	 */
+	disconnect() {
+		this.source.disconnect(this.master);
+	}
+
+	/**
+	 * Connect a MediaStream to the analyser
+	 * @param {MediaStream} stream 
+	 */
+	connectMediaStream(stream) {
+		if (this.source) {
+			this.disconnect();
+		}
+
+		this.source = this.context.createMediaStreamSource(stream);
+        this.source.connect(this.master);
+	}
+
+	/**
+	 * Connect a HTMLMediaElement to the analyser
+	 * @param {MediaElement} audio 
+	 */
+	connectMediaElement(element) {
+		if (this.source) {
+			this.disconnect();
+		}
+
+		this.source = this.context.createMediaElementSource(element)
+        this.source.connect(this.master);
+	}
+
+	getRange(index) {
+		if (index >= this.rangeCount) {
+			console.log(`Range ${index} is not available. RangeCount: ${this.rangeCount}`);
+			return;
+		}
+
+		return this.ranges[index];
+	}
+
+	getMaster() {
+		return this.ranges[this.rangeCount];
+	}
+
+	dispose() {
+		if (this.source) {
+			this.disconnect();
+			this.source = null;
+		}
+
+		for (let i = 0; i < this.ranges.length; i++) {
+			this.ranges[i].dispose();
+			this.ranges[i] = null;
+		}
+
+		this.ranges = null;
+
+		this.master.disconnect(this._analyser);
+		this.master = null;
+		this._analyser = null;
+
+		this.timeByteData = null;
+		this.freqByteData = null;
+		this.rangeCount = null;
+		this.frequencyBinCount = null;
+		this.context = null;
+	}
+}
+
+export default Analyser;

package/src/client/app/lib/tempo/Range.js

@@ -0,0 +1,97 @@
+class Range {
+
+	constructor(start, end) {
+		this.start = start;
+		this.end = end;
+
+		this.BEAT_HOLD_TIME = 300; // between 0 and 1000
+		this.BEAT_DECAY_RATE = 0.992; // between  0 and 1
+        this.BEAT_MIN = 0.1; // between 0 and 1
+
+		this._volume = 0;
+		this.beatCutOff = 0;
+		this.beatTime = 0;
+
+		this.listeners = [];
+	}
+
+	get volume() {
+		return this._volume;
+	}
+
+	get decay() {
+		return (this.BEAT_DECAY_RATE - 0.95) / 0.0499;
+	}
+
+	set decay(value) {
+		this.BEAT_DECAY_RATE = 0.95 + value * 0.0499;
+	}
+
+	get min() {
+		return this.BEAT_MIN;
+	}
+
+	set min(value) {
+		this.BEAT_MIN = value;
+	}
+
+	get hold() {
+		return this.BEAT_HOLD_TIME / 1000;
+	}
+
+	set hold(value) {
+		this.BEAT_HOLD_TIME = value * 1000;
+	}
+
+	onBeat(listener) {
+		this.listeners.push(listener);
+
+		return () => {
+			const index = this.listeners.indexOf(listener);
+
+			this.listeners.splice(index, 1);
+		}
+	}
+
+	update(deltaTime, freqByteData) {
+        this._volume = 0;
+
+        for (let i = this.start; i < this.end; i++) {
+			this._volume += freqByteData[i];
+        }
+
+        this._volume /= (this.end - this.start) * 256;
+
+        // detect beat
+        if (this.beatTime >= this.BEAT_HOLD_TIME && this._volume > this.beatCutOff && this._volume > this.BEAT_MIN) {
+			for (let i = 0; i < this.listeners.length; i++) {
+				this.listeners[i]();
+			}	
+
+			this.beatCutOff = this._volume * 1.15;
+			this.beatTime = 0;
+		} else {
+			if (this.beatTime <= this.BEAT_HOLD_TIME) {
+				this.beatTime += deltaTime * 1000;
+			} else {
+				this.beatCutOff *= this.BEAT_DECAY_RATE;
+				this.beatCutOff = Math.max(this.beatCutOff, this.BEAT_MIN);
+			}
+		}
+    }
+
+	dispose() {
+		this.start = null;
+		this.end = null;
+
+		this.BEAT_HOLD_TIME = null;
+		this.BEAT_DECAY_RATE = null;
+        this.BEAT_MIN = null;
+
+		this._volume = null;
+		this.beatCutOff = null;
+		this.beatTime = null;
+	}
+}
+
+export default Range;

package/src/client/app/lib/tempo/index.js

@@ -0,0 +1,138 @@
+import Analyser from "./Analyser.js";
+
+class Tempo {
+
+	constructor({
+		context = new AudioContext(),
+		ranges,
+		autoUpdate = true,
+	} = {}) {
+		this.context = context;
+		this.autoUpdate = autoUpdate;
+		this.analyser = new Analyser({
+			context: this.context,
+			ranges,
+		});
+
+		this.running = false;
+
+		this.listeners = [];
+
+		document.addEventListener("touchend", unlock, true);
+		document.addEventListener("mousedown", unlock, true);
+		document.addEventListener("click", unlock, true);
+
+		document.addEventListener("touchend", unlock, true);
+		document.addEventListener("mousedown", unlock, true);
+		document.addEventListener("click", unlock, true);
+
+		function unlock() {
+			if (context.state === "suspended" || context.state === "interrupted") {
+				context.resume();
+
+				document.removeEventListener("touchend", unlock, true);
+				document.removeEventListener("mousedown", unlock, true);
+				document.removeEventListener("click", unlock, true);
+			}
+
+			return;
+
+			// if (typeof context.resume === "function") {
+			// 	return context.resume().then(startFakeBuffer);
+			// }
+		}
+	}
+
+	onUpdate(listener) {
+		this.listeners.push(listener);
+
+		return () => {
+			this.listeners.splice(this.listeners.indexOf(listener), 1);
+		};
+	}
+
+	get master() {
+		return this.analyser.getMaster();
+	}
+
+	getRange(index) {
+		return this.analyser.getRange(index);
+	}
+
+	getRanges() {
+		const rangesWithoutMaster = [...this.analyser.ranges]
+		rangesWithoutMaster.splice(this.analyser.ranges.length - 1, 1);
+
+		return rangesWithoutMaster;
+	}
+
+	setRanges(ranges) {
+		this.analyser.setRanges(ranges);
+	}
+
+	update(deltaTime) {
+		this.analyser.update(deltaTime);
+
+		for (let i = 0; i < this.listeners.length; i++) {
+			this.listeners[i]();
+		}
+	}
+
+	listen() {
+		navigator.getUserMedia({
+			audio: true,
+			video: false
+		}, (stream) => {
+			this.analyser.connectMediaStream(stream);
+
+			if (this.autoUpdate) {
+				this.start();
+			}
+		}, (error) => {
+			console.error(`Tempo :: cannot access microphone. Make sure to allow usage of the microphone.`);
+		});
+	}
+
+	start() {
+		this.running = true;
+
+		let lastTime = performance.now();
+
+		const run = (time = 0) => {
+			let dt = time - lastTime;
+			lastTime = time;
+
+			this.update(dt);
+			this._raf = requestAnimationFrame(run);
+		};
+
+		run();
+	}
+
+	stop() {
+		if (this._raf) {
+			cancelAnimationFrame(this._raf);
+			this._raf = null;
+		}
+
+		this.running = false;
+	}
+
+	dispose() {
+		if (this.running) {
+			this.stop();
+		}
+
+		this.analyser.dispose();
+		this.analyser = null;
+
+		this.context.close();
+		this.context = null;
+		this.running = null;
+
+		console.log("Tempo :: dispose", this);
+	}
+
+}
+
+export default Tempo;

package/src/client/app/modules/AudioAnalyser/Range.svelte

@@ -0,0 +1,93 @@
+<script>
+import { onDestroy, onMount } from "svelte";
+
+import { audioAnalysis } from "../../stores/audioAnalysis";
+
+
+
+export let rowCount = 10;
+export let index;
+
+let rows = Array(rowCount).fill({ node: null });
+let range = audioAnalysis.getRange(index);
+
+let offUpdate;
+
+onMount(() => {
+	offUpdate = audioAnalysis.onUpdate(() => {
+		const { volume } = range;
+		const count = rowCount * volume;
+
+		const full = Math.floor(count);
+		const temp = count - full;
+
+		for(let i = rows.length - 1; i >= 0; i--) {
+			const index = rows.length - i;
+			const node = rows[i];
+
+			if (index < full) {
+				node.style.setProperty('--opacity', 1);
+			} else {
+				node.style.setProperty('--opacity', 0);
+			}
+		}
+	});
+});
+
+onDestroy(() => {
+	if (offUpdate) {
+		offUpdate();
+		offUpdate = null;
+	}
+});
+
+</script>
+
+<div class="range" style={`grid-template-rows: repeat(${rows.length}, 1fr)`}>
+	{#each rows as row, i }
+		<div class="row" bind:this={rows[i]}></div>
+	{/each}
+</div>
+
+<style>
+.range {
+	position: relative;
+
+	display: grid;
+	row-gap: 2px;
+	padding: 3px 0;
+}
+
+.range:not(:last-child):after {
+	content: '';
+
+	position: absolute;
+	top: 0;
+	right: -2px;
+	bottom: 0;
+	width: 1px;
+
+	background-color: var(--color-border-input);
+}
+
+.row {
+	position: relative;
+	background: rgba(0, 0, 0, 0.3);
+	border-radius: 2px;
+}
+
+.row:before {
+	content: "";
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	
+	width: 100%;
+	height: 100%;
+	
+	background-color: var(--color-active);
+	opacity: var(--opacity, 0);
+	border-radius: 2px;
+}
+</style>

package/src/client/app/modules/AudioAnalyser/Spectrum.svelte

@@ -0,0 +1,31 @@
+<script>
+import Range from "./Range.svelte";
+import { audioAnalysis } from "../../stores/audioAnalysis";
+
+$: ranges = audioAnalysis.getRanges();
+
+</script>
+
+<div class="spectrum" style={`grid-template-columns: repeat(${ranges.length}, 1fr)`}>
+	{#each ranges as r, rangeIndex }
+		<Range rowCount={12} index={rangeIndex} />
+	{/each}
+</div>
+
+<style>
+.spectrum {
+	position: relative;
+
+	display: grid;
+	column-gap: 3px;
+	width: 100%;
+	aspect-ratio: 3 / 1;
+	grid-template-columns: repeat(10, 1fr);
+	padding: 0 3px;
+
+	border-radius: var(--border-radius-input);
+    background-color: var(--color-background-input);
+    box-shadow: inset 0 0 0 1px var(--color-border-input);
+}
+
+</style>

package/src/client/app/modules/AudioAnalyser.svelte

@@ -0,0 +1,70 @@
+<script>
+import Field from "../ui/Field.svelte";
+import FieldGroup from "../ui/FieldGroup.svelte";
+import Module from "../ui/Module.svelte";
+import Spectrum from "./AudioAnalyser/Spectrum.svelte";
+import { audioAnalysis } from "../stores/audioAnalysis.js";
+import { onDestroy, onMount } from "svelte";
+
+onMount(() => {
+	audioAnalysis.listen();
+});
+
+onDestroy(() => {
+	audioAnalysis.stop();
+})
+
+
+function handleChangeDecay(event) {
+	audioAnalysis.master.decay = event.detail;
+}
+
+function handleChangeHold(event) {
+	audioAnalysis.master.hold = event.detail;
+}
+
+function handleChangeMin(event) {
+	audioAnalysis.master.min = event.detail;
+}
+
+</script>
+
+<Module name="Audio Analyser">
+	<Field
+		key="source"
+		value="microphone"
+		params={{ options: ["microphone", "audioplayer"]}}
+	/>
+	<Field key="spectrum">
+		<Spectrum />
+	</Field>
+	<FieldGroup name="global">
+		<Field key="decay" value={audioAnalysis.master.decay} params={{min: 0, max: 1, step: 0.01}} on:change={handleChangeDecay}/>
+		<Field key="hold" value={audioAnalysis.master.hold} params={{min: 0, max: 1, step: 0.01}} on:change={handleChangeHold}/>
+		<Field key="min" value={audioAnalysis.master.min} params={{min: 0, max: 1, step: 0.01}} on:change={handleChangeMin}/>
+	</FieldGroup>
+	{#if audioAnalysis.getRanges().length > 0}
+		{#each audioAnalysis.getRanges() as range, rangeIndex }
+			<FieldGroup name={`range ${range.start}-${range.end}`} collapsed key={rangeIndex}>
+				<Field
+					key="decay"
+					value={range.decay}
+					params={{min: 0, max: 1, step: 0.01}}
+					on:change={(e) => range.decay = e.detail}
+				/>
+				<Field
+					key="hold"
+					value={range.hold}
+					params={{min: 0, max: 1, step: 0.01}}
+					on:change={(e) => range.hold = e.detail}
+				/>
+				<Field
+					key="min"
+					value={range.min}
+					params={{min: 0, max: 1, step: 0.01}}
+					on:change={(e) => range.min = e.detail}
+				/>
+			</FieldGroup>
+		{/each}
+	{/if}
+</Module>