var MediaBox = require( "properjs-mediabox" );
var mediaBox = new MediaBox();

mediaBox.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",
    // If you want to supply the <video> element 
    // One will be created for you if you do not 
    element: videoElement
});

mediaBox.addAudio({
    id: "my-audio-keyname",
    src: [
        "my/audio/path/to/file.mp3",
        "my/audio/path/to/file.ogg"
    ],
    channel: "sfx",
    // If audio is NOT on the same domain 
    CORS: true,
    // Handle the xhr onload event 
    onloaded: function ( buffer ) {
        // buffer = ArrayBuffer of audio data 
    }
});

mediaBox.loadMedia( "bundle.json", function () {
    // Do stuff here, like play some of the loaded media 
});

mediaBox.addMedia( bundle, function () {
    // Do stuff here, like play some of the loaded media 
});

{
    "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"
        }
    ]
}

// Assume your media has been loaded 
mediaBox.setChannelProp( "bgm", "volume", 0.5 );
mediaBox.setChannelProp( "sfx", "volume", 0.75 );

mediaBox.stopChannel( "bgm" );
mediaBox.playChannel( "bgm" );

mediaBox.fadeChannelIn( "bgm", 5000 );
mediaBox.fadeChannelOut( "bgm", 5000 );

mediaBox.crossFadeChannel( "bgm", "my-new-sound", 3000 );

var mediabox = new MediaBox(),
    $audio = $( ".js-audio" ),
    $button = $audio.find( ".js-button" ),
    $buffered = $audio.find( ".js-buffered" ),
    $duration = $audio.find( ".js-duration" ),
    $waveform = $audio.find( ".js-waveform" ),
    $progress = $audio.find( ".js-progress" ),
    $fillmask = $audio.find( ".js-fillmask" ),
    $time = $audio.find( ".js-time" ),
    src = $audio.data( "src" ),
    id = $audio.data( "id" ),
    buffUp = function () {
        var duration = mediabox.getMediaProp( id, "duration" ),
            buffered = mediabox.getMediaProp( id, "buffered" );
 
        if ( buffered && buffered.length ) {
            buffered = buffered.end( 0 );
 
            if ( buffered === duration ) {
                clearInterval( buffIn );
            }
 
            $buffered[ 0 ].style.width = ((buffered / duration) * 100) + "%";
        }
    },
    buffIn = setInterval( buffUp, 200 );
 
mediabox.addAudio({
    id: id,
    src: src.split( "|" ),
    channel: "sfx",
    onloaded: function ( buffer ) {
        // You can create audio waveforms with the buffer 
        // var data = buffer.getChannelData( 0 ); 
 
        $audio.addClass( "is-loaded" );
 
        mediabox.playMedia( id );
    }
});
 
mediabox.addMediaEvent( id, "loadedmetadata", function () {
    var duration = mediabox.getMediaProp( id, "duration" );
 
    $time.text( "0:00" );
    $duration.text( parseTime( duration ) );
});
 
mediabox.addMediaEvent( id, "timeupdate", function () {
    var duration = mediabox.getMediaProp( id, "duration" ),
        ellapsed = mediabox.getMediaProp( id, "currentTime" );
 
    $fillmask[ 0 ].style.width = ((ellapsed / duration) * 100) + "%";
 
    $time.text( parseTime( ellapsed ) );
});
 
mediabox.addAudioEvent( id, "play", function () {
    $button.addClass( "is-playing" );
});
 
mediabox.addAudioEvent( id, "pause", function () {
    $button.removeClass( "is-playing" );
});
 
mediabox.addAudioEvent( id, "ended", function () {
    $button.removeClass( "is-playing" );
 
    $progress[ 0 ].style.width = px( 0 );
});