boombox.js::mix

The sound demo (mixed note) using boombox.js

by Satoru HIRAKI

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">
    <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>
 ...

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, 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....