# snips-webbrowser-audioserver

> The package provides a SnipsMicrophone Component to stream microphone pcm data to snips via mqtt. Implements audioserver, hotword and tts elements of the Snips hermes mqtt protocol over mqtt and websockets.

Latest version **1.0.2** (published 2018-10-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install snips-webbrowser-audioserver
pnpm add snips-webbrowser-audioserver
yarn add snips-webbrowser-audioserver
bun add snips-webbrowser-audioserver
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-10-29 |
| First published | 2018-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 3 |
| Unpacked size | 353 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | syntithenai |
| Maintainers | syntithenai |

## Links

- npm: https://www.npmjs.com/package/snips-webbrowser-audioserver
- Repository: https://github.com/syntithenai/opensnips
- Homepage: https://github.com/syntithenai/opensnips#readme
- Issues: https://github.com/syntithenai/opensnips/issues
- npm.io page: https://npm.io/package/snips-webbrowser-audioserver

## Dependencies (3)

- [hark](https://npm.io/package/hark.md) ^1.2.3
- [paho-mqtt](https://npm.io/package/paho-mqtt.md) ^1.0.4
- [getusermedia](https://npm.io/package/getusermedia.md) ^2.0.1

## Recent versions

- 1.0.2 (latest) — 2018-10-29
- 1.0.1 — 2018-10-27
- 1.0.0 — 2018-10-26

## README

# snips-webbrowser-audioserver

> snips audioserver implementation in a browser with micropohone component for react

[![NPM](https://img.shields.io/npm/v/snips-webbrowser-audioserver.svg)](https://www.npmjs.com/package/snips-webbrowser-audioserver) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## About

This package provides a React component that shows a microphone and streams audio over mqtt in a dialog suitable for the [Snips Voice Platform](https://snips.ai) making it easy to develop web applications that behave as satellites in the Snips ecosystem.

The package only makes sense when used with a Snips voice server.

Features
- implements audioserver elements of the Snips hermes mqtt protocol supporting streaming audio to and from the device.
- optionally implements the hotword server elements of the Snips hermes mqtt protocol using Porcupine running with WebAssembly in the browser.
- implements the tts  server elements of the Snips hermes mqtt protocol  using native voices or falling back to speak.js javascript tts generation.
- silence detection by hark so you only transmit while you talk
- long press or right click to show configuration page to select volume, tts voice, hotword, remote control and silence detection.
- logs showing asr transcripts, intent and tts plus audio recordings for each asr transcript.

## Screenshots


![microphone ](./snips-webbrowser-audioserver-microphone.png  "microphone ")

![microphone configuration](./snipsmicrophone_configuration.png  "microphone configuration")



## Install

```bash
npm install --save snips-webbrowser-audioserver

!! ensure global script files are included as per example

```



## Usage

```jsx
import React, { Component } from 'react'

import SnipsMicrophone from 'snips-webbrowser-audioserver'

class Example extends Component {
  render () {
    return (
      <SnipsMicrophone  />
    )
  }
}
```


## Props


- mqttServer
- mqttPort
- hotwordId
- siteId
- clientId
- buttonStyle
- speechBubbleStyle
- configStyle



### Config

- inputvolume
- outputvolume
- voicevolume
- ttsvoice
- voicerate
- voicepitch
- remotecontrol
- hotword
- hotwordsensitivity
- silencedetection
- silencesensitivity
- enabletts
- enableaudio
- enablenotifications


## License

MIT © [syntithenai](https://github.com/syntithenai)

---
_Source: https://npm.io/package/snips-webbrowser-audioserver · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._