Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@speechly/browser-client
Advanced tools
@speechly/browser-client - npm Package Compare versions
Comparing version 1.1.0 to 1.2.0
| { | ||
| "name": "@speechly/browser-client", | ||
| "version": "1.1.0", | ||
| "version": "1.2.0", | ||
| "description": "Browser client for Speechly API", | ||
@@ -46,5 +46,3 @@ "keywords": [ | ||
| }, | ||
| "files": [ | ||
| "core/**/*" | ||
| ], | ||
| "files": ["core/**/*", "src/**/*"], | ||
| "main": "./core/speechly.umd.min.js", | ||
@@ -62,2 +60,4 @@ "module": "./core/speechly.es.js", | ||
| "@microsoft/api-extractor": "^7.18.5", | ||
| "@rollup/plugin-commonjs": "~21.0.1", | ||
| "@rollup/plugin-node-resolve": "~13.1.3", | ||
| "@types/base-64": "^0.1.3", | ||
@@ -80,13 +80,11 @@ "@types/jest": "^25.2.1", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "~2.63.0", | ||
| "rollup-plugin-terser": "~7.0.2", | ||
| "ts-jest": "26.5.6", | ||
| "ts-loader": "^9.2.5", | ||
| "tsc-watch": "^4.3.5", | ||
| "tslib": "~2.3.1", | ||
| "typedoc": "^0.21.5", | ||
| "typedoc-plugin-markdown": "^3.10.4", | ||
| "typescript": "^4.3.5", | ||
| "rollup": "~2.63.0", | ||
| "tslib": "~2.3.1", | ||
| "@rollup/plugin-node-resolve": "~13.1.3", | ||
| "@rollup/plugin-commonjs": "~21.0.1", | ||
| "rollup-plugin-terser": "~7.0.2" | ||
| "typescript": "^4.3.5" | ||
| }, | ||
@@ -93,0 +91,0 @@ "publishConfig": { |
| <div align="center" markdown="1"> | ||
| <a href="https://www.speechly.com/#gh-light-mode-only"> | ||
| <a href="https://www.speechly.com"> | ||
| <img src="https://d33wubrfki0l68.cloudfront.net/f15fc952956e1952d6bd23661b7a7ee6b775faaa/c1b30/img/speechly-logo-duo-black.svg" height="48" /> | ||
| </a> | ||
| <a href="https://www.speechly.com/#gh-dark-mode-only"> | ||
| <img src="https://d33wubrfki0l68.cloudfront.net/5622420d87a4aad61e39418e6be5024c56d4cd1d/94452/img/speechly-logo-duo-white.svg" height="48" /> | ||
| </a> | ||
@@ -36,3 +33,3 @@ ### The Fast, Accurate, and Simple Voice Interface API | ||
| ## Usage | ||
| ## Usage with Node | ||
@@ -54,3 +51,3 @@ Install the package: | ||
| // Create a new Client. appId is configured in the dashboard. | ||
| // Create a new Client. NOTE: Configure and get your appId from https://api.speechly.com/dashboard | ||
| const client = new Client({appId: 'your-app-id'}) | ||
@@ -78,2 +75,70 @@ | ||
| ## Usage with browsers | ||
| This sample HTML loads Speechly's `browser-client` ES modules via a CDN that mirrors npm packages. The page displays a text field that you dictate text into. See browser's console log for raw segment feed from Speechly. | ||
| Please use a HTML server to view the example. Running it as a file will not work due to browser's security restrictions. For example run `serve .` on command line and open `localhost:3000` in your browser. | ||
| ```HTML | ||
| <html> | ||
| <body> | ||
| <input id="textBox" type="text" placeholder="Hold to talk..." autofocus> | ||
| <script type="module"> | ||
| // Load Speechly ES module from a CDN. Note script type="module" | ||
| import { Client, ClientState } from "https://unpkg.com/@speechly/browser-client/core/speechly.es.js" | ||
| const widget = document.getElementById("textBox") | ||
| let clientState = ClientState.Disconnected; | ||
| // Create a Speechly client instance. NOTE: Configure and get your appId from https://api.speechly.com/dashboard | ||
| const client = new Client({ | ||
| appId: "your-app-id", | ||
| debug: true, | ||
| logSegments: true, | ||
| }) | ||
| client.onStateChange(state => { | ||
| clientState = state; | ||
| }); | ||
| client.onSegmentChange(segment => { | ||
| // Clean up and concatenate words | ||
| let transcript = segment.words.map(w => w.value.toLowerCase()).filter(w => w !== "").join(" "); | ||
| // Add trailing period upon segment end. | ||
| if (segment.isFinal) transcript += "."; | ||
| widget.value = transcript; | ||
| }); | ||
| const startListening = async () => { | ||
| switch (clientState) { | ||
| case ClientState.Disconnected: | ||
| await client.initialize(); | ||
| // fall through | ||
| case ClientState.Connected: | ||
| widget.value = "Listening..." | ||
| client.startContext(); | ||
| break; | ||
| } | ||
| } | ||
| const stopListening = () => { | ||
| switch (clientState) { | ||
| case ClientState.Starting: | ||
| case ClientState.Recording: | ||
| client.stopContext(); | ||
| break; | ||
| } | ||
| } | ||
| // Bind start listening to a widget hold, release anywhere to stop | ||
| widget.addEventListener("mousedown", startListening) | ||
| document.addEventListener("mouseup", stopListening) | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ## Documentation | ||
@@ -80,0 +145,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.71%
661253
- Number of package files
- increased by107.41%
56
- Lines of code
- increased by44.21%
7503
- Number of lines in readme file
- increased by75.58%
151
Worsened metrics
- Number of medium supply chain risk alerts
- increased by50%
3
No dependency changes