npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

directus-extension-speech-to-text

v1.0.2

Published

Speech-to-text interface for Directus using OpenAI Whisper API

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

flagbit.deflagbit.de

Keywords

directusdirectus-extensiondirectus-extension-interfacespeech-to-textopenaiwhispervoiceaudio

Readme

Directus Speech-to-Text Interface

A Directus interface extension that enables voice input for text fields using OpenAI's Whisper API for speech recognition.

Features

  • 🎤 Voice input directly into Directus text fields
  • 🌍 Multi-language support (German, English, Spanish, French, Italian, Portuguese, Russian, Japanese, Chinese)
  • 🔄 Automatic language detection
  • 🎯 Seamless integration with existing text fields
  • ⚡ Real-time transcription with OpenAI Whisper
  • 📝 Support for both single-line input and multi-line textarea fields
  • ⚙️ Configurable append mode and text separators

Screenshots

Configuration Options

Extension Configuration Configure the Speech-to-Text interface with OpenAI API key, language selection, and text separator options.

Interface in Action

Speech-to-Text Interface The interface shows both single-line input and textarea fields with integrated microphone buttons for voice input.

Installation

From npm (Recommended)

npm install directus-extension-speech-to-text

Manual Installation

  1. Clone and build the extension:
git clone https://github.com/flagbit/directus-extension-speech-to-text.git
cd directus-extension-speech-to-text
npm install
npm run build
  1. Link extension to Directus:
npm run link

Configuration

Configure the interface with the following options:

  1. OpenAI API Key (Required): Your OpenAI API key for speech recognition
  2. Language: Choose between auto-detection or specific languages
  3. Placeholder: Customizable placeholder text
  4. Append Mode: Toggle between replacing or appending to existing text
  5. Text Separator: Configure how new text is separated (auto, space, newline, none)

Usage

  1. Add the Speech-to-Text interface to a String or Text field in your Directus collection
  2. Enter your OpenAI API key in the interface options
  3. Select your preferred language (optional - defaults to auto-detection)
  4. Configure append mode and text separator as needed
  5. Use the microphone button to start/stop voice recording

Technical Details

  • Audio Format: WebM with Opus codec, converted to WAV for optimal compatibility
  • Sample Rate: 16kHz for optimal Whisper API performance
  • API: OpenAI Whisper API v1
  • Framework: Vue 3 + Directus Extensions SDK
  • File Size Limit: 25MB per audio recording

Development

# Development mode with file watching
npm run dev

# Build for production
npm run build

# Link to Directus for testing
npm run link

Requirements

  • Directus 10.10.0+
  • Valid OpenAI API key
  • HTTPS connection for microphone access (in production)
  • Modern browser with MediaRecorder API support

Browser Compatibility

  • Chrome/Chromium 47+
  • Firefox 29+
  • Safari 14+
  • Edge 79+

License

MIT

Author

Jörg Weller ([email protected])