aboutsummaryrefslogtreecommitdiff
path: root/assets/js/lustiges-script.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js/lustiges-script.js')
-rw-r--r--assets/js/lustiges-script.js93
1 files changed, 93 insertions, 0 deletions
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 11e4bdf..417b234 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -429,3 +429,96 @@ $(function() {
});
}, 1000*60);
});
+
+
+// multiviewer
+$(function() {
+ var audioMeter = !!window.chrome;
+ $('body.multiview')
+ .find('audio, video')
+ .each(function(idx, player) {
+
+ var
+ $player = $(player),
+ $meter = $player.closest('.cell').find('.meter'),
+ $timer = $player.closest('.cell').find('.timer');
+
+ $player.on("timeupdate", function(e)
+ {
+ var
+ s = Math.floor(this.currentTime % 60),
+ m = Math.floor(this.currentTime / 60) % 60,
+ h = Math.floor(this.currentTime / 60 / 60) % 24,
+ d = Math.floor(this.currentTime / 60 / 60 / 24),
+ f = Math.floor((this.currentTime - Math.floor(this.currentTime)) * 1000),
+ txt = '';
+
+ txt += d+'d ';
+
+ if(h < 10) txt += '0';
+ txt += h+'h ';
+
+ if(m < 10) txt += '0';
+ txt += m+'m ';
+
+ if(s < 10) txt += '0';
+ txt += s+'s ';
+
+ if(f < 10) txt += '00';
+ else if(f < 100) txt += '0';
+ txt += f+'ms';
+
+ $timer.text(txt);
+ });
+
+ if(!audioMeter)
+ {
+ $player.prop('muted', true);
+ $meter.hide();
+ return;
+ }
+
+ var
+ ctx = new AudioContext(),
+ audioSrc = ctx.createMediaElementSource(player),
+ analyser = ctx.createAnalyser();
+
+ // we have to connect the MediaElementSource with the analyser
+ audioSrc.connect(analyser);
+
+ // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
+ analyser.fftSize = 64;
+
+ var w = 100 / analyser.frequencyBinCount;
+ for (var i = 0; i < analyser.frequencyBinCount; i++) {
+ var c = Math.floor( i * 255 / analyser.frequencyBinCount );
+ $('<div class="bar">')
+ .css({
+ 'width': w+'%',
+ 'left': (i*w)+'%',
+ 'background-color': 'rgb('+c+', '+(192 - c)+', 0)'
+ })
+ .appendTo($meter);
+ }
+
+ var $bars = $meter.find('.bar');
+
+ // frequencyBinCount tells you how many values you'll receive from the analyser
+ var frequencyData = new Uint8Array(analyser.frequencyBinCount);
+
+ // we're ready to receive some data!
+ function renderFrame() {
+ // update data in frequencyData
+ analyser.getByteFrequencyData(frequencyData);
+ // render frame based on values in frequencyData
+
+ for (var i = 0; i < frequencyData.length; i++) {
+ $($bars[i]).css('height', frequencyData[i] / 255 * 40);
+ }
+
+ // loop
+ requestAnimationFrame(renderFrame);
+ }
+ renderFrame();
+ });
+});