aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/_structure.less34
-rw-r--r--assets/js/lustiges-script.js85
2 files changed, 119 insertions, 0 deletions
diff --git a/assets/css/_structure.less b/assets/css/_structure.less
index f779cd8..6e302c8 100644
--- a/assets/css/_structure.less
+++ b/assets/css/_structure.less
@@ -137,3 +137,37 @@ body.feedback-read {
}
}
}
+
+body.multiview {
+ .cell {
+ background-color: white;
+
+ h2 {
+ font-size: 14px;
+ padding: 10px;
+ margin: 0;
+ }
+
+ .meter {
+ background-color: gray;
+ height: 45px;
+ position: relative;
+
+ .bar {
+ background-color: red;
+ position: absolute;
+ bottom: 0;
+ }
+ }
+
+ .timer {
+ background-color: #909090;
+ height: 30px;
+
+ text-align: right;
+ font-size: 22px;
+ padding-right: 5px;
+ color: white;
+ }
+ }
+}
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js
index 11e4bdf..d4db5f6 100644
--- a/assets/js/lustiges-script.js
+++ b/assets/js/lustiges-script.js
@@ -429,3 +429,88 @@ $(function() {
});
}, 1000*60);
});
+
+
+// multiviewer
+$(function() {
+ $('body.multiview')
+ .find('audio, video')
+ //.prop('muted', true)
+ .each(function(idx, player) {
+
+ var
+ $player = $(player),
+ $meter = $player.closest('.cell').find('.meter'),
+ $timer = $player.closest('.cell').find('.timer'),
+ ctx = new AudioContext(),
+ audioSrc = ctx.createMediaElementSource(player),
+ analyser = ctx.createAnalyser();
+
+ $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);
+ });
+
+ // 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 );
+ console.log(c);
+ $('<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!
+ // loop
+ 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);
+ }
+
+ requestAnimationFrame(renderFrame);
+ }
+ renderFrame();
+ });
+});