Voice Input
Mic button with recording animation for speech input.
Preview
Voice input uses your browser's speech recognition. Chrome and Edge may send your voice to Google or Microsoft to turn it into text. This component does not record or store audio; only final transcripts are sent to this site.
Arguments
voice_input(lang='en-US')
Usage
views.py
python
from djust import LiveView
from djust.decorators import event_handler
from djust.components import VoiceInput
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.component = VoiceInput(lang='en-US')
@event_handler()
def transcribe(self, value=None, **kwargs):
pass # your app acts on 'transcribe'; no component state movesmy_template.html
django
{{ component }}Events this component sends to the view: transcribe.
Needs its script on the page: <script src="{% static 'djust_components/voice-input.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| event | str — renames the event; identity is `name` | 'transcribe' | Event name for transcription result. |
| lang | str | 'en-US' | BCP 47 language tag (default: en-US). |
| continuous | bool | False | Keep listening after each phrase until the reader presses the microphone again (default: False: one phrase, then it stops). It is still bounded by ``max_seconds`` and every stop condition above. |
| custom_class | str | '' | Additional CSS classes (on the button). |
| disclosure | Any | None | Text of the privacy line (default: see ``DEFAULT_DISCLOSURE``). |
| max_seconds | int | 60 | Longest one listening session (default 60, at most 600). |
| **kwargs | — passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state | — | — |
Source & styles
| File | Path | Notes |
|---|---|---|
| module | djust.components.components.voice_input | Subclass it, or pass custom_class, to change how it renders. |
| css | djust_components/components.css | Defines 7 of this component's classes at line 2366, 2367, 2368, 2369, 2371, 2377, 2378. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |