Dead simple way to have audio playback functionality in the JS application.
Check out the Demo App
Check the Documentation
# npm
npm install rxjs-audio --save
# yarn
yarn install rxjs-audio
In order to play
the audio files/urls. You need to create first AudioStream
Object via rxjsAudioService.create
method, as shown below:
import { RxJSAudioService } from 'rxjs-audio';
...
rxjsAudioService = new RxJSAudioService();
audio: AudioStream;
constructor() {
this.audio = this.rxjsAudioService.create(this.tracks);
}
}
RxJSAudioService.create
method returns and AudioStream
Object. This AudioStream
gives you all the playback methods like play
and pause
etc.
RxJSAudioService.create
method takes either a single track or Array of audio track as an Input and an optional config
object. Take a look at following examples.
Input to RxJSAudioService.create
can be a single track as shown below:
track:string = 'https://ia801609.us.archive.org/16/items/nusratcollection_20170414_0953/Man%20Atkiya%20Beparwah%20De%20Naal%20Nusrat%20Fateh%20Ali%20Khan.mp3';
this.audio = this.rxjsAudioService.create(this.track);
tracks:Array<string> = [
'https://ia801504.us.archive.org/3/items/EdSheeranPerfectOfficialMusicVideoListenVid.com/Ed_Sheeran_-_Perfect_Official_Music_Video%5BListenVid.com%5D.mp3',
'https://ia801609.us.archive.org/16/items/nusratcollection_20170414_0953/Man%20Atkiya%20Beparwah%20De%20Naal%20Nusrat%20Fateh%20Ali%20Khan.mp3',
'https://ia801503.us.archive.org/15/items/TheBeatlesPennyLane_201805/The%20Beatles%20-%20Penny%20Lane.mp3',
];
this.audio = this.rxjsAudioService.create(this.tracks);
In real world application, it's higly unlikely that you would have an array of strings, instead you would use array of objects, as shown below:
tracks:Array<any> = [
{
url: 'https://ia801504.us.archive.org/3/items/EdSheeranPerfectOfficialMusicVideoListenVid.com/Ed_Sheeran_-_Perfect_Official_Music_Video%5BListenVid.com%5D.mp3',
name: 'Perfect',
artist: 'Ed Sheeran'
},
{
url: 'https://ia801609.us.archive.org/16/items/nusratcollection_20170414_0953/Man%20Atkiya%20Beparwah%20De%20Naal%20Nusrat%20Fateh%20Ali%20Khan.mp3',
name: 'Man Atkiya Beparwah',
artist: 'Ustad Nusrat Fateh Ali Khan',
},
{
url: 'https://ia801503.us.archive.org/15/items/TheBeatlesPennyLane_201805/The%20Beatles%20-%20Penny%20Lane.mp3',
name: 'Penny Lane',
artist: 'The Beatles'
}
];
You can use this structure by telling the service about the url
of Audio by configuring urlKey
of tracks, as shown below:
this.audio = this.rxjsAudioService.create(this.tracks, { urlKey: 'url' })
There are two more configuration options:
initialTrack:number
: It's use to set the Initial/First Track of the Playlist, that you wnat to play.autoPlayNext:boolean
: If set to true
, it will play the next track after current is ended
.rxjs-audio
provides lots of playback features like play
, pause
, next
, previous
out of the box. Check documentation of AudioStream
class for more detail.
To play
the media. Run the following:
this.audio.play();
To pause
the media. Run the following:
this.audio.pause();
next
trackTo play the next
track in list. Run the following:
this.audio.next();
this.audio.play();
Check the documentation at and demo application for more detail.
It's fairly easy to listen to audio media events like playing
, ended
.
You just need to subscribe
to the Observable
return by AudioStream.events()
method, as shown below:
this.audio.events()
.subscribe(event => {
console.log(event);
});
rxjs-audio
also provides an Observable to listen to state changes. You can use it as shown below:
// Update State
this.audio.getState()
.subscribe(state => {
this.state = state;
});
The state:StreamState
Object gives us folowing information:
{
playing: boolean; // If media is currently playing or not.
isFirstTrack: boolean; // If first track is playing or not.
isLastTrack: boolean; // 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
readableCurrentTime: string, // currentTime in human readable form(HH:MM:ss)
readableDuration:string, // duration of media in readable form(HH:MM:ss)
duration: number | undefined, // duration of media
currentTime: number | undefined // currentTime of media
}
Following is a very simple example of Error Handing
this.audio.events()
.subscribe(event => {
if(event.type === 'canplay') {
this.error = false;
}
else if(event.type === 'error') {
this.error = true;
}
});
Read the documentation at https://imsingh.github.io/rxjs-audio for more detail.
Licensed under MIT
Generated using TypeDoc
format time into human readable format using moment