Moody-blues NPM

moody-blues

moody-blues is a JavaScript library for HLS player powered by hls.js.
It has the following features.

Playlist support
Native playback support
Easy media operation

Installation

npm install moody-blues

Usage

<video id="hls-player" />

const video = document.getElementById('hls-player')
const player = new MoodyBlues(video, {
  debug: true,
  clips: [{
    source: 'https://example.com/playlist.m3u8',
    start: 10
  }]
})

Media operations

There are the following methods for operating media.

Operation	Description
`play(clips)`	Play one or more clips.If there is more than one, specify an array of clip objects.
`addClips(clips)`	Add one or more clips to the end of the playlist.If there is more than one, specify an array of clip objects.
`resume()`	Resume playback.
`pause()`	Pauses playback.
`seek(time)`	Seek to the specified number of seconds.
`volume(level)`	Changes the volume to the specified value.level is a value between 0 and 1.
`mute(muted)`	Change the muted state.muted is a boolean value.
`speed(rate)`	Change the playback speed.

Clip object

The clip object has the following properties:

Property	Type	Required	Description
`source`	String	x	Specify the HLS source URL.
`start`	Number		Specify the number of seconds to start playback.

You can also add arbitrary properties.

Options

Configration parameters could be provided upon instantiation of MoodyBlues object.

Option	Type	Default	Description
`debug`	`boolean`	`false`	Outputs MoodyBlues logs to the console.
`useNativeWheneverPossible`	`boolean`	`false`	Use native HLS playback if possible.
`clips`	Clip object, Array of clip object	`undefined`	Play the specified clip when ready.
`hlsConfig`	hlsConfig object	`undefined`	hls.js configration

Events

MoodyBlues fires a bunch of events, that could be registered and unregistered as below:

const onProgress = (time) => {
  console.log(time)
}

// subscribe event
player.on(MoodyBlues.Events.Progress, onProgress)
// unsubscribe event
player.off(MoodyBlues.Events.Progress, onProgress)
// subscribe for a single event call only
player.once(MoodyBlues.Events.Progress, onProgress)

Event	Data	Description
`MoodyBlues.Events.Finish`		Sent when playback completes.
`MoodyBlues.Events.Ready`		The media's metadata has finished loading.
`MoodyBlues.Events.Pause`		Sent when the playback state is changed to paused.
`MoodyBlues.Events.Resume`		Sent when the playback state is no longer paused.
`MoodyBlues.Events.Buffer`	`ranges`: TimeRanges	Sent periodically to inform interested parties of progress downloading the media.
`MoodyBlues.Events.Speed`	`rate: number`	Sent when the playback speed changes.
`MoodyBlues.Events.Seek`	`time: number`	Sent when a seek operation completes.
`MoodyBlues.Events.Progress`	`time: number`	The time indicated by the element's currentTime attribute has changed.
`MoodyBlues.Events.Volume`	`{ volume: number, muted: boolean }`	Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
`MoodyBlues.Events.Error`	`{ type: MoodyBlues.EventTypes, details: string \| undefined, fatal: boolean }`	Sent when an error occurs.

Errors

Each error is categorized by:

type:
- MoodyBlues.ErrorTypes.NetworkError for network related errors
- MoodyBlues.ErrorTypes.MediaError for media/video related errors
- MoodyBlues.ErrorTypes.OtherError for all other errors
details:
- errors details