Edit in JSFiddle

// short-cut dom
$info = $("#info");
$debug = $("#debug");


// log
var debug = function (msg, no) {
    $debug.append(no + ' : ' + msg + '\n');
    $debug.scrollTop($debug[0].scrollHeight);
};

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

// Events
_.each([1, 2, 3], function (no, idx) {
    $("#play" + no).click(function (e) {
        boombox.get('single' + no).play();
        debug('## play' + no, no);
    });
    $("#stop" + no).click(function (e) {
        boombox.get('single' + no).stop();
        debug('## stop' + no, no);
    });
    $("#pause" + no).click(function (e) {
        boombox.get('single' + no).pause();
        debug('## pause' + no, no);
    });
    $("#resume" + no).click(function (e) {
        boombox.get('single' + no).resume();
        debug('## resume' + no, no);
    });
    $("#replay" + no).click(function (e) {
        boombox.get('single' + no).replay();
        debug('## replay' + no, no);
    });
    $("#volume" + no).change(function (e) {
        var volume = e.currentTarget.value;
        debug('## volume' + no + ': ' + volume, no);
        boombox.get('single' + no).volume(volume);
    });
});

// HTMLAudio 1
var options1 = {
    src: [{
        media: 'audio/mp4',
        path: 'https://github.com/CyberAgent/boombox.js/blob/gh-pages/demo/media/sound.m4a?raw=true'
    }]
};

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

// HTMLAudio 2
var options2 = {
    src: [{
        media: 'audio/mp4',
        path: 'https://github.com/CyberAgent/boombox.js/blob/gh-pages/demo/media/sound.m4a?raw=true'
    }]
};

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

// HTMLVideo 3
var options3 = {
    src: [{
        media: 'audio/mp4',
        path: 'https://github.com/CyberAgent/boombox.js/blob/gh-pages/demo/media/sound.m4a?raw=true'
    }]
};

boombox.load('single3', options3, true, function (err, htmlvideo) {
    $info.append(htmlvideo.$el);
    $(htmlvideo.$el)
    .css('position', 'absolute')
    .css('top', '-1000px');
    debug("## sound loaded. used: " + boombox.pool.single3.constructor.name, 3);
});
var info = '';
info += 'WebAudio  [OFF]' + '\n';
info += 'HTMLAudio [ON ]' + '\n';
info += 'HTMLVideo [ON ]' + '\n';
info += '\nState of boombox.js\n';
info += '\twebaudio : ' + boombox.isWebAudio() + '\n';
info += '\thtmlaudio: ' + boombox.isHTMLAudio() + '\n';
info += '\thtmlvideo: ' + boombox.isHTMLVideo() + '\n';
info += '\n';
info += 'Browser Support\n';
info += '\twebaudio : ' + !! window.webkitAudioContext + '\n';
info += '\thtmlaudio: ' + !! window.Audio + '\n';
info += '\thtmlvideo: ' + !! document.createElement + '\n';


$("#info pre").text(info);

<div id="w">
    <h1>1. HTMLAudio</h1>

    <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>
     <h1>2. HTMLAudio</h1>

    <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>
     <h1>3. HTMLVideo</h1>

    <div class="btn-group">
        <button id="play3" class="btn btn-success btn-sm">Play</button>
        <button id="stop3" class="btn btn-success btn-sm">Stop</button>
        <button id="pause3" class="btn btn-success btn-sm">Pause</button>
        <button id="resume3" class="btn btn-success btn-sm">Resume</button>
        <button id="replay3" class="btn btn-success btn-sm">Replay</button>
    </div>
    <div class="volume"> <span class="glyphicon glyphicon glyphicon-volume-off"></span>

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

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

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

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