Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build Status

Dead simple way to have audio playback functionality in the JS application.

Check out the Demo App

Check the Documentation

Table of contents:


# npm
npm install rxjs-audio --save
# yarn
yarn install rxjs-audio


Initialize the stream

Before using, you need to create an object of the Stream class. You'll need to pick a class depening on your use-case:

  • AudioStream is the base-class similar to the html5 audio element where you can load a track.
  • PlaylistAudioStream is like the name says more suitable for playing playlists, in the options you'll be able to add an array of tracks
import { AudioStream } from 'rxjs-audio';

// For single track streams
const audioStream = new AudioStream();

// For playlists
const audioStream = new PlaylistAudioStream();



Starting or loading a single track

const audioStream = new AudioStream({
    // Optional
    autoPlay: true, // Start playing the track as soon as it loads


2. Multi Track Input

const tracks: string[] = [

const audioStream = new PlaylistAudioStream(tracks, {
    // Optional
    autoPlay: true, // Start playing the track as soon as it loads
    // Optional
    initialTrack: 1; // Set the track you want to start playing first
    // Optional
    autoPlayNext: true, // Automatically start playing the next song when a track finishes

Audio Playback

rxjs-audio provides lots of playback features like play, pause, next, previous out of the box. Check documentation of AudioStream class for more detail.

Playing a stream

To play the media. Run the following:;

Pausing a stream

To pause the media. Run the following:;

Stop a stream

To stop the media. Run the following:;

Seek to

To seekTo a position. Run the following:;

Change volume

To change the volume, use;

Playing next track (only for PlaylistAudioStream)

To play the next track in list. Run the following:;
// Optional: Not required when `autoPlay` is set to true;

Check the documentation at and demo application for more detail.

Listening to Audio Events

It's fairly easy to listen to audio media events like playing, ended.

You just need to subscribe to the Observable return by method, as shown below:
.subscribe(event => {

Listening to State Changes

rxjs-audio also provides an Observable to listen to state changes. You can use it as shown below:

// Update State
.subscribe(state => {
    this.state = state;

The state:StreamState Object gives us folowing information:

    playing: boolean; // If media is currently playing or not.
    isFirstTrack: boolean; // (only for PlaylistAudioStream) If first track is playing or not.
    isLastTrack: boolean; // (only for PlaylistAudioStream) If last track is playing or not.
    trackInfo: StreamTrackInfo // Check the definition below

And trackInfo:StreamTrackInfo provide us following information:

    currentTrack: number | undefined, // index of the current playing track
    duration: number | undefined, // duration of media
    currentTime: number | undefined // currentTime of media

Error Handling

Following is a very simple example of Error Handing
.subscribe(event => {
    if(event.type === 'canplay') {
        this.error = false;
    else if(event.type === 'error') {
        this.error = true;


Read the documentation at for more detail.


Licensed under MIT