BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sample loading logic

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-16 21:35:58 +01:00
parent 9bab06ad2a
commit 13360faf0c
4 changed files with 169 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -382,15 +382,9 @@
<label class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<input id="upload-samples" type="file" class="hidden" multiple>
<input id="upload-samples" type="file" class="hidden" accept="file" webkitdirectory directory multiple>
<span class="text-selection_foreground">Import samples</span>
</label>
<!--
<input id="upload-samples" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span class="text-selection_foreground">Upload audio samples</span>
</input>
-->
</div>
</div>
</div>

148
src/IO/SampleLoading.ts
View File

@ -0,0 +1,148 @@
// @ts-ignore
import { registerSound, onTriggerSample } from "superdough";
export const isAudioFile = (filename: string) => ['wav', 'mp3'].includes(filename.split('.').slice(-1)[0]);
interface samplesDBConfig {
dbName: string,
table: string,
columns: string[],
version: number
}
export const samplesDBConfig = {
dbName: 'samples',
table: 'usersamples',
columns: ['data_url', 'title'],
version: 1
}
async function bufferToDataUrl(buf: Buffer) {
return new Promise((resolve) => {
var blob = new Blob([buf], { type: 'application/octet-binary' });
var reader = new FileReader();
reader.onload = function (event: Event) {
// @ts-ignore
resolve(event.target.result);
};
reader.readAsDataURL(blob);
});
}
const processFilesForIDB = async (files: FileList) => {
return await Promise.all(
Array.from(files)
.map(async (s: File) => {
const title = s.name;
if (!isAudioFile(title)) {
return;
}
//create obscured url to file system that can be fetched
const sUrl = URL.createObjectURL(s);
//fetch the sound and turn it into a buffer array
const buf = await fetch(sUrl).then((res) => res.arrayBuffer());
//create a url blob containing all of the buffer data
// @ts-ignore
// TODO: conversion to do here, remove ts-ignore
const base64 = await bufferToDataUrl(buf);
return {
title,
blob: base64,
id: s.webkitRelativePath,
};
})
.filter(Boolean),
).catch((error) => {
console.log('Something went wrong while processing uploaded files', error);
});
};
export const registerSamplesFromDB = (config: samplesDBConfig, onComplete = () => {}) => {
openDB(config, (objectStore: IDBObjectStore) => {
let query = objectStore.getAll();
query.onsuccess = (event: Event) => {
// @ts-ignore
const soundFiles = event.target.result;
if (!soundFiles?.length) {
return;
}
const sounds = new Map();
[...soundFiles]
.sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true, sensitivity: 'base' }))
.forEach((soundFile) => {
const title = soundFile.title;
if (!isAudioFile(title)) {
return;
}
const splitRelativePath = soundFile.id?.split('/');
const parentDirectory = splitRelativePath[splitRelativePath.length - 2];
const soundPath = soundFile.blob;
const soundPaths = sounds.get(parentDirectory) ?? new Set();
soundPaths.add(soundPath);
sounds.set(parentDirectory, soundPaths);
});
sounds.forEach((soundPaths, key) => {
const value = Array.from(soundPaths);
// @ts-ignore
registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
type: 'sample',
samples: value,
baseUrl: undefined,
prebake: false,
tag: "user",
});
});
onComplete();
};
});
};
export const openDB = (config: samplesDBConfig, onOpened: Function) => {
const { dbName, version, table, columns } = config
if (!('indexedDB' in window)) {
console.log('This browser doesn\'t support IndexedDB')
return
}
const dbOpen = indexedDB.open(dbName, version);
dbOpen.onupgradeneeded = (_event) => {
const db = dbOpen.result;
const objectStore = db.createObjectStore(table, { keyPath: 'id', autoIncrement: false });
columns.forEach((c: any) => {
objectStore.createIndex(c, c, { unique: false });
});
};
dbOpen.onerror = function (err: Event) {
console.log('Error opening DB: ', (err.target as IDBOpenDBRequest).error);
}
dbOpen.onsuccess = function (_event: Event) {
const db = dbOpen.result;
db.onversionchange = function() {
db.close();
alert("Database is outdated, please reload the page.")
};
const writeTransaction = db.transaction([table], 'readwrite'),
objectStore = writeTransaction.objectStore(table);
// Writing in the database here!
onOpened(objectStore)
}
}
export const uploadSamplesToDB = async (config: samplesDBConfig, files: FileList) => {
await processFilesForIDB(files).then((files) => {
const onOpened = (objectStore: IDBObjectStore, _db: IDBDatabase) => {
// @ts-ignore
files.forEach((file: File) => {
if (file == null) {
return;
}
objectStore.put(file);
});
};
openDB(config, onOpened);
});
};

15
src/InterfaceLogic.ts
View File

@ -25,6 +25,7 @@ import { lineNumbers } from "@codemirror/view";
import { jsCompletions } from "./EditorSetup";
import { createDocumentationStyle } from "./DomElements";
import { saveState } from "./WindowBehavior";
import { registerSamplesFromDB, samplesDBConfig, uploadSamplesToDB } from "./IO/SampleLoading";
export const installInterfaceLogic = (app: Editor) => {
// Initialize style
@ -159,8 +160,16 @@ export const installInterfaceLogic = (app: Editor) => {
);
});
app.interface.upload_samples_button.addEventListener("click", () => {
console.log("Uploading audio samples!")
app.interface.upload_samples_button.addEventListener("input", async (event) => {
console.log("Il se passe quelque chose")
let fileInput = event.target as HTMLInputElement;
if (!fileInput.files?.length) {
return;
}
console.log(fileInput.files)
await uploadSamplesToDB(samplesDBConfig, fileInput.files).then(() => {
registerSamplesFromDB(samplesDBConfig, () => {});
});
});
app.interface.upload_universe_button.addEventListener("click", () => {
@ -586,4 +595,4 @@ export const installInterfaceLogic = (app: Editor) => {
console.log("Could not find element " + name);
}
});
};
};

8
src/documentation/learning/samples/sample_list.ts
View File

@ -148,5 +148,13 @@ This sample pack is only one folder full of french phonems! It sounds super nice
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "Juliette")}
</div>
## Your samples
These samples are the one you have loaded for the duration of the session using the <ic>Import Samples</ic> button in the configuration menu.
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
${samples_to_markdown(application, "user")}
</div>
`;
};