@deutsche-audio/crbn-player

CRBN Core Player

A JavaScript built player which can currently be used for:

• playing and stopping audio,
• pausing audio,
• changing of the track that is currently playing,
• changing track's volume,
• going forward and backward

CRBN Player, if provided with an element prop within the options param, can be used with the default UI (to be implemented in the future). If the element prop is not specified, only the functionalities of the Player will be available for use (currently available in the Player package).

Props can be passed to the Player in order to trigger events such as playing and stopping the audio file, changing the stream that is currently being played, changing the track's volume, etc.

Also, CRBN Core Player supports Google Chromecast which can be implemented by adding chromecast prop to the instance of the Player and setting its value to true.

Usage

npm install @deutsche-audio/crbn-player

import Player from "@deutsche-audio/crbn-player";

const player = new Player(options);

Example of Player usage

    const player = new Player({
        html5: true,
        chromecast: true, 
        format: ['webm', 'wav'],
        onplay: () => {
            console.log('Playing');
        },
        onpause: () => {
            console.log('Paused');
        },
        onmetadata: metadata => {
            console.log(metadata, "metadata");
        },
    });

    // ...

    return (

        // ...

        // In order to open Google's extension and select the desired device, Google's button needs to be added
        <google-cast-launcher id="castbutton"></google-cast-launcher>
    
        // ...

        <Button playButton onClick={() => player.play()}>Play</Button>
        <Button onClick={() => player.stop()}>Stop</Button>
        <Button            
            onClick={() => player.changeSrc({
                src: 'https://...',
                title: 'ROCK',
                images: [{url: 'https://...'}]
            })}
        >Rock
        </Button>       
       
        // ...
    
);

Props

Prop	Description	Default
src	Source of the current track that is playing.	-
preload	Set to true to begin downloading the audio file if it is not loaded yet.	true
playing	Set to true or false to pause or play the media.	true
loop	Set to true or false to enable/disable loop.	false
mute	Set to true or false to mute/unmute current audio.	false
volume	The volume of the specific audio, from 0.0 to 1.0	1.0
rate	The initial playback speed.	1
html5	Set to true to force HTML5 Audio. This should be used for large audio files so that there isn't a need to wait for the full file to be downloaded and decoded before playing.	false
format	Specify a format in situations where extraction won't work.	[]
chromecast	Enables Google Chromecast.	false
element	Optional. Targets the DOM element that is being specified and attaches the default player to that element. element prop can be provided with the ID of the element or with the element itself.	-
onload	Called when audio is loaded (buffered).	noop
onplay	Called when audio starts or resumes playing.	noop
onend	Called when media is finished playing.	noop
onpause	Called when audio is paused.	noop
onmetadata	For each new song in the livestream, fetches the information (metadata) about the current song playing.	noop
onstop	Called when audio is stopped.	noop
onvolumechange	Called when volume is changed.	noop
onloaderror	Called when an error occurs while attempting to load media.	noop
onseek	Called when the sound has been seeked. The first parameter is the ID of the sound - onSeek(id).	noop

Methods

Method signature	Parameters	Description
play(mediaOptions)	@param {Object} mediaOptions; Properties that can be paseed to mediaOpstions are src, title, artist, albumName, images	Play a song in the player.
changeSrc(mediaOptions)	@param {Object} mediaOptions; Properties that can be paseed to mediaOpstions are src, title, artist, albumName, images or @param {Array} src	Change to a specific track.
pause()	-	Pause the current track.
stop()	-	Stop the current track.
volume(val)	@param {Number} val Volume between 0 and 1.	Increase/decrease the volume.
seek(per)	@param {Number} per Percentage through the song to skip.	Seek to a new position.