Commit 0f36893f authored by fred's avatar fred

add waveforms to sound files

parent 140778ab
......@@ -485,6 +485,7 @@ h1.top#frequence {
font-weight: normal;
}
#Nav .selected a,
#Nav ul li.current a, #Nav ul a.active, #Nav button.active {
border-color: #333;
}
......@@ -524,6 +525,7 @@ h1.top#frequence {
#fiber-nav li a{
padding:0.5em;
}
#fiber-nav .selected,
#fiber-nav .current{
font-weight:bold;
}
......@@ -1470,3 +1472,31 @@ div.extra-soundfiles {
h3.episode-subtitle {
font-size: 2.5em;
}
.waveform {
display: none;
}
.waveform span {
background: #3A3A3A;
display: inline-block;
width: 0.50%;
}
.waveform span.done {
background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
}
.waveform span.done.current + span {
background: #FF771C;
}
.waveform i.duration {
position: absolute;
right: 4px;
bottom: 12px;
color: #FF771C;;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-style: normal;
font-weight: bold;
}
......@@ -87,6 +87,7 @@
source :{},
title: audio.attr('title'),
id:audio.attr('id'),
sound_id:audio.data('sound-id'),
url:audio.attr('data-url'),
focus:audio.attr('data-player-focus')
};
......@@ -110,6 +111,7 @@
var container = $('<li>').attr('data-origin',sound.id);
var audio = $('<audio>',this.options.html5audioOptions)
.attr('title',sound.title).hide()
.attr('data-sound-id', sound.sound_id)
.attr('data-url',sound.url);
$.each(sound.source,function(k,v){
var source = $('<source>',{src:v,type:k});
......@@ -135,6 +137,11 @@
}).on('beforePlay',function(){
thePlaylist.pauseSounds();
return this;
}).on('timeupdate', function(event) {
var position = 1.0 * event.target.currentTime / event.target.duration;
var sound_id = $(event.target).data('sound-id');
$(document).trigger('panik:timeupdate',
{'sound_id': sound_id, 'position': position});
});
var controls = $('<span>',{'class':'soundControls controls'});
var link = $('<a>',{href:sound.url,'class':'button icon-external-link'});
......
......@@ -453,6 +453,23 @@ $(function() {
$(this).toggleClass('right marged');
});
$('#Main audio').each(function(index, audio) {
var audio_src = $(audio).find('source')[0];
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>');
$.each(data, function(k, val) {
$waveform.append('<span style="height: ' + val + 'px;"></span>')
});
$waveform.show();
$waveform.find('span').on('click', function() {
/* XXX: play if not playing, seek otherwise */
});
});
});
if (document.cookie.indexOf('panikdb=on') != -1) {
panikdb_path = null;
if (window.location.pathname.indexOf('/emissions/') == 0) {
......@@ -474,4 +491,19 @@ $(function() {
}
var konami = new Konami('/party');
$(document).on('panik:timeupdate', function(ev, data) {
$waveform = $('#Main div.waveform[data-sound-id="' + data.sound_id + '"]');
var elems = $waveform.find('span');
var total_elems = elems.length;
var done = total_elems * data.position;
$waveform.find('span').each(function(k, elem) {
if (k < done) {
$(elem).addClass('done').removeClass('current');
} else {
$(elem).removeClass('done');
}
});
$waveform.find('span.done:last').addClass('current');
});
});
......@@ -34,6 +34,7 @@
data-player='true'
class='hidden'
data-url="{% url 'episode-view' emission_slug=sound.episode.emission.slug slug=sound.episode.slug %}"
data-sound-id="{{ sound.id }}"
{% if sound.fragment and sound.title %}title="{{ sound.title }}"
{% else %}title="{{sound.episode.title}}"{% endif %}
id="Audio-{{ sound.file.url|slugify }}"
......@@ -57,6 +58,7 @@
{% endif %}
</div>
</audio>
<div class="waveform" data-sound-id="{{ sound.id }}" data-duration="{{ 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