diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/_structure.less | 34 | ||||
| -rw-r--r-- | assets/js/lustiges-script.js | 85 |
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(); + }); +}); |