Gathering detailed insights and metrics for obvi-component
Gathering detailed insights and metrics for obvi-component
A Polymer 3+ webcomponent / button for doing speech recognition
Installations
npm install obvi-componentDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
8.9.1
NPM Version
6.4.1
Releases
Unable to fetch releases
Languages
2
JavaScript
HTML
JavaScript (88.61%)
HTML (11.39%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
Apache-2.0 License
59 Stars
61 Commits
16 Forks
9 Watchers
8 Branches
7 Contributors
Updated on Jun 23, 2025
Maintainers
1
Package Meta Information
Latest Version
3.0.0
Package Id
obvi-component@3.0.0
Unpacked Size
2.81 MB
Size
784.64 kB
File Count
109
NPM Version
6.4.1
Node Version
8.9.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
OBVI
One Button for Voice Input is a customizable webcomponent built with Polymer 3+ to make it easy for including speech recognition in your web-based projects. It uses the Speech Recognition API, and for unsupported browsers it will fallback to a client-side Google Cloud Speech API solution.
Run example
With npm installed, in the root of this repo:
npm install
npm start
Setting up your project
As of Polymer 3, all dependencies are managed through NPM and module script tags. You can simply add obvi to your project using:
npm install --save obvi-component
And then the following:
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
</head>
<body>
<voice-button id="voice-button" cloud-speech-api-key="YOUR_API_KEY" autodetect></voice-button>
<script type="module">
import './node_modules/obvi/voice-button.js';
var voiceEl = document.querySelector('voice-button'),
transcriptionEl = document.getElementById('transcription');
// can check the supported flag, and do something if it's disabled / not supported
console.log('does this browser support WebRTC?', voiceEl.supported);
voiceEl.addEventListener('mousedown', function(event){
transcriptionEl.innerHTML = '';
})
var transcription = '';
voiceEl.addEventListener('onSpeech', function(event){
transcription = event.detail.speechResult;
transcriptionEl.innerHTML = transcription;
console.log('Speech response: ', event.detail.speechResult)
transcriptionEl.classList.add('interim');
if(event.detail.isFinal){
transcriptionEl.classList.remove('interim');
}
})
voiceEl.addEventListener('onStateChange', function(event){
console.log('state:',event.detail.newValue);
})
</script>
</body>
</html>
Note: You must run your app from a web server for the HTML Imports polyfill to work properly. This requirement goes away when the API is available natively.
Also Note: If your app is running from SSL (https://), the microphone access permission will be persistent. That is, users won't have to grant/deny access every time.
For a single-build with one bundled file:
Static hosting services like GitHub Pages and Firebase Hosting don't support serving different files to different user agents. If you're hosting your application on one of these services, you'll need to serve a single build like so:
<script type="module" src="node_modules/obvi/voice-button.js"></script>
or
import './node_modules/obvi/dist/voice-button.js'
You can also customize the polymer build command in package.json and create your own build file to futher suit your needs.
Usage
Basic usage is:
<voice-button cloud-speech-api-key="YOUR_API_KEY"></voice-button>
Options
| Name | Description | Type | Default | Options / Examples |
|---|---|---|---|---|
| cloudSpeechApiKey | Cloud Speech API is the fallback when the Web Speech API isn't available. Provide this key to cover more browsers. | String | null | <voice-button cloud-speech-api-key="XXX"></voice-button> |
| flat | Whether or not to include the shadow. | Boolean | false | <voice-button flat> |
| autodetect | By default, the user needs to press & hold to capture speech. If this is set to true, it will auto-detect silence to finish capturing speech. | Boolean | false | <voice-button autodetect> |
| language | Language for SpeechRecognition interface. If not set, will default to user agent's language setting. See here for more info. | String | 'en-US' | <voice-button language="en-US"> |
| disabled | Disables the button for being pressed and capturing speech. | Boolean | false | <voice-button disabled> |
| keyboardTrigger | How the keyboard will trigger the button | String | 'space-bar' | <voice-button keyboard-trigger="space-bar"> space-bar, all-keys, none |
| clickForPermission | If set to true, will only ask for browser microphone permissions when the button is clicked (instead of immediately) | Boolean | false | <voice-button click-for-permission="true" |
| hidePermissionText | If set to true, the warning text for browser access to the microphone will not appear | Boolean | false | hide-permission-text="true" |
CSS Variables
You can customize the look of the button using these CSS variables (default values shown):
voice-button{
--button-diameter: 100px;
--mic-color: #FFFFFF;
--text-color: #666666;
--button-color: #666666;
--circle-viz-color: #000000;
}
Events
You can listen for the following custom events from the voice button:
| Name | Description | Return |
|---|---|---|
onSpeech | Result from the speech handler | detail: { result: { speechResult : String, confidence : Number, isFinal : Boolean, sourceEvent: Object } |
onSpeechError | The raw event returned from the SpeechRecognition onerror handler | See here |
onStateChange | When the button changes state | detail: { newValue: String, oldValue: String} see below for listening states |
Listening states:
IDLE: 'idle',
LISTENING: 'listening',
USER_INPUT: 'user-input',
DISABLED: 'disabled'
Microphone Permissions
When the component is loaded, microphone access is checked (unless click-for-permission="true" is set, then it will ask one the button is clicked). If the host's mic access is blocked, there will be a warning shown. The language of the text matches the language attribute for the component (defaults to "en-US"). If the color of the text needs to be customized, you can use the --text-color CSS variable.
Browser Compatibility
This component defaults to using the Web Speech API. If the browser does not support that, it will fall back to WebRTC in order to capture audio on the client and post it to the Google Cloud Speech API. Make sure to create an API Key and have the cloud-speech-api-key attribute (see above in Options) filled out in order to use this fallback. You can check the supported property of the button once it's loaded in to see if it has browser support.
When the fallback is used, there will be no streaming speech recognition; the speech comes back all at once.
| Browser | Support | Features |
|---|---|---|
| Firefox | Stable / Aurora / Nightly | Cloud Speech fallback |
| Google Chrome | Stable / Canary / Beta / Dev | Web Speech API |
| Opera | Stable / NEXT | Cloud Speech fallback |
| Android | Chrome / Firefox / Opera | Cloud Speech fallback |
| Microsoft Edge | Normal Build | Cloud Speech fallback |
| Safari 11 | Stable | Cloud Speech fallback |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Credits
This component was authored by @nick-jonas, and was built atop some great tools - special thanks to the Polymer team (esp. Chris Joel), Jonathan Schaeffer for testing help, @jasonfarrell for fallback help, @GersonRosales & @danielstorey for showing a working recording example in iOS11 early days.
This is an experiment, not an official Google product. We’ll do our best to support and maintain this experiment but your mileage may vary.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
141 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-3v6h-hqm4-2rg6
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-p6mr-pxg4-68hx
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
- Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
- Warn: Project is vulnerable to: GHSA-wm7h-9275-46v2
- Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq
- Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48
- Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-7h8x-wmq2-7mff
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-pc58-wgmc-hfjr
- Warn: Project is vulnerable to: GHSA-vvv8-xw5f-3f88
- Warn: Project is vulnerable to: GHSA-3fx5-fwvr-xrjg
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-44fp-w29j-9vj5
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg
- Warn: Project is vulnerable to: GHSA-pgcr-7wm4-mcv6
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-x3m3-4wpv-5vgc
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-v2p6-4mp7-3r9v
- Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg
- Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp
- Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r
- Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6
- Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f
- Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m
- Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3
- Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75
- Warn: Project is vulnerable to: GHSA-4hpf-3wq7-5rpr
- Warn: Project is vulnerable to: GHSA-f522-ffg8-j8r6
- Warn: Project is vulnerable to: GHSA-q75g-2496-mxpp
- Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
- Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
- Warn: Project is vulnerable to: GHSA-x2mc-8fgj-3wmr
- Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
Score
1.7
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More