fragment-tools 0.1.13 → 0.1.15

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

@@ -1,9 +1,8 @@
-import Range from "./Range.js";
+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]
@@ -20,10 +19,10 @@ class Analyser {
 		this.context = context;
 
 		this.ranges = [];
-		
-		this._analyser = this.context.createAnalyser()
+
+		this._analyser = this.context.createAnalyser();
 		this._analyser.smoothingTimeConstant = smoothingTimeConstant;
-        this._analyser.fftSize = fftSize;
+		this._analyser.fftSize = fftSize;
 
 		this.master = this.context.createGain();
 		this.master.connect(this._analyser);
@@ -31,15 +30,15 @@ class Analyser {
 		const { frequencyBinCount } = this._analyser;
 
 		this.frequencyBinCount = frequencyBinCount;
-        this.freqByteData = new Uint8Array(frequencyBinCount);
-        this.timeByteData = new Uint8Array(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] 
+	 * @param {Number[]} [ranges]
 	 */
 	setRanges(ranges = defaultRanges) {
 		if (this.ranges.length > 0) {
@@ -86,9 +85,9 @@ class Analyser {
 	update(deltaTime) {
 		this._analyser.getByteFrequencyData(this.freqByteData);
 
-        for (let i = 0; i < this.ranges.length; i++) {
-            this.ranges[i].update(deltaTime, this.freqByteData);
-        }
+		for (let i = 0; i < this.ranges.length; i++) {
+			this.ranges[i].update(deltaTime, this.freqByteData);
+		}
 	}
 
 	/**
@@ -100,7 +99,7 @@ class Analyser {
 
 	/**
 	 * Connect a MediaStream to the analyser
-	 * @param {MediaStream} stream 
+	 * @param {MediaStream} stream
 	 */
 	connectMediaStream(stream) {
 		if (this.source) {
@@ -108,25 +107,27 @@ class Analyser {
 		}
 
 		this.source = this.context.createMediaStreamSource(stream);
-        this.source.connect(this.master);
+		this.source.connect(this.master);
 	}
 
 	/**
 	 * Connect a HTMLMediaElement to the analyser
-	 * @param {MediaElement} audio 
+	 * @param {MediaElement} audio
 	 */
 	connectMediaElement(element) {
 		if (this.source) {
 			this.disconnect();
 		}
 
-		this.source = this.context.createMediaElementSource(element)
-        this.source.connect(this.master);
+		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}`);
+			console.log(
+				`Range ${index} is not available. RangeCount: ${this.rangeCount}`,
+			);
 			return;
 		}
 

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

@@ -1,12 +1,11 @@
 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.BEAT_MIN = 0.1; // between 0 and 1
 
 		this._volume = 0;
 		this.beatCutOff = 0;
@@ -50,23 +49,27 @@ class Range {
 			const index = this.listeners.indexOf(listener);
 
 			this.listeners.splice(index, 1);
-		}
+		};
 	}
 
 	update(deltaTime, freqByteData) {
-        this._volume = 0;
+		this._volume = 0;
 
-        for (let i = this.start; i < this.end; i++) {
+		for (let i = this.start; i < this.end; i++) {
 			this._volume += freqByteData[i];
-        }
+		}
 
-        this._volume /= (this.end - this.start) * 256;
+		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) {
+		// 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;
@@ -78,7 +81,7 @@ class Range {
 				this.beatCutOff = Math.max(this.beatCutOff, this.BEAT_MIN);
 			}
 		}
-    }
+	}
 
 	dispose() {
 		this.start = null;
@@ -86,7 +89,7 @@ class Range {
 
 		this.BEAT_HOLD_TIME = null;
 		this.BEAT_DECAY_RATE = null;
-        this.BEAT_MIN = null;
+		this.BEAT_MIN = null;
 
 		this._volume = null;
 		this.beatCutOff = null;

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

@@ -1,7 +1,6 @@
-import Analyser from "./Analyser.js";
+import Analyser from './Analyser.js';
 
 class Tempo {
-
 	constructor({
 		context = new AudioContext(),
 		ranges,
@@ -18,21 +17,24 @@ class Tempo {
 
 		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);
 
-		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") {
+			if (
+				context.state === 'suspended' ||
+				context.state === 'interrupted'
+			) {
 				context.resume();
 
-				document.removeEventListener("touchend", unlock, true);
-				document.removeEventListener("mousedown", unlock, true);
-				document.removeEventListener("click", unlock, true);
+				document.removeEventListener('touchend', unlock, true);
+				document.removeEventListener('mousedown', unlock, true);
+				document.removeEventListener('click', unlock, true);
 			}
 
 			return;
@@ -60,7 +62,7 @@ class Tempo {
 	}
 
 	getRanges() {
-		const rangesWithoutMaster = [...this.analyser.ranges]
+		const rangesWithoutMaster = [...this.analyser.ranges];
 		rangesWithoutMaster.splice(this.analyser.ranges.length - 1, 1);
 
 		return rangesWithoutMaster;
@@ -79,18 +81,24 @@ class Tempo {
 	}
 
 	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.`);
-		});
+		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() {
@@ -130,9 +138,8 @@ class Tempo {
 		this.context = null;
 		this.running = null;
 
-		console.log("Tempo :: dispose", this);
+		console.log('Tempo :: dispose', this);
 	}
-
 }
 
 export default Tempo;

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

@@ -1,93 +1,90 @@
 <script>
-import { onDestroy, onMount } from "svelte";
+	import { onDestroy, onMount } from 'svelte';
 
-import { audioAnalysis } from "../../stores/audioAnalysis";
+	import { audioAnalysis } from '../../stores/audioAnalysis';
 
+	export let rowCount = 10;
+	export let index;
 
+	let rows = Array(rowCount).fill({ node: null });
+	let range = audioAnalysis.getRange(index);
 
-export let rowCount = 10;
-export let index;
+	let offUpdate;
 
-let rows = Array(rowCount).fill({ node: null });
-let range = audioAnalysis.getRange(index);
+	onMount(() => {
+		offUpdate = audioAnalysis.onUpdate(() => {
+			const { volume } = range;
+			const count = rowCount * volume;
 
-let offUpdate;
+			const full = Math.floor(count);
+			const temp = count - full;
 
-onMount(() => {
-	offUpdate = audioAnalysis.onUpdate(() => {
-		const { volume } = range;
-		const count = rowCount * volume;
+			for (let i = rows.length - 1; i >= 0; i--) {
+				const index = rows.length - i;
+				const node = rows[i];
 
-		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);
+				if (index < full) {
+					node.style.setProperty('--opacity', 1);
+				} else {
+					node.style.setProperty('--opacity', 0);
+				}
 			}
-		}
+		});
 	});
-});
-
-onDestroy(() => {
-	if (offUpdate) {
-		offUpdate();
-		offUpdate = null;
-	}
-});
 
+	onDestroy(() => {
+		if (offUpdate) {
+			offUpdate();
+			offUpdate = null;
+		}
+	});
 </script>
 
 <div class="range" style={`grid-template-rows: repeat(${rows.length}, 1fr)`}>
-	{#each rows as row, i }
+	{#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;
-}
+	.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

@@ -1,31 +1,32 @@
 <script>
-import Range from "./Range.svelte";
-import { audioAnalysis } from "../../stores/audioAnalysis";
-
-$: ranges = audioAnalysis.getRanges();
+	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 }
+<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;
+	.spectrum {
+		position: relative;
 
-	border-radius: var(--border-radius-input);
-    background-color: var(--color-background-input);
-    box-shadow: inset 0 0 0 1px var(--color-border-input);
-}
+		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

@@ -1,68 +1,85 @@
 <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";
+	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();
-});
+	onMount(() => {
+		audioAnalysis.listen();
+	});
 
-onDestroy(() => {
-	audioAnalysis.stop();
-})
+	onDestroy(() => {
+		audioAnalysis.stop();
+	});
 
+	function handleChangeDecay(event) {
+		audioAnalysis.master.decay = event.detail;
+	}
 
-function handleChangeDecay(event) {
-	audioAnalysis.master.decay = event.detail;
-}
-
-function handleChangeHold(event) {
-	audioAnalysis.master.hold = event.detail;
-}
-
-function handleChangeMin(event) {
-	audioAnalysis.master.min = 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"]}}
+		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}/>
+		<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}>
+		{#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}
+					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}
+					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}
+					params={{ min: 0, max: 1, step: 0.01 }}
+					on:change={(e) => (range.min = e.detail)}
 				/>
 			</FieldGroup>
 		{/each}