Transcribe.js 2.0.3

Edit on GitHub

Svelte

Full Working Example

Install

Install the package

npm install @transcribe/transcriber

and copy the files from @transcribe/shout to /public

cp -r node_modules/@transcribe/shout/src/shout/* public/

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

Rollup is not able to bundle shout.wasm.js. To work around this we include an importmap in index.html that loads the module

<!-- index.html -->
<head>
  <!-- ... -->
  <script type="importmap">
    {
      "imports": {
        "@transcribe/shout": "/shout.wasm.js"
      }
    }
  </script>
  <!-- ... -->
</head>

and exclude the package from the bundler

// vite.config.ts

// ...

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      external: ["@transcribe/shout"],
    },
  },
});

Usage

Now you can use Transcribe.js in your Svelte components

<script lang="ts">
  import createModule from "@transcribe/shout";
  import { FileTranscriber } from "@transcribe/transcriber";

  async function transcribe() {
    const transcriber = new FileTranscriber({
      createModule,
      model: "/ggml-tiny-q5_1.bin",
      workerPath: "/",
    });

    await transcriber.init();
    const result = await transcriber.transcribe("/audio.wav");
  }
</script>