Svelte
Install
Install the package
npm install @transcribe/transcriber
Cross-Origin Headers
The wasm files must be served with the correct Cross-Origin headers. Otherwise browsers will refuse to load the files.
For the development and preview server the headers are added in vite.config.ts
.
// vite.config.ts
// ...
export default defineConfig({
// ...
server: {
headers: {
"Cross-Origin-Embedder-Policy": "require-corp",
"Cross-Origin-Opener-Policy": "same-origin",
},
},
preview: {
headers: {
"Cross-Origin-Embedder-Policy": "require-corp",
"Cross-Origin-Opener-Policy": "same-origin",
},
},
});
Import/Bundle
Exclude the @transcribe/shout
package from dependency optimization and set worker.format: "es"
.
// vite.config.ts
// ...
export default defineConfig({
// ...
optimizeDeps: {
exclude: ["@transcribe/shout"],
},
worker: {
format: "es",
},
});
Usage
Now you can use Transcribe.js in your Svelte components
<script lang="ts">
import { onMount } from "svelte";
import createModule from "@transcribe/shout";
import { FileTranscriber } from "@transcribe/transcriber";
let transcriber: FileTranscriber;
async function transcribe() {
// check if transcriber is initialized
if (!transcriber?.isReady) return;
// there must be at least one user interaction (e.g click) before you can call this function
const result = await transcriber.transcribe("/audio.wav");
// do something with the result json
this.result = result.transcription.map((t) => t.text).join(" ");
}
onMount(async () => {
// create new instance
transcriber = new FileTranscriber({
createModule,
model: "/ggml-tiny-q5_1.bin",
});
// and initialize the transcriber
await transcriber.init();
});
</script>