boombox.js::sprite

The sound demo (audio sprite) using boombox.js

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.2/zepto.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="https://rawgithub.com/CyberAgent/boombox.js/master/boombox.min.js"></script>
<div id="w">
    <h2>bgma-c6a</h2>

    <div class="controls">
        <div class="btn-group">
            <button id="play1" class="btn btn-success btn-sm">Play</button>
            <button id="stop1" class="btn btn-success btn-sm">Stop</button>
            <button id="pause1" class="btn btn-success btn-sm">Pause</button>
            <button id="resume1" class="btn btn-success btn-sm">Resume</button>
            <button id="replay1" class="btn btn-success btn-sm">Replay</button>
        </div>
        <div class="volume"> <span class="glyphicon glyphicon glyphicon-volume-off"></span>

            <input id="volume1" type="range" min="0" max="1" step="0.1" /> <span class="glyphicon glyphicon-volume-up"></span>

        </div>
    </div>
     <h2>bgmb-c7b</h2>

    <div class="controls">
        <div class="btn-group">
            <button id="play2" class="btn btn-success btn-sm">Play</button>
            <button id="stop2" class="btn btn-success btn-sm">Stop</button>
            <button id="pause2" class="btn btn-success btn-sm">Pause</button>
            <button id="resume2" class="btn btn-success btn-sm">Resume</button>
            <button id="replay2" class="btn btn-success btn-sm">Replay</button>
        </div>
        <div class="volume"> <span class="glyphicon glyphicon glyphicon-volume-off"></span>

            <input id="volume2" type="range" min="0" max="1" step="0.1" /> <span class="glyphicon glyphicon-volume-up"></span>

        </div>
    </div>
     <h2>Debug</h2>
     <pre id="debug"></pre>

    <div id="info">
         <h2>Infomation</h2>
    </div>
</div>

CSS

#w {
    margin: 20px
}
#debug {
    overflow-y: scroll;
    height: 200px;
}
.volume {
    margin-top: 15px;
}

JavaScript

// short-cut dom
$info = $("#info");
$debug = $("#debug");
// log
var debug = function (msg) {
    $debug.append(msg + '\n');
    $debug.scrollTop($debug[0].scrollHeight);
};

// Events 1
$("#play1").click(function (e) {
    boombox.get('bgma-c6a').play();
    debug('## play bgma-c6a');
});
$("#stop1").click(function (e) {
    boombox.get('bgma-c6a').stop();
    debug('## stop bgma-c6a');
});
$("#pause1").click(function (e) {
    boombox.get('bgma-c6a').pause();
    debug('## pause bgma-c6a');
});
$("#resume1").click(function (e) {
    boombox.get('bgma-c6a').resume();
    debug('## resume bgma-c6a');
});
$("#replay1").click(function (e) {
    boombox.get('bgma-c6a').replay();
    debug('## replay bgma-c6a');
});
$("#volume1").change(function (e) {
    var volume = e.currentTarget.value;
    debug('## volume bgma-c6a: ' + volume);
    boombox.get('bgma-c6a').volume(volume);
});


// Events 2
$("#play2").click(function (e) {
    boombox.get('bgmb-c7b').play();
    debug('## play bgmb-c7b');
});
$("#stop2").click(function (e) {
    boombox.get('bgmb-c7b').stop();
    debug('## stop bgmb-c7b');
});
$("#pause2").click(function (e) {
    boombox.get('bgmb-c7b').pause();
    debug('## pause bgmb-c7b');
});
$("#resume2").click(function (e) {
    boombox.get('bgmb-c7b').resume();
    debug('## resume bgmb-c7b');
});
$("#replay2").click(function (e) {
    boombox.get('bgmb-c7b').replay();
    debug('## replay bgmb-c7b');
});
$("#volume2").change(function (e) {
    var volume = e.currentTarget.value;
    debug('## volume bgmb-c7b: ' + volume);
    boombox.get('bgmb-c7b').volume(volume);
});

// boombox running
boombox.setup({
    webaudio: {
        use: false // force override
    },
    htmlaudio: {
        //use: true // force override
    },
    htmlvideo: {
        //use: true // force override
    }
});

var prefix1 = "bgma";

var options1 = {
    "spritemap": {
        "c5a": {
            "start": 0,
            "end": 5.990770975056689
        },
        "c6a": {
...