• Stars
    star
    259
  • Rank 157,669 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

WebSocket Audio API: library to broadcast the sound from the microphone through a WebSocket

Project isn't mainteined anymore. Feel free to fork it and make changes you need.

WebSocket Audio API

Library to broadcast the sound from the microphone through a WebSocket

This library can work in two ways:

Streamer mode:

  1. Get user audio from microphone (getUserMedia support require)
  2. Encode it with Opus codec
  3. Send it to websocket server

Works fine in Chrome, Firefox, Edge. Doesn't work in Safari.

Player mode:

  1. Get packet from broadcasting server
  2. Decode it with Opus codec
  3. Write it to audio queue
  4. Play audio queue (Web Audio Api support require)

Works fine in all browsers

For Speaker only: In Chrome browser you should use secure connection cause Chrome does not support getUserMedia in unsecure HTTP connection
How to setup secure HTTP server

Bower

$ bower install ws-audio-api

NPM

$ npm install ws-audio-api
$ import 'ws-audio-api'

Quick start

  1. Clone this repository

    $ git clone https://github.com/Ivan-Feofanov/ws-audio-api.git
    $ cd ws-audio-api
    $ npm i
    $ cd ws-audio-api/example
  2. Start secure websockets server from server folder

    $ cd server && npm i
    $ npm start

    This command will start broadcasting server on port 5000

  3. Include scripts in both, speaker and listener page

    <script src="scripts/ws-audio-api.min.js"></script>
  4. On Streamer side create new speaker and make start/stop stream buttons

    <script>
        var streamer = new WSAudioAPI.Streamer({
            server: 'wss://localhost:5000' // dont't forget about scheme 
    });
    </script>
    
    <button onclick="streamer.start()">Start stream</button>
    <button onclick="streamer.stop()">Stop stream</button>

    Detailed config description placed below

  5. On listener side create new listener and make play/stop buttons

    <script>
        var player = new WSAudioAPI.Player({
            server: 'wss://localhost:5000' // dont't forget about scheme
        });
    </script>
    <button onclick="player.start()">Play stream</button>
    <button onclick="player.stop()">Stop playing</button>
  6. Enjoy!

Config

Default config

var defaultConfig = { 
    codec: {
        sampleRate: 24000,
        channels: 1,
        app: 2048,
        frameDuration: 20,
        bufferSize: 4096
    },
    server: 'ws://' + window.location.hostname + ':5000'
}

You can change any parameter to fine tune your broadcast.
!! Codec settings on both streamer and listener side should be the same !!
I recommend use sample rate 24000 and below to avoid gaps in stream

Opus Quality Settings

App: 2048=voip, 2049=audio, 2051=low-delay
Sample Rate: 8000, 12000, 16000, 24000, or 48000
Frame Duration: 2.5, 5, 10, 20, 40, 60
Buffer Size = sample rate/6000 * 1024

Server-side

Server side script is very simple:
You can use this script for setup standalone broadcasting server or add ws-audio broadcast functionality to your own server.

API

Streamer

Create new streamer:

var streamer = new WSAudioAPI.Streamer(config);

Start stream

streamer.start();

Mute microphone

streamer.mute();

Unmute microphone

streamer.unMute();

Stop stream

streamer.stop();

Player

Create new player

var player = new WSAudioAPI.Player(config);

Play stream

player.start();

Get stream volume

player.getVolume();

Change stream volume

player.setVolume(level); //Float 0.00 - 1.00

Volume control example

<input id="volume" type="range" min ="0.0" max="1.0" step ="0.01" oninput="setVol(this.value)" oninput="setVol(this.value)" style="-webkit-appearance: slider-vertical">
<input type="text" id="volumeIndicator">
var volume = document.querySelector('#volume');
var volumeIndicator = document.querySelector('#volumeIndicator');
volumeIndicator.value = player.getVolume();

function setVol(val){
    player.setVolume(val);
    volumeIndicator.value = player.getVolume();
}

Stop playing

player.stop();

People

USM LLC.
With regards to

License

MIT