source: main/trunk/model-sites-dev/respooled/collect/popup-video-respooled/js/jquery-drums.js@ 29938

// Based on:
//   http://www.theonlytutorials.com/jquery-drum-sets-html5-audio-tag-example/

$(document).ready(function() {
    
    //create the audio tag using jquery
    //include the drum kit mp3s
    
    var base_collection = gs.variables.httpCollection;
    var base_audio = base_collection + "/audio";

    var drum1 = document.createElement('audio');
    drum1.setAttribute('src', base_audio + '/drum1.mp3');
    var drum2 = document.createElement('audio');
    drum2.setAttribute('src', base_audio + '/drum2.mp3');
    var drum3 = document.createElement('audio');
    drum3.setAttribute('src', base_audio + '/drum3.mp3');
    var drum4 = document.createElement('audio');
    drum4.setAttribute('src', base_audio + '/drum4.mp3');
    var drum5 = document.createElement('audio');
    drum5.setAttribute('src', base_audio + '/drum5.mp3');
    var drum6 = document.createElement('audio');
    drum6.setAttribute('src', base_audio + '/drum6.mp3');
    
    var drum;
    
    $('.drum').mousedown(function() {
    
    //find the drum hit and play the respective audio
    drum = $(this).attr('id');
    drum = eval(drum);
    
    if (drum.ended) {
        $(this).addClass('hit');
        drum.play();
    } else {
        try {
        drum.currentTime = 0;
            } catch (e) {
        console.log("Error thrown when playing drum sound: " + e);
        }
        $(this).addClass('hit');
            drum.play();
        }
    });    

    $('.drum').mouseup(function() {
    $(this).removeClass('hit');
    });

});