properjs-mediaboxpublic
MediaBox
A lightweight manager for HTML5 audio and video.
Installation
npm install properjs-mediabox --save-dev
Usage
var MediaBox = ;var mediaBox = ;
Loading Video
You can load video explicitly using the addVideo
method. The order for src
indicates the order in which the browser will attempt to decide which file it can play.
mediaBox;
Loading Audio
You can load audio explicitly using the addAudio
method. The order for src
indicates the order in which the browser will attempt to decide which file it can play.
mediaBox;
Loading Bundles
You can bundle load media using the loadMedia
method or the addMedia
method.
mediaBox;
mediaBox;
Bundle Format
When bundling media, use the following format. You can load as many audio and video objects as you want, just add them to the arrays.
"addAudio": "id": "my-audio-keyname" "src": "my/audio/path/to/file.mp3" "my/audio/path/to/file.ogg" "channel": "bgm" "addVideo": "id": "my-video-keyname" "src": "my/video/path/to/file.webm" "my/video/path/to/file.mp4" "my/video/path/to/file.ogv" "channel": "vid"
Using Channels
MediaBox uses channels to organize the media content. The default channels are vid
, bgm
and sfx
respectively. You can add any extra number of channels you want, just pass them in the config. You can set channel specific properties, however, the only property used internally by MediaBox is the volume
one. For instance, to adjust the levels for background music and sound effects:
// Assume your media has been loaded mediaBox;mediaBox;
You can also stop and start an entire channel:
mediaBox;mediaBox;
As well as fade channels in and out:
mediaBox;mediaBox;
Lastly, you can cross fade between a playing channel and a new object id you would like to play:
mediaBox;
Example
This example puts all the pieces together, showing you how you can use MediaBox. It assumes you have an audio module that looks something like this:
So then you could have some Javascript that tackles the task like this:
var mediabox = $audio = $button = $audio $buffered = $audio $duration = $audio $waveform = $audio $progress = $audio $fillmask = $audio $time = $audio src = $audiodata "src" id = $audiodata "id" { var duration = mediabox buffered = mediabox; if buffered && bufferedlength buffered = buffered; if buffered === duration ; $buffered 0 stylewidth = buffered / duration * 100 + "%"; } buffIn = ; mediabox; mediabox; mediabox; mediabox; mediabox; mediabox;
API
Loader API
- loadMedia( url, callback )
- addMedia( obj )
- addVideo( obj )
- addAudio( obj )
Channel API
- setChannelProp( channel, prop, val )
- getChannelProp( channel, prop )
- playChannel( channel )
- stopChannel( channel )
- fadeChannelIn( channel, duration )
- fadeChannelOut( channel, duration )
- crossFadeChannel( channel, id, duration )
- getChannels()
Abstract Audio/Video API
- fadeMediaIn( id, duration )
- fadeMediaOut( id, duration )
- getVolume( id )
- setVolume( id, val )
- isLoaded( id )
- isPaused( id )
- isPlaying( id )
- isStopped( id )
- playMedia( id )
- stopMedia( id )
- pauseMedia( id )
- destroyMedia( id )
- getMediaProp( id, prop )
- setMediaProp( id, prop, val )
- getMediaAttr( id, attr )
- setMediaAttr( id, attr, val )
- addMediaEvent( id, event, callback )
- removeMediaEvent( id, event )
- getMedia( id )
- getAudios()
- getVideos()
Static API
- MediaBox.support
- MediaBox.STATE_PLAYING
- MediaBox.STATE_STOPPED
- MediaBox.STATE_PAUSED
- MediaBox.STATE_STOPPING