template.html

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
        .tutorial {
                position: fixed;
                top: 25%;
                right: -25px;
                -webkit-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);
                transform: rotate(-90deg);
                z-index: 99999;
                }

                    @media (max-width:320px) {
                            .tutorial {
                                        top: 35%;
                                    }
                        }
</style>
<script src="http://jaysalvat.github.io/buzz/releases/latest/buzz.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>

<div class="col-md-2 pull-right ">
        <a class="btn btn-primary btn-large tutorial" href="/project/taggingsounds/tutorial"><i class="icon-question-sign"></i> Tutorial</a>
    </div>

<div class="row">
    <!-- Success and Error Messages for the user --> 
    <div class="col-md-6 col-md-offset-2" style="height:50px">
        <div id="success" class="alert alert-success" style="display:none;">
            <a class="close">×</a>
            <strong>Well done!</strong> Your answer has been saved
        </div>
        <div id="loading" class="alert alert-info" style="display:none;">
            <a class="close">×</a>
            Loading next task...
        </div>
        <div id="taskcompleted" class="alert alert-info" style="display:none;">
            <strong>The task has been completed!</strong> Thanks a lot!
        </div>
        <div id="finish" class="alert alert-success" style="display:none;">
            <strong>Congratulations!</strong> You have participated in all available tasks!
            <br/>
            <div class="alert-actions">
                <a class="btn small" href="/">Go back</a>
                <a class="btn small" href="/app">or, Check other applications</a>
            </div>
        </div>
        <div id="error" class="alert alert-error" style="display:none;">
            <a class="close">×</a>
            <strong>Error!</strong> Something went wrong, please contact the site administrators
        </div>
    </div> <!-- End Success and Error Messages for the user -->
</div> <!-- End of Row -->

<!--
    Task DOM for loading the Flickr Images
    It uses the class="skeleton" to identify the elements that belong to the
    task.
-->
<div class="row skeleton"> <!-- Start Skeleton Row-->
    <div class="col-md-12"><!-- Start of Question and Submission DIV (column) -->
        <h1 id="question">Tag this sound clip</h1> <!-- The question will be loaded here -->
    </div>
</div>
<div class="row skeleton"> <!-- Start Skeleton Row-->
    <div class="col-md-12"><!-- Start of Question and Submission DIV (column) -->
        <div id="spectrals"><!-- Start of Photo DIV (column) -->
        </div><!-- End of Photo DIV (columnt) -->
    <div id="slider-audio" style="margin-top:5px; width:900px"></div>
    <div id="slider-range" style="margin-top:5px; width:900px"></div>
    <div id="soundClips" class="btn-group">
        <button class="btn btn-default" value='Yes' id="play"><i class="fa fa-play"></i> </button>
        <button class="btn btn-default" value='No' id="stop"><i class="fa fa-stop"></i> </button>
    </div>
    <span id="timer"></span>/<span id="totalTime"></span>
    <br/>
    <strong>Start Time: </strong><span id="startTime"></span>
    <strong>End Time: </strong><span id="endTime"></span>
    <span id="startTimeSeconds" style="display:none"></span>
    <span id="endTimeSeconds" style="display:none"></span>

        <form class="form-inline">

        <input type="text" name="inputTag" id="inputTag" style="display:none">
        <button class="btn btn-inverse btn-answer disabled" value='addTag' id="addTag" type="button"><i class="icon icon-white icon-plus"></i> Add tag</button>

        </form> 

        <!-- Feedback items for the user -->
        <p><span class="label label-warning">NOTE</span> Drag and drop the top sliders to select where the sound happens</p>
        <p>You have completed: <span id="done" class="label label-info"></span> tasks from
        <!-- Progress bar for the user -->
        <span id="total" class="label label-info"></span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
        </div>
        <!-- 
            This application uses Disqus to allow users to provide some feedback.
            The next section includes a button that when a user clicks on it will
            load the comments, if any, for the given task
        -->
        <div id="disqus_show_btn" style="margin-top:5px;">
            <button class="btn btn-primary btn-large btn-disqus" onclick="loadDisqus()"><i class="icon-comments"></i> Show comments</button>
            <button class="btn btn-large btn-disqus" onclick="loadDisqus()" style="display:none"><i class="icon-comments"></i> Hide comments</button>
        </div><!-- End of Disqus Button section -->
        <!-- Disqus thread for the given task -->
        <div id="disqus_thread" style="margin-top:5px;display:none"></div>
    </div><!-- End of Question and Submission DIV (column) -->
</div><!-- End of Skeleton Row -->

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

    /* * * DON'T EDIT BELOW THIS LINE * * */
    function loadDisqus() {
    $("#disqus_thread").toggle();
    $(".btn-disqus").toggle();
    var disqus_shortname = 'pybossa'; // required: replace example with your forum shortname
    //var disqus_identifier = taskId;
    var disqus_developer = 1;

    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }

</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<script>

function fromPixelsToSeconds(pixel, duration){ 
    return ((pixel * duration) / 900)
}

function fromSecondsToPixels(seconds, duration){ 
    return Math.round((secons * 900)/ duration);
}

function loadUserProgress() {
    pybossa.userProgress('freesound').done(function(data){
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("width", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'left'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

pybossa.taskLoaded(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
    var img = $("<img/>");

    //deferred.resolve(task);
    img.attr("src", task.info.spectral_l);
    img.attr("id", "spectral_" + task.id);
    img.css("display", "none");
    img.load(function() {
            deferred.resolve(task);
    });
    task.info.img = img;

    var slider = $("<div/>");
    slider.attr("id", "slider-range-" + task.id);
    slider.css("margin-top", "5px");
    slider.css("width", "900px");
    slider.css("height", "200px");
    slider.css("background", "url(" + task.info.spectral_l +")");
    slider.css("display", "none");
    task.info.slider = slider;
    //task.answer = [];
}
    else {
        deferred.resolve(task);
    }
});



pybossa.presentTask(function(task, deferred) {
    if ( !$.isEmptyObject(task) ) {
        loadUserProgress();
        $("#addTag").hide();

        $("#spectrals").append(task.info.slider);

         var availableTags = [
            "music",
            "beep",
            "engine idling",
            "car horn",
            "car brakes",
            "train brakes",
            "police siren",
            "jackhammer",
            "drilling",
            "gun shot",
            "dog bark",
            "street music",
            "air conditioner",
        ];
        $( "#inputTag" ).autocomplete({
        source: availableTags
        });

        $('form').submit(function(e){
            //$(this).children('input[type=submit]').attr('disabled', 'disabled');
            // this is just for demonstration
            e.preventDefault(); 
        });

        $( "#inputTag" ).on( "autocompleteclose", function( event, ui ) {
                $("#addTag").removeClass("disabled");

                } );

         $( "#slider-audio" ).slider({
                range: false,
                min: 0,
                max:900,
                slide: function( event, ui ) {
                    var seconds = ((ui.value * task.info.duration) / 900);
                    task.mySound.setTime(seconds);
                }
        });

         $( "#slider-range-" + task.id).slider({
                range: true,
                min: 0,
                max:900,
                values: [ 450, 460 ],
                slide: function( event, ui ) {
                    $("#inputTag").show();
                    $("#addTag").show();
                    $( "#startTime" ).text( buzz.toTimer(fromPixelsToSeconds(ui.values[ 0 ], task.info.duration) ));
                    $( "#startTimeSeconds" ).text( (fromPixelsToSeconds(ui.values[ 0 ], task.info.duration) ));
                    $( "#endTime" ).text(buzz.toTimer(fromPixelsToSeconds(ui.values[ 1 ], task.info.duration) ) );
                    $( "#endTimeSeconds" ).text((fromPixelsToSeconds(ui.values[ 1 ], task.info.duration) ) );
                }
        });

        $(".ui-slider-range").css("opacity", "0.7");

        $("#slider-range-" + task.id).show();

        task.mySound = new buzz.sound(task.info['preview-hq-mp3'], {
                autoplay: true,
                }
                );

        $("#totalTime").text(buzz.toTimer( task.info.duration ));
        $('#play').off('click').on('click', function(){
            task.mySound.togglePlay();
	    });

        $('#stop').off('click').on('click', function(){
            task.mySound.stop();
	    });

        task.mySound.bind("timeupdate", function(e) {
            var timer = buzz.toTimer(this.getTime());

            var position = Math.round((this.getTime() * 900)/ task.info.duration);
            $( "#slider-audio" ).slider( "option", "value", position );
            $("#timer").text(timer);
        });

        $('.btn-answer').off('click').on('click', function(evt) {
            var answer = $(evt.target).attr("value");
            if ((typeof answer != 'undefined') && (answer == 'addTag')) {
                var tag =  {tag: $("#inputTag").val(),
                            cue:{'start': parseFloat($("#startTimeSeconds").text()),
                                 'end': parseFloat($("#endTimeSeconds").text())},
                            };
                pybossa.saveTask(task.id, tag).done(function() {
                    $("#slider-range-" + task.id).remove();
                    $("#inputTag").hide();
                    $("#inputTag").val("");
                    $("#inputTag").addClass("disabled");
                    task.mySound.unbind("timeupdate");
                    task.mySound.stop();
                    console.log(buzz.sounds);
                    buzz.sounds = [];
                    console.log(buzz.sounds);
                    $("#addTag").hide();
                    deferred.resolve();

                });
                $("#loading").fadeIn(500);
                if ($("#disqus_thread").is(":visible")) {
                    $('#disqus_thread').toggle();
                    $('.btn-disqus').toggle();
                }
            }
            else {
                $("#error").show();
            }
        });
        $("#loading").hide();
    }
    else {
        $(".skeleton").hide();
        $("#loading").hide();
        $("#finish").fadeIn(500);
    }
});

pybossa.run('taggingsounds');
</script>