New audio player - Review of iss127

.gitignore

@@ -15,7 +15,6 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
 lib64/
 parts/
 sdist/

datasets/management/commands/refresh_sound_extra_data.py

@@ -0,0 +1,13 @@
+from django.core.management.base import BaseCommand
+from datasets.tasks import refresh_sound_extra_data
+
+
+class Command(BaseCommand):
+    help = 'Refresh the extra_data field in Sound model' \
+
+
+    def add_arguments(self, parser):
+        pass
+
+    def handle(self, *args, **options):
+        refresh_sound_extra_data()

datasets/models.py

@@ -198,6 +198,56 @@ class Sound(models.Model):
     def get_candidate_annotations(self, dataset):
         return CandidateAnnotation.objects.filter(sound_dataset__in=self.sounddataset_set.filter(dataset=dataset))
 
+    def get_image_url(self, img_type, size):
+        img_types = ['spectrogram', 'waveform']
+        sizes = ['M', 'L']
+        if img_type not in img_types:
+            return '#'
+        if size not in sizes:
+            return '#'
+        url_parts = self.extra_data['previews'].split('previews')
+        prefix = url_parts[0]
+        freesound_id_pref = url_parts[1].split('/')[1]
+        user_id = url_parts[1].split('_')[-1].split('-')[0]
+        params = {
+            'prefix': prefix,
+            'freesound_id_pref': freesound_id_pref,
+            'freesound_id': self.freesound_id,
+            'user_id': user_id,
+            'size': size
+        }
+        if img_type == 'spectrogram':
+            img_url = self.build_spectrogram_url(params)
+        elif img_type == 'waveform':
+            img_url = self.build_waveform_url(params)
+        return img_url
+
+    def build_spectrogram_url(self, params):
+        prefix = params['prefix']
+        freesound_id_pref = params['freesound_id_pref']
+        freesound_id = params['freesound_id']
+        user_id = params['user_id']
+        size = params['size']
+        spec_url = "{0}displays/{1}/{2}_{3}_spec_{4}.jpg".format(prefix,
+                                                                freesound_id_pref,
+                                                                freesound_id,
+                                                                user_id,
+                                                                size)
+        return spec_url
+
+    def build_waveform_url(self, params):
+        prefix = params['prefix']
+        freesound_id_pref = params['freesound_id_pref']
+        freesound_id = params['freesound_id']
+        user_id = params['user_id']
+        size = params['size']
+        wave_url = "{0}displays/{1}/{2}_{3}_wave_{4}.png".format(prefix,
+                                                                freesound_id_pref,
+                                                                freesound_id,
+                                                                user_id,
+                                                                size)
+        return wave_url
+
     def __str__(self):
         return 'Sound {0} (freesound {1})'.format(self.id, self.freesound_id)
 

datasets/tasks.py

@@ -226,3 +226,16 @@ def refresh_sound_deleted_state():
             sound.deleted_in_freesound = True
             sound.save()
     logger.info('Finished refreshing freesound sound deleted state')
+
+
+@shared_task
+def refresh_sound_extra_data():
+    logger.info('Start refreshing freesound sound extra data')
+    sound_ids = Sound.objects.all().values_list('freesound_id', flat=True)
+    results = query_freesound_by_id(sound_ids, fields="id,name,analysis,images", descriptors="lowlevel.average_loudness")
+    with transaction.atomic():
+        for freesound_sound in results:
+            sound = Sound.objects.get(freesound_id=freesound_sound.id)
+            sound.extra_data.update(freesound_sound.as_dict())
+            sound.save()
+    logger.info('Finished refreshing freesound sound extra data')

datasets/templates/datasets/contribute_validate_annotations_category.html

@@ -1,7 +1,12 @@
 {% extends "base.html" %}
 {% load staticfiles %}
 {% load dataset_templatetags %}
+{% load general_templatetags %}
 {% block title %}Validate category {{ node.name }}{% endblock title %}
+{% block extra_head %}
+    {% load_sound_player_files %}
+{% endblock %}
+
 {% block page_js %}
     <script type="text/javascript">
         function submitForm(){
@@ -209,22 +214,26 @@ <h2>Is <div class="ui big label">{{ node.name }}</div> present in the following
                         <div class="card" id="row_annotation_{{ forloop.counter0 }}">
                             {% with annotation.sound_dataset.sound.freesound_id as fsid  %}
                                 <div class="content">
-                                    <div class="right floated meta"><a href="javascript:void(0);" onclick="openFreesoundSoundPage('{{ fsid }}', '{{ forloop.counter0 }}');">
+                                    <div class="header">
+                                        #{{ forloop.counter }}
+                                        <div class="right floated meta"><a href="javascript:void(0);" onclick="openFreesoundSoundPage('{{ fsid }}', '{{ forloop.counter0 }}');">
                                         see in <img class="ui image" style="width: 80px;" src="{% static 'img/freesound_logo_color.png' %}"></a></div>
-                                    <div class="header">#{{ forloop.counter }}</div>
-
+                                    </div>
                                     <div class="description">
                                         <div class="ui grid">
-                                            <div class="eight wide column">
-                                                {{ fsid| fs_embed | safe }}
+                                            <div class="ui container center aligned">
+                                                {% sound_player dataset fsid "medium" %}
                                             </div>
-                                            <div class="eight wide column vote_card_form">
-                                                {{ form.vote }}
-                                                {{ form.annotation_id }}
-                                                {{ form.visited_sound }}
+                                            <div class="ui grid">
+                                                <div class="centered row">
+                                                    <div class="eight wide column vote_card_form">
+                                                        {{ form.vote }}
+                                                        {{ form.annotation_id }}
+                                                        {{ form.visited_sound }}
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
-
                                     </div>
                                 </div>
                             {% endwith %}

datasets/templates/datasets/contribute_validate_annotations_category_easy.html

@@ -1,7 +1,12 @@
 {% extends "base.html" %}
 {% load staticfiles %}
 {% load dataset_templatetags %}
+{% load general_templatetags %}
 {% block title %}Validate category {{ node.name }}{% endblock title %}
+{% block extra_head %}
+    {% load_sound_player_files %}
+{% endblock %}
+
 {% block page_js %}
     <script type="text/javascript">
         function submitForm(){
@@ -184,22 +189,24 @@ <h2>Is <div class="ui big label">{{ node.name }}</div> present in the following
                         <div class="card" id="row_annotation_{{ forloop.counter0 }}">
                             {% with annotation.sound_dataset.sound.freesound_id as fsid  %}
                                 <div class="content">
-                                    <div class="right floated meta"><a href="javascript:void(0);" onclick="openFreesoundSoundPage('{{ fsid }}', '{{ forloop.counter0 }}');">
+                                    <div class="header">
+                                        #{{ forloop.counter }}
+                                        <div class="right floated meta"><a href="javascript:void(0);" onclick="openFreesoundSoundPage('{{ fsid }}', '{{ forloop.counter0 }}');">
                                         see in <img class="ui image" style="width: 80px;" src="{% static 'img/freesound_logo_color.png' %}"></a></div>
-                                    <div class="header">#{{ forloop.counter }}</div>
-
+                                    </div>
                                     <div class="description">
+                                        <div class="ui container center aligned">
+                                            {% sound_player dataset fsid "medium" %}
+                                        </div>
                                         <div class="ui grid">
-                                            <div class="eight wide column">
-                                                {{ fsid| fs_embed | safe }}
-                                            </div>
-                                            <div class="eight wide column vote_card_form">
-                                                {{ form.vote }}
-                                                {{ form.annotation_id }}
-                                                {{ form.visited_sound }}
+                                            <div class="centered row">
+                                                <div class="sixteen wide column vote_card_form">
+                                                    {{ form.vote }}
+                                                    {{ form.annotation_id }}
+                                                    {{ form.visited_sound }}
+                                                </div>
                                             </div>
                                         </div>
-
                                     </div>
                                 </div>
                             {% endwith %}

datasets/templates/datasets/dataset.html

@@ -4,6 +4,10 @@
 {% load dataset_templatetags %}
 {% load general_templatetags %}
 {% block title %}{{dataset.short_name|upper}}{% endblock title %}
+{% block extra_head %}
+    {% load_sound_player_files %}
+{% endblock %}
+
 {% block page_js %}
 
     <script type="text/javascript">
@@ -102,6 +106,10 @@
                     var translate_value = translate_values[counter];
                     examples_container.css({"transform": "translateX(" + translate_value + "px)"});
                     counter = (counter < 9) ? counter + 1 : 0;
+                    // stop currently playing sound
+                    if (window.activePlayer) {
+                        window.activePlayer.stop();
+                    }
                 }
             }, 3000)
 
@@ -153,7 +161,8 @@ <h3 class="ui header">{{ dataset.short_name|upper }}: a dataset of everyday soun
               <div>
                 {% for sound in node.valid_examples|slice:"2" %}
                   <span>
-                    {{ sound| fs_embed | safe }}
+                    {% sound_player dataset sound "mini" %}
+{#                    {{ sound| fs_embed | safe }}#}
                   </span>
                 {% endfor %}
               </div>

datasets/templates/datasets/include_player_resources.html

@@ -0,0 +1,13 @@
+{% load staticfiles %}
+
+{% block extra_head %}
+    <link rel="stylesheet" type="text/css" href="{% static "audio-annotator/css/player.css" %}"/>
+    <!--script src="{% static "audio-annotator/js/lib/materialize.min.js" %}" type="text/javascript"></script-->
+    <script src="{% static "audio-annotator/js/lib/wavesurfer.min.js" %}" type="text/javascript"></script>
+    <!--script src="{% static "audio-annotator/js/lib/wavesurfer.spectrogram.min.js" %}" type="text/javascript"></script-->
+    <!--script src="{% static "audio-annotator/js/colormap/colormap.min.js" %}" type="text/javascript"></script-->
+    <!--script src="{% static "audio-annotator/js/src/annotation_stages.js" %}" type="text/javascript"></script-->
+    <!--script src="{% static "audio-annotator/js/src/hidden_image.js" %}" type="text/javascript"></script-->
+    <!--script src="{% static "audio-annotator/js/src/components.js" %}" type="text/javascript"></script-->
+    <script src="{% static "audio-annotator/js/src/player.js" %}" type="text/javascript"></script>
+{% endblock %}

datasets/templates/datasets/player.html

@@ -0,0 +1,26 @@
+{% load general_templatetags %}
+
+<div class="player_container">
+
+    <div class="soundplayer {{ player_size }}" id="s{{ freesound_id }}_{{ player_id }}">
+        <div class="ui active dimmer">
+            <div class="ui loader"></div>
+        </div>
+        <div class="wavesurfer"></div>
+        <div class="playbar"></div>
+    </div>
+
+    <script type="text/javascript">
+    var playerOptions = {
+        size: "{{ player_size }}",
+        player_id: "{{ player_id }}",
+        freesound_id: "{{ freesound_id }}",
+        sound_url: "{{ sound_url }}",
+        waveform_url: "{{ waveform_url }}",
+        spectrogram_url: "{{ spectrogram_url }}",
+    };
+
+    var player = new Player(playerOptions)
+    </script>
+
+</div>

datasets/templates/datasets/taxonomy_node.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load staticfiles %}
 {% load dataset_templatetags %}
+{% load general_templatetags %}
 {% block title %}{{ node.name }}{% endblock title %}
 
 {% block content %}
@@ -30,7 +31,10 @@ <h2>Audio samples with candidate annotations for <div class="ui huge label">{{ n
         <tbody>
             {% for sound in sounds %}
                 <tr>
-                    <td>{{ sound.freesound_id | fs_embed | safe }}</td>
+                    <td>
+{#                        {{ sound.freesound_id | fs_embed | safe }}#}
+                        {% sound_player dataset sound.freesound_id "small" %}
+                    </td>
                     <td><a href="http://freesound.org/s/{{ sound.freesound_id }}" target="_blank">http://freesound.org/s/{{ sound.freesound_id }}</a></td>
                     <td>{{ sound.num_PP }}</td>
                     <td>{{ sound.num_PNP }}</td>

datasets/templates/datasets/taxonomy_node_info.html

@@ -1,4 +1,10 @@
+{% load staticfiles %}
 {% load dataset_templatetags %}
+{% load general_templatetags %}
+{% block extra_head %}
+    {% load_sound_player_files %}
+{% endblock %}
+
 {% block page_js %}
     <script type="text/javascript">
     var popupLoading = '<div style="height:310px; width:730px" class="ui loading segment">Loading</div>';
@@ -12,7 +18,8 @@
                     var popup = this
                     var ajax_url = el.getAttribute('ajax_url')
                     $.ajax({
-                        url: ajax_url
+                        url: ajax_url,
+                        cache: true
                     }).done(function(result) {
                         popup.html(result);
                         el.setAttribute("data-html", result);
@@ -91,7 +98,8 @@
             <tr><td>Examples</td>
                 <td>
                     {% for fsid in node.freesound_examples %}
-                        {{ fsid| fs_embed | safe }}
+{#                        {{ fsid| fs_embed | safe }}#}
+                        {% sound_player dataset fsid "small" %}
                     {% endfor %}
                 </td>
             </tr>

datasets/templates/datasets/taxonomy_node_mini_info.html

@@ -1,4 +1,6 @@
 {% load dataset_templatetags %}
+{% load general_templatetags %}
+
 <table class="ui unstackable table bottom attached" width="100%" style="margin-bottom:7px;">
     <tbody>
     <td>Hierarchy</td>
@@ -32,7 +34,7 @@
             <tr><td>Examples</td>
                 <td>
                     {% for fsid in node.freesound_examples %}
-                        {{ fsid| fs_embed | safe }}
+                        {% sound_player dataset fsid "small" %}
                     {% endfor %}
                 </td>
             </tr>

datasets/templates/datasets/taxonomy_node_small_info.html

@@ -1,4 +1,7 @@
+{% load staticfiles %}
 {% load dataset_templatetags %}
+{% load general_templatetags %}
+
 {% block page_js %}
     <script type="text/javascript">
     var popupLoading = '<div style="height:310px; width:730px" class="ui loading segment">Loading</div>';
@@ -67,7 +70,8 @@
             <tr><td>Examples</td>
                 <td>
                     {% for fsid in node.freesound_examples %}
-                        {{ fsid| fs_embed | safe }}
+                        {% sound_player dataset fsid "small" %}
+{#                        {{ fsid| fs_embed | safe }}#}
                     {% endfor %}
                 </td>
             </tr>

datasets/templatetags/general_templatetags.py

@@ -1,5 +1,6 @@
 from django import template
 from django.core import urlresolvers
+from uuid import uuid4
 import datetime
 import time
 
@@ -48,3 +49,24 @@ def timestamp_to_datetime(value):
 @register.filter()
 def multiply(value, arg):
     return value*arg
+
+
+@register.inclusion_tag('datasets/include_player_resources.html')
+def load_sound_player_files():
+    return
+
+
+@register.inclusion_tag('datasets/player.html')
+def sound_player(dataset, freesound_sound_id, player_size):
+    sound = dataset.sounds.get(freesound_id=freesound_sound_id)
+    sound_url = sound.extra_data['previews']
+    spec_size = 'M' if player_size in ("mini", "small") else 'L'
+    spectrogram_url = sound.get_image_url('spectrogram', spec_size)
+    waveform_url = sound.get_image_url('waveform', 'M')
+    return {'sound_url': sound_url,
+            'freesound_id': freesound_sound_id,
+            'spectrogram_url': spectrogram_url,
+            'waveform_url': waveform_url,
+            'player_size': player_size,
+            'player_id': uuid4()
+            }