From b8f35bbafbcbc564d2587a82d6bc39e458b365ae Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 8 Feb 2022 18:31:17 +0100 Subject: [PATCH] wip #5045 @1.1 --- resources/elearningmedia/js/app.js | 145 +++++++++++++++++- resources/elearningmedia/js/spectrum.js | 0 resources/elearningmedia/sass/app.sass | 15 +- .../views/elearningmedia/index.blade.php | 2 + 4 files changed, 159 insertions(+), 3 deletions(-) create mode 100644 resources/elearningmedia/js/spectrum.js diff --git a/resources/elearningmedia/js/app.js b/resources/elearningmedia/js/app.js index 3b3cb729c..1bde1c000 100644 --- a/resources/elearningmedia/js/app.js +++ b/resources/elearningmedia/js/app.js @@ -4,9 +4,19 @@ import Plyr from 'plyr'; window.openTime = Date.now(); - document.addEventListener("DOMContentLoaded", function () { - window.player = new Plyr('#player'); + var media = document.getElementById('player'); + window.player = new Plyr(media); + if (media.tagName.toLowerCase() === 'audio') { + window.spectrum = new Spectrum(media); + } + + var audiobigplay = document.getElementById('audiobigplay'); + audiobigplay.addEventListener('click', function () { + player.play(); + audiobigplay.style.display = 'none'; + return false; + }); SCORM.init(); @@ -55,3 +65,134 @@ function finishScorm(quit) { window.addEventListener('unload', function (event) { finishScorm(); }); + +function Spectrum(element) { + this.started = false; + this.element = element; + this.init(); +} + +Spectrum.prototype = { + init: function () { + var $this = this; + + this.svg = document.getElementById('spectrum'); + this.svgNS = this.svg.namespaceURI; + this.g = document.createElementNS(this.svgNS, "g"); + + window.addEventListener('resize', function () { + $this.resize(); + }); + this.resize(); + + + this.fftSize = 512; + this.tilt = 0; + this.choke = 100; + this.c = 0; + + + this.svg.appendChild(this.g); + + this.setup(); + }, + + setup: function () { + var $this = this; + this.element.addEventListener('loadeddata', function (e) { + $this.start(); + }); + this.element.addEventListener('play', function (e) { + $this.start(); + }); + this.element.addEventListener('canplay', function (e) { + $this.start(); + }); + + }, + + resize: function () { + this.width = window.innerWidth; + this.height = window.innerHeight - 52; + this.maxHeight = Math.max(this.height * 0.3, 300); + this.svg.setAttribute("width", this.width + "px"); + this.svg.setAttribute("height", this.height + "px"); + this.svg.setAttribute("viewBox", "0 0 " + this.width + " " + this.height); + }, + + start: function () { + if (this.started) { + return; + } + this.resize(); + this.started = true; + + this.audioContext = new AudioContext(); + this.analyser = (this.analyser || this.audioContext.createAnalyser()); + this.analyser.minDecibels = -90; + this.analyser.maxDecibels = -10; + this.analyser.smoothingTimeConstant = 0.9; + this.analyser.fftSize = this.fftSize; + + this.sourceNode = this.audioContext.createMediaElementSource(document.getElementById("player")); + this.sourceNode.connect(this.analyser); + this.sourceNode.connect(this.audioContext.destination); + + this.update(); + }, + + update: function () { + var $this = this; + try { + this.g.remove(); + } catch (e) { + + } + this.g = document.createElementNS(this.svgNS, "g"); + var freqArray = new Uint8Array(this.analyser.frequencyBinCount); + this.analyser.getByteTimeDomainData(freqArray); + + for (var i = 0; i < freqArray.length; i++) { + var v = freqArray[i]; + this.shape(this.g, v, i + 1, freqArray.length, this.c); + } + this.svg.appendChild(this.g); + + this.c += 0.5; + requestAnimationFrame(function () { + $this.update(); + }); + }, + + shape: function (g, freqValue, freqSequence, freqCount, colorSequence) { + var freqRatio = freqSequence / freqCount, x = (this.width - (this.tilt * 2)) * freqRatio + this.tilt, + y = this.height / 2; + + var polyline = document.createElementNS(this.svgNS, "polyline"), // using power to increase highs and decrease lows + freqRatio = freqValue / 255, throttledRatio = (freqValue - this.choke) / (255 - this.choke), + strokeWidth = this.width / freqCount * 0.6 * throttledRatio, + throttledY = Math.max(throttledRatio, 0) * this.maxHeight, // color + color = "rgba(255,255,255,0.8)"; + + var loc_x = x - strokeWidth / 2, loc_y1 = y - throttledY / 2, loc_y2 = y + throttledY / 2, + x_offset = this.tilt * throttledRatio; + + if (throttledRatio > 0) { + var point_1 = (loc_x - x_offset) + "," + loc_y1, point_2 = (loc_x + x_offset) + "," + loc_y2; + var points = [point_1, point_2]; + } else { + var points = [loc_x + "," + (y - 1), loc_x + "," + (y + 1)] + } + + polyline.setAttribute("stroke-width", strokeWidth); + polyline.setAttribute("stroke", color); + polyline.setAttribute("points", points.join(" ")); + this.g.appendChild(polyline); + }, + + +} + + + + diff --git a/resources/elearningmedia/js/spectrum.js b/resources/elearningmedia/js/spectrum.js new file mode 100644 index 000000000..e69de29bb diff --git a/resources/elearningmedia/sass/app.sass b/resources/elearningmedia/sass/app.sass index 06a91aec7..191b2daa2 100644 --- a/resources/elearningmedia/sass/app.sass +++ b/resources/elearningmedia/sass/app.sass @@ -6,17 +6,30 @@ box-sizing: border-box -html,body +html, body width: 100% height: 100% overflow: hidden body font-family: Arial, Helvetica, sans-serif + background-color: #0E2231 video, audio width: 100% height: 100% +#audiobigplay + display: block + .plyr + position: absolute + top: 0 + left: 0 height: 100% + width: 100% + + &.plyr--audio + height: 52px + top: auto + bottom: 0 diff --git a/resources/views/elearningmedia/index.blade.php b/resources/views/elearningmedia/index.blade.php index 0b664d359..19da55651 100644 --- a/resources/views/elearningmedia/index.blade.php +++ b/resources/views/elearningmedia/index.blade.php @@ -7,6 +7,8 @@ @if($type==='audio') + + -- 2.39.5