Commit 7768d028 authored by fred's avatar fred

player: make it possible to seek in waveforms

parent d44a237e
......@@ -456,17 +456,30 @@ $(function() {
$('#Main #Emission-tabs-detail audio').each(function(index, audio) {
var audio_src = $(audio).find('source')[0];
var sound_id = $(audio).data('sound-id');
var $waveform = $(audio).next();
$.getJSON(audio_src.src.replace('.ogg', '.waveform.json'), function(data) {
$waveform.empty();
$waveform.append('<i class="duration">' + $waveform.data('duration') + '</i>');
$waveform.append('<i class="duration">' + $waveform.data('duration-string') + '</i>');
$.each(data, function(k, val) {
var val = val * 0.5;
$waveform.append('<span style="height: ' + val + 'px;"></span>')
$waveform.append('<span data-tick-index="' + k + '" style="height: ' + val + 'px;"></span>');
});
$waveform.show();
$waveform.find('span').on('click', function() {
/* XXX: play if not playing, seek otherwise */
/* if there's been something loaded */
var matching_audio = $('audio[data-sound-id=' + sound_id + ']');
if (matching_audio.length == 0) return;
matching_audio = matching_audio[0];
if (matching_audio.paused || matching_audio.ended) {
/* ignore */
return;
}
/* try to set time */
var total_duration = parseFloat($waveform.data('duration'));
var nb_ticks = $(this).parent().find('span').length;
var tick_index = $(this).data('tick-index');
matching_audio.currentTime = total_duration * tick_index / nb_ticks;
});
});
});
......
......@@ -58,7 +58,8 @@
{% endif %}
</div>
</audio>
<div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ sound.get_duration_string }}"></div>
<div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ sound.duration }}"
data-duration-string="{{ sound.get_duration_string }}"></div>
{% else %}
<div class="hidden error">No sound available!</div>
{% endif%}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment