@usefulsensors/moonshine
Advanced tools
On-device speech-to-text for web applications with Moonshine.
This package provides quick and easy integration of client-side, on-device speech-to-text on web pages and in web applications with Useful Sensors' Moonshine models. It includes the following:
<script> that automatically adds speech-to-text to all text inputs on a page, or design your own UI integration in a few easy steps.Note: This package is currently in alpha, and breaking changes may occur between versions. User feedback and developer contributions are welcome.
You can easily include moonshine-js on your site using our CDN-hosted solution. Including the following will automatically add speech-to-text to all input fields on your page:
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/@usefulsensors/moonshine@0.0.1/dist/moonshine.auto.min.js"></script>
</head>
Using moonshine-js requires adding the following elements to your page:
data-moonshine-target attribute that specifies a corresponding target element selector. These are clickable elements, like <button>s or <div>s, that should trigger speech-to-text.Control elements point to corresponding target elements that should recieve the speech-to-text output. The following is a minimal example:
<textarea id="myTextArea"></textarea>
<button data-moonshine-target="#myTextArea"></button>
When a page visitor clicks the button, mic access will be requested, the model will be loaded on their device, and live speech-to-text will begin. As the visitor speaks, the transcription will be updated and output to the target <textarea>.
During each phase of the speech-to-text lifecycle (idle, model loading, and transcribing), a corresponding event is dispatched on the currently-active control element, which changes the icon currently displayed. We provide default icons; however, you may wish to override these to better match the design of your site. You have two options for doing so:
You can specify what to display at each step of the lifecycle by adding inline <span> tags to a control element, as follows:
<textarea id="myTextArea"></textarea>
<button data-moonshine-target="#myTextArea">
<span data-moonshine-idle>This is custom content that will show while waiting to be clicked to start speech-to-text...</span>
<span data-moonshine-loading>...and while loading the model...</span>
<span data-moonshine-transcribing>...and during transcription!</span>
</button>
Note that inline overrides will only apply to the control element for which they are defined. If you wish to use a global override that automatically applies to all control elements on the page, read on...
To override the styling for every Moonshine control element on the page, simply add the data-moonshine-template attribute to the element that you want to serve as the "template" for all other control elements on the page:
<textarea id="myTextArea"></textarea>
<button data-moonshine-target="#myTextArea" data-moonshine-template>
<span data-moonshine-idle>This is custom content that will show while waiting to be clicked to start speech-to-text...</span>
<span data-moonshine-loading>...and while loading the model...</span>
<span data-moonshine-transcribing>...and during transcription!</span>
</button>
<textarea id="myOtherTextArea"></textarea>
<button data-moonshine-target="#myOtherTextArea">
<!--- The content from the other button will be automatically filled in here; no need to define it again. -->
</button>
FAQs
On-device speech-to-text for web applications with Moonshine.
We found that @usefulsensors/moonshine demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.
Security News
An opt-in lazy import keyword aims to speed up Python startups, especially CLIs, without the ecosystem-wide risks that sank PEP 690.