Edit in JSFiddle

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

// Events
$("#play").click(function (e) {
    boombox.get('single').play();
    debug('## play');
});
$("#stop").click(function (e) {
    boombox.get('single').stop();
    debug('## stop');
});
$("#pause").click(function (e) {
    boombox.get('single').pause();
    debug('## pause');
});
$("#resume").click(function (e) {
    boombox.get('single').resume();
    debug('## resume');
});
$("#replay").click(function (e) {
    boombox.get('single').replay();
    debug('## replay');
});
$("#volume").change(function (e) {
    var volume = e.currentTarget.value;
    debug('## volume: ' + volume);
    boombox.get('single').volume(volume);
});

//setInterval(function () { debug(JSON.stringify(boombox.pool.single.state)); }, 1000)


// boombox running
boombox.setup({
    webaudio: {
        use: false // force override
    },
    htmlaudio: {
        //use: true // force override
    },
    htmlvideo: {
        //use: true // force override
    }
});
var bgm = ["bgm", "https://github.com/CyberAgent/boombox.js/blob/gh-pages/demo/media/sound.m4a?raw=true"];
var options = {
    src: [{
        media: 'audio/mp4',
        path: 'https://github.com/CyberAgent/boombox.js/blob/gh-pages/demo/media/sound.m4a?raw=true'
    }]
};

boombox.load('single', options, function (err, htmlaudio) {
    $info.append(htmlaudio.$el);
    debug("## sound loaded. used: " + boombox.pool.single.constructor.name);
});

$info.append('Browser Support<br />');
$info.append('webaudio: ' + boombox.support.webaudio.use + '<br />');
$info.append('htmlaudio: ' + boombox.support.htmlaudio.use + '<br />');
$info.append('htmlvideo: ' + boombox.support.htmlvideo.use + '<br />');

<div id="w">
    <div class="controls">
        <div class="btn-group">
            <button id="play" class="btn btn-success btn-sm">Play</button>
            <button id="stop" class="btn btn-success btn-sm">Stop</button>
            <button id="pause" class="btn btn-success btn-sm">Pause</button>
            <button id="resume" class="btn btn-success btn-sm">Resume</button>
            <button id="replay" class="btn btn-success btn-sm">Replay</button>
        </div>
        <div class="volume"> <span class="glyphicon glyphicon glyphicon-volume-off"></span>

            <input id="volume" 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>

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