wip #5045 @1.1

diff --git a/resources/elearningmedia/js/app.js b/resources/elearningmedia/js/app.js
index 3b3cb729cbb00bb292f6e34175ab3fbec02ce5ff..1bde1c00039b2ae74939b156fb5ae5bc458409d2 100644 (file)
--- 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 (file)
index 0000000..e69de29

diff --git a/resources/elearningmedia/sass/app.sass b/resources/elearningmedia/sass/app.sass
index 06a91aec76c45fe3c6a7e2e91928991356b4842f..191b2daa25840c40d45b90fc80b324b5110f79fe 100644 (file)
--- 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 0b664d3593f3a2c4be6271ec100a62a630732e1f..19da5565187cc2ed68fa6666e99d225a6d3455b9 100644 (file)
--- a/resources/views/elearningmedia/index.blade.php
+++ b/resources/views/elearningmedia/index.blade.php
@@ -7,6 +7,8 @@
 </head>
 <body>
 @if($type==='audio')
+    <button type="button" id="audiobigplay" class="plyr__control plyr__control--overlaid" data-plyr="play" aria-label="Play"><svg aria-hidden="true" focusable="false"><use xlink:href="#plyr-play"></use></svg><span class="plyr__sr-only">Play</span></button>
+    <svg id="spectrum"></svg>
     <audio id="player" controls>
         <source src="media.mp3" type="audio/mp3"/>
     </audio>