voice-elements - GitLite

KO | EN

gitlite — search

#javascript #python #ai #llm #android #deep-learning #linux #docker #macos #java #windows #awesome #kubernetes #openai

voice-elements

(★ 1,348)

:speaker: Web Component wrapper to the Web Speech API, that allows you to do voice recognition and speech synthesis using Polymer

File Explorer

Download Latest Version (.zip)

- demo.css
- fb.jpg
- highlight.github.css
- highlight.pack.js
- support.js
- voice-player.html
- voice-recognition.html
- voice-player.html
- voice-recognition.html
.editorconfig
.gitignore
bower.json
Gruntfile.js
index.html
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/zenorocha/voice-elements

Downloads the entire project code from GitHub to your computer.

cd voice-elements

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

$ [sudo] npm install -g bower grunt-cli

Downloads and installs the libraries listed in package.json.

$ bower install && npm install

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/zenorochavoice-elements)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/binhbbui411shields-badge.svg)](https://vaadin.com/directory/component/zenorochavoice-elements)

# &lt;voice-elements&gt;

> Web Component wrapper to the [Web Speech API](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html), that allows you to do voice recognition (speech to text) and speech synthesis (text to speech) using [Polymer](http://www.polymer-project.org/).

## Demo

[Check it live!](http://zenorocha.github.io/voice-elements)

## Install

Install the component using [Bower](http://bower.io/):

```sh
$ bower install voice-elements --save
```

Or [download as ZIP](https://github.com/zenorocha/voice-elements/archive/gh-pages.zip).

## Usage

1. Import Web Components' polyfill:

```html
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    ```

2. Import Custom Element:

```html
    <link rel="import" href="bower_components/voice-elements/dist/voice-player.html">
    <link rel="import" href="bower_components/voice-elements/dist/voice-recognition.html">
    ```

3. Start using it!

```html
    <voice-player></voice-player>
    <voice-recognition></voice-recognition>
    ```

## &lt;voice-player&gt;

Provides you a simple DOM API to do speech synthesis (text to speech).

### Options

Attribute  | Options        | Default             | Description
---        | ---         | ---                 | ---
`autoplay` | *boolean*   | `false`             | Specifies if the audio should play when page loads.
`accent`   | `en-US`, `en-GB`, `es-ES`, `fr-FR`, `it-IT`, `de-DE`, `ja-JP`, `ko-KR`, `zh-CN`    | `en-US`    | Specifies the language to be synthesized and spoken.
`text`     | *string*    | `You are awesome`   | Specifies the text to be synthesized and spoken.

### Methods

Method     | Parameters     | Returns            | Description
---        | ---            | ---                | ---
`speak()`  | None.          | Nothing.           | Triggers the voice audio to be played.
`cancel()` | None.          | Nothing.           | Triggers the voice audio to be canceled.
`pause()`  | None.          | Nothing.           | Triggers the voice audio to be paused.
`resume()` | None.          | Nothing.           | Triggers the voice audio to be resumed.

### Events

Event      | Description
---        | ---
`onstart`  | Triggers when the voice begun to be spoken.
`onend`    | Triggers when the voice completed to be spoken.
`onerror`  | Triggers when the voice player detects an error.
`onpause`  | Triggers when the voice player is resumed.
`onresume` | Triggers when the voice player is resumed.

## &lt;voice-recognition&gt;

Provides you a simple DOM API to do voice recognition (speech to text).

### Options

Attribute    | Options        | Default           | Description
---          | ---         | ---               | ---
`continuous` | *boolean*   | `true`           | Specifies if the recognition should continue when the user pauses while speaking.
`text`       | *string*    |                   | Returns the recognized text.

### Methods

Method    | Parameters     | Returns           | Description
---       | ---            | ---               | ---
`start()` | None.          | Nothing.          | Starts the voice recognition.
`stop()`  | None.          | Nothing.          | Requests to recognition service to stop listening to more audio.
`abort()` | None.          | Nothing.          | Requests to immediately stop listening and stop recognizing.

### Events

Event      | Description
---        | ---
`onstart`  | Triggers when the recognition begins.
`onerror`  | Triggers when there's a recognition error.
`onend`    | Triggers when the recognition ends.
`onresult` | Triggers when there's a recognition result.

## Browser Support

Unfortunately, the [Web Speech API](https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html) still have a poor support. Check [Can I Use](http://caniuse.com/#feat=web-speech) for more information.

![IE](https://cloud.githubusercontent.com/assets/398893/3528325/20373e76-078e-11e4-8e3a-1cb86cf506f0.png) | ![Chrome](https://cloud.githubusercontent.com/assets/398893/3528328/23bc7bc4-078e-11e4-8752-ba2809bf5cce.png) | ![Firefox](https://cloud.githubusercontent.com/assets/398893/3528329/26283ab0-078e-11e4-84d4-db2cf1009953.png) | ![Opera](https://cloud.githubusercontent.com/assets/398893/3528330/27ec9fa8-078e-11e4-95cb-709fd11dac16.png) | ![Safari](https://cloud.githubusercontent.com/assets/398893/3528331/29df8618-078e-11e4-8e3e-ed8ac738693f.png)
--- | --- | --- | --- | --- |
None ✘ | Latest ✔ | None ✘ | None ✘ | Latest (&lt;voice-player&gt; only) ✔ |

## Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

1. Install [Bower](http://bower.io/) & [Grunt](http://gruntjs.com/):

```sh
    $ [sudo] npm install -g bower grunt-cli
    ```

2. Install local dependencies:

```sh
    $ bower install && npm install
    ```

3. To test your project, start the development server and open `http://localhost:8000`.

```sh
    $ grunt server
    ```

4. To build the distribution files before releasing a new version.

```sh
    $ grunt build
    ```

5. To provide a live demo, send everything to `gh-pages` branch.

```sh
    $ grunt deploy
    ```

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## History

For detailed changelog, check [Releases](https://github.com/zenorocha/voice-elements/releases).

## License

[MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha