| <body layout="column stretch-stretch"> | |
| <svg class='defs-only'> | |
| <defs> | |
| <g id="JB"> | |
| <path id="jb-profil" | |
| stroke="#000" fill="#fff" stroke-miterlimit="10" d="M258.9,94.3c1,0.8,1.199,2.6,0.699,6.4 | |
| c-0.699,5.6-0.3,6.2,4.801,7.3c2.5,0.5,3.1,1.1,3.1,3c0,2.6,2,3.1,5.8,1.5c1.7-0.7,1.8-0.3,1.601,4.1c-0.301,6.2,0.6,8.8,3.399,10.2 | |
| c2.601,1.3,10.2,2.9,17.2,3.7c9,1.1,13.2,2.6,16.6,6.1l3.2,3.3l-2.6,1c-1.5,0.6-2.7,1.5-2.7,2c0,2.1,6.5,8.3,11,10.6 | |
| c5.2,2.6,6.3,3.7,7.8,8c0.5,1.6,2.2,6.1,3.601,10c7,18.8,6.199,35.9-1.9,44.5c-1.3,1.4-2.5,3.9-2.8,5.6c-0.7,4.4-2,6.6-6.9,10.9 | |
| c-5.3,4.8-6.7,7.1-6.8,11.3c0,5.9-8.6,18.5-16.9,24.8c-2.399,1.9-4.699,3.4-5.1,3.4c-1.2,0,6.2-14.5,8.8-17.3 | |
| c2.2-2.4,2.4-2.9,1.2-3.7c-0.8-0.5-1.8-1-2.2-1c-1.399,0-4.6,4.2-5.3,6.8c-1.9,7.8-7.1,11.4-18,12.7c-8.5,1-9.9,1.2-11.6,1.9 | |
| c-1.7,0.699-7.801-2.301-15.601-7.5c-2.3-1.601-4.5-2.9-4.9-2.9s-2,1.2-3.6,2.7c-1.5,1.399-3.1,2.399-3.4,2c-1.3-1.3,0.7-5.7,3.3-7 | |
| l2.7-1.4l-2.3-1.2c-4.3-2.4-11.9-1.1-22.6,3.8c-4.9,2.3-11.3,3.699-14.2,3.3c-1.4-0.2-3.5-2.601-6.2-7.2c-7-11.8-8-9.9-3,5.7 | |
| c5,15.6,8.3,21,17.2,27.7c3.4,2.6,3.7,3.199,3.7,7.8c0,3.2,0.8,6.5,2.5,9.8c2.4,4.7,2.4,5.2,0.9,7.4c-2.4,3.8-4.7,15.8-3.1,16.8 | |
| c1.1,0.7,3.4,1.2,4.9,0.899c0.4,0,3-0.3,5.7-0.6c4.8-0.5,10.6-2.4,19.6-6.5c2.2-1,5.3-2.2,6.8-2.5c1.5-0.4,2.6-1.2,2.4-1.9 | |
| c-0.6-1.699-6-2.399-7.5-0.899c-0.7,0.7-2.5,1.3-4,1.3h-2.6l3.3-3c2.6-2.2,3.2-3.5,2.9-5.5c-0.3-1.4,0-2.9,0.6-3.3 | |
| c0.6-0.3,7-0.9,14.3-1.2c7.3-0.3,13.6-0.9,14-1.3c0.399-0.5,0.2-1.601-0.4-2.7c-1.1-1.6-0.8-2.1,2-3.7c3.4-1.899,8-4.1,11.2-5.3 | |
| c8.1-3.1,22.2-9.8,25.5-12.2c3.8-2.8,5.3-5.8,2.8-5.8c-0.6,0-0.3-0.9,0.7-2c2.8-3.1,3.5-2.4,3.5,3.4c0,10.1-6.9,19.3-14.6,19.5 | |
| c-3.801,0.1-4.9,1-2.801,2.6c1.4,0.9,0.9,1.6-3.1,5c-4,3.2-15.2,11.6-24.5,18.2c-43,30.899-70.3,58.2-89.1,89 | |
| c-4.3,7.2-4.4,7.3-8.5,7.3h-4.1l-0.6-7.3c-0.7-7.4,0.2-13.4,1.9-12.9c0.5,0.101,0.9,0.9,0.9,1.7s0.3,1.5,0.8,1.5c0.4,0,1.1,0,1.5,0 | |
| c0.9,0,3.7-8.4,4.6-14.2c0.8-4.399,2.2-5.7,3.1-2.8c0.3,1.1,1,2,1.4,2c1.1,0,3.1-4.7,3.9-9.4c0.9-5.199,0.9-22.8,0.1-28.1 | |
| c-1.3-7.5-3.1-15-4.4-17.5c-1-1.9-1.3-7.1-1-20c0.2-9.6,0.5-27,0.7-38.7c0.2-15.2,0.7-21.6,1.6-22.5c1.7-1.7,1.5-3-1.3-9.2 | |
| c-4.7-10.2-6.7-21.7-6.2-34.1c0.3-6,1.2-14.4,2.1-18.5c1.8-8.5,7.3-20.4,11.8-25.6c2.1-2.4,2.9-4.1,2.5-5.6 | |
| c-1.1-4.2,3.5-11.4,20.7-32.3c7.2-8.6,11.9-17.5,13-24.9c0.3-1.6,0.6-2.9,0.8-3.1c0.2-0.1,2.6-1.2,5.3-2.6 | |
| C246.3,92.3,255.5,91.5,258.9,94.3z"/> | |
| <g id="JB-face-front"> | |
| <path id="left-eys" d="M221.6,133.5c-3,2.8-3.4,5.5-0.7,5.5c1,0,2.1,0.7,2.5,1.5c0.3,0.8,1.6,1.5,2.8,1.5c4.2,0,6.3,1.1,9,4.7 | |
| c3.2,4.1,2.9,5.5-1,4.4c-1.5-0.5-3.6-0.7-4.7-0.5c-1.1,0.2-3.6,0.6-5.5,0.9c-10.3,1.5-14.9,3.8-13.7,7c0.5,1.2,1.1,1.4,2.6,0.5 | |
| c3.9-2.1,11.1,0,11.1,3.2c0,1.5,0.9,1.8,5.1,1.8c16.7,0,30.7-10.2,29.7-21.8c-0.3-3.2-0.7-3.7-2.8-3.8c-1.4,0-7.2-1.7-13-3.7 | |
| C230.4,130.3,225.4,130,221.6,133.5z"/> | |
| <path id="right-eye" d="M267.1,135.9c-2,1.3-1.6,5.6,0.801,8.7c1.899,2.4,2.101,3.6,1.5,8.1c-0.801,6.5,1.601,11.9,7.801,18 | |
| c4.1,4,15.8,11.3,18.1,11.3c0.602,0,1.9-0.7,2.9-1.6c1.7-1.6,2.2-1.5,8.2,1.5c5.6,2.7,12.6,4.2,12.6,2.5c0-0.3-1.4-2.3-3.2-4.5 | |
| c-2.2-2.8-5.5-5.1-10.8-7.5c-12.101-5.6-18-9.3-18-11.3c0-1.3,5.601-3.1,9.399-3.1c3.501,0,4.601,0.7,9.501,5.8 | |
| c3.1,3.2,7.698,8.6,10.398,12c4.602,6.1,9.2,10,10.3,8.9c0.302-0.3,0.602-2.6,0.602-5.1c0-14.3-18.7-29.5-41.9-34.1 | |
| c-7.6-1.5-12-2.3-13.5-2.4c-0.5-0.1-0.8-1.4-0.8-3C271,136.8,269.1,134.7,267.1,135.9z"/> | |
| <path id="nose" d="M233.2,179.3c-0.9,1.7-2.9,4.4-4.5,6c-1.5,1.6-2.5,3.2-2.2,3.7c0.3,0.4,5.1,0.8,10.6,0.9 | |
| c5.6,0.1,10.5,0.4,11,0.6c0.4,0.3,2.9,0.7,5.6,1c5.1,0.5,7.1,0.9,11.6,2c2.101,0.6,2.601,1.2,2.2,2.5c-0.7,2.1,0,2.7,4.3,3.5 | |
| c2.4,0.4,3.4,0.1,4.2-1.4c2.5-4.7-0.7-10-7.8-13.1c-4.8-2.2-15.8-2.7-19.3-0.9c-1.2,0.6-1.9,0.2-2.7-1.6c-1.1-2.4-5.6-5.3-9.4-6 | |
| C235.4,176.2,234.4,177,233.2,179.3z"/> | |
| <path id="_x0A_mouth" d="M231.5,201.9c-5.2,0.9-12.2,4.3-15.9,7.6c-2.5,2.3-2.8,3.1-2,5.3c0.9,2.4,1.4,2.7,4.9,2.4 | |
| c15.1-1.1,21.5-0.7,29.9,1.8c4.7,1.4,7.2,2,10.9,2.7c2,0.4,3.2,1.5,4.3,4.1c0.801,2,2.2,4.4,3,5.3c0.801,0.9,1.9,3,2.301,4.5 | |
| c0.699,2.7,1,2.8,6.199,2.7c7.301-0.2,8.9,0.4,8.9,3.2c0,4.5,1.8,7.5,4.5,7.5c3,0,3.1-0.9,0.7-5.2c-1.101-1.8-2.4-4.9-3.101-6.9 | |
| c-1.5-4.6-7.301-11.5-8.899-10.5c-0.601,0.3-0.9,1.4-0.601,2.4c0.5,1.5,0.399,1.5-0.5,0.2c-0.699-0.8-2.899-4.4-5.101-8 | |
| c-5.101-8.7-11.101-14.4-13.899-13.5c-1.5,0.4-2.301,0.1-2.701-1c-0.4-0.9-1.3-1.3-2.3-1.1c-0.9,0.3-2.3,0.1-3-0.4 | |
| c-0.9-0.5-2.2-0.5-3.3,0.1c-1.4,0.7-2,0.6-2.4-0.5c-0.5-1.3-5.7-3.8-7.3-3.5C235.8,201.2,233.7,201.6,231.5,201.9z"/> | |
| <path id="cheekbone-shadow" d="M284.4,210.6c0.3,1.1,0.8,3.3,1,5c1.3,7.4,7.699,20.1,9.5,18.9c0.5-0.3,0.3-2.6-0.4-5.3 | |
| c-0.8-2.6-1.9-6.5-2.4-8.8c-0.6-2.2-2.1-5.6-3.3-7.4C286.2,209.1,283.5,207.7,284.4,210.6z"/> | |
| <path id="labial-shadow" d="M231.2,228.9c-0.7,0.4-1.4,2.1-1.8,3.8c-0.6,3-0.5,3.1,4,3.7c4.2,0.7,4.6,1,4.6,3.5 | |
| c0,2.6,0.4,2.9,4.4,3.3c2.5,0.3,7.5,2,11.3,3.8c3.7,1.7,7.899,3.4,9.3,3.7c6.1,1.4,13-0.3,13-3.2c0-2-29.5-16.3-35.5-17.1 | |
| c-1.6-0.3-4.2-0.9-5.6-1.3C233.5,228.6,231.8,228.5,231.2,228.9z"/> | |
| <path id="voice" d="M220.3,337.8c-3.2,0.2-5.4,0.8-5.4,1.5c-0.5,3.9-0.4,13.9,0.1,14.7c0.9,1.5,7-3,9-6.9c1.1-2,2.7-4.6,3.6-5.8 | |
| c1.4-2,1.4-2.2-0.3-3C226.3,337.9,223.1,337.6,220.3,337.8z"/> | |
| </g> | |
| </defs> | |
| </svg> | |
| <div id="wrap" self="center" class="smoke"> | |
| <header id="header" self="top" style="height:10vh"> | |
| <div class="VU"> | |
| <div id="vu-left" class="vu-left"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </div> | |
| <div class="VU"> | |
| <div id="vu-right" class="vu-left"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </div> | |
| </header> | |
| <div id="flexmachine" self="center" style="height:80vh"> | |
| </div> | |
| <footer id="footer" self="size-x1 bottom" style="height:10vh; text-align: center"><i class="fa fa-microphone" aria-hidden="true"></i> | |
| Say it loud! <i class="fa fa-microphone" aria-hidden="true"></i> | |
| </footer> | |
| </div> | |
| <svg id="figure-2" class="animated zoomIn" width="100%" height="60%" style="position: absolute; top:20%; z-index: 0;" viewBox="165.5 88 183 338.5"> | |
| <use xlink:href="#JB" /> | |
| </svg> | |
| </body> |
| function setVU (value) { | |
| document.getElementById('vu-left').setAttribute('class', 'led'+value); | |
| document.getElementById('vu-right').setAttribute('class', 'led'+value); | |
| } | |
| function peakVU (peak) { | |
| if (peak) { | |
| document.getElementById('vu-left').setAttribute('style', 'background:red'); | |
| document.getElementById('vu-right').setAttribute('style', 'background:red'); | |
| document.getElementById('jb-profil').setAttribute('style', 'fill:red'); | |
| } | |
| else { | |
| document.getElementById('vu-left').setAttribute('style', 'background:black'); | |
| document.getElementById('vu-right').setAttribute('style', 'background:black'); | |
| document.getElementById('jb-profil').setAttribute('style', 'fill:black'); | |
| } | |
| } | |
| var audioContext = null; | |
| var meter = null; | |
| var rafID = null; | |
| window.onload = function() { | |
| // monkeypatch Web Audio | |
| window.AudioContext = window.AudioContext || window.webkitAudioContext; | |
| // grab an audio context | |
| audioContext = new AudioContext(); | |
| // Attempt to get audio input | |
| try { | |
| // monkeypatch getUserMedia | |
| navigator.getUserMedia = | |
| navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia; | |
| // ask for an audio input | |
| navigator.getUserMedia( | |
| { | |
| "audio": { | |
| "mandatory": { | |
| "googEchoCancellation": "false", | |
| "googAutoGainControl": "false", | |
| "googNoiseSuppression": "false", | |
| "googHighpassFilter": "false" | |
| }, | |
| "optional": [] | |
| }, | |
| }, gotStream, didntGetStream); | |
| } catch (e) { | |
| alert('getUserMedia threw exception :' + e); | |
| } | |
| } | |
| function didntGetStream() { | |
| alert('Stream generation failed.'); | |
| } | |
| var mediaStreamSource = null; | |
| function gotStream(stream) { | |
| // Create an AudioNode from the stream. | |
| mediaStreamSource = audioContext.createMediaStreamSource(stream); | |
| // Create a new volume meter and connect it. | |
| meter = createAudioMeter(audioContext); | |
| mediaStreamSource.connect(meter); | |
| // kick off the visual updating | |
| drawLoop(); | |
| } | |
| function drawLoop( time ) { | |
| // clear the background | |
| //canvasContext.clearRect(0,0,WIDTH,HEIGHT); | |
| // check if we're currently clipping | |
| if (meter.checkClipping()) | |
| peakVU(true); | |
| else | |
| peakVU(false); | |
| setVU( Math.round(10*meter.volume*2) ); | |
| // set up the next visual callback | |
| rafID = window.requestAnimationFrame( drawLoop ); | |
| } | |
| /* | |
| see: https://webaudiodemos.appspot.com/volume-meter/index.html | |
| The MIT License (MIT) | |
| Copyright (c) 2014 Chris Wilson | |
| Permission is hereby granted, free of charge, to any person obtaining a copy | |
| of this software and associated documentation files (the "Software"), to deal | |
| in the Software without restriction, including without limitation the rights | |
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| copies of the Software, and to permit persons to whom the Software is | |
| furnished to do so, subject to the following conditions: | |
| The above copyright notice and this permission notice shall be included in all | |
| copies or substantial portions of the Software. | |
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |
| SOFTWARE. | |
| */ | |
| /* | |
| Usage: | |
| audioNode = createAudioMeter(audioContext,clipLevel,averaging,clipLag); | |
| audioContext: the AudioContext you're using. | |
| clipLevel: the level (0 to 1) that you would consider "clipping". | |
| Defaults to 0.98. | |
| averaging: how "smoothed" you would like the meter to be over time. | |
| Should be between 0 and less than 1. Defaults to 0.95. | |
| clipLag: how long you would like the "clipping" indicator to show | |
| after clipping has occured, in milliseconds. Defaults to 750ms. | |
| Access the clipping through node.checkClipping(); use node.shutdown to get rid of it. | |
| */ | |
| function createAudioMeter(audioContext,clipLevel,averaging,clipLag) { | |
| var processor = audioContext.createScriptProcessor(512); | |
| processor.onaudioprocess = volumeAudioProcess; | |
| processor.clipping = false; | |
| processor.lastClip = 0; | |
| processor.volume = 0; | |
| processor.clipLevel = clipLevel || 0.98; | |
| processor.averaging = averaging || 0.95; | |
| processor.clipLag = clipLag || 750; | |
| // this will have no effect, since we don't copy the input to the output, | |
| // but works around a current Chrome bug. | |
| processor.connect(audioContext.destination); | |
| processor.checkClipping = | |
| function(){ | |
| if (!this.clipping) | |
| return false; | |
| if ((this.lastClip + this.clipLag) < window.performance.now()) | |
| this.clipping = false; | |
| return this.clipping; | |
| }; | |
| processor.shutdown = | |
| function(){ | |
| this.disconnect(); | |
| this.onaudioprocess = null; | |
| }; | |
| return processor; | |
| } | |
| function volumeAudioProcess( event ) { | |
| var buf = event.inputBuffer.getChannelData(0); | |
| var bufLength = buf.length; | |
| var sum = 0; | |
| var x; | |
| // Do a root-mean-square on the samples: sum up the squares... | |
| for (var i=0; i<bufLength; i++) { | |
| x = buf[i]; | |
| if (Math.abs(x)>=this.clipLevel) { | |
| this.clipping = true; | |
| this.lastClip = window.performance.now(); | |
| } | |
| sum += x * x; | |
| } | |
| // ... then take the square root of the sum. | |
| var rms = Math.sqrt(sum / bufLength); | |
| // Now smooth this out with the averaging factor applied | |
| // to the previous sample - take the max here because we | |
| // want "fast attack, slow release." | |
| this.volume = Math.max(rms, this.volume*this.averaging); | |
| } |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/device.js/0.2.7/device.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| svg.defs-only {display:none;} | |
| html { | |
| position: relative; | |
| min-height: 100; | |
| font-size: 10px; | |
| color: #400080; | |
| background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0); | |
| background-size: 20px 20px; | |
| background-position: 0px 0px, 10px 10px; | |
| background: transparent; | |
| } | |
| body { | |
| font-family: 'Comfortaa', sans-serif; | |
| font-size: 1.6em; | |
| line-height: 1.5; | |
| font-weight: lighter; | |
| font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| color: #fff; | |
| background-color: #2d2343; | |
| } | |
| .pace { | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .pace-inactive { | |
| display: none; | |
| } | |
| .pace .pace-progress { | |
| background: #e3cc3c; | |
| position: fixed; | |
| top: 0rem; | |
| z-index: 2000; | |
| right: 100%; | |
| width: 100%; | |
| height: .5rem; | |
| } | |
| #jb-profil { | |
| fill: #FFF; | |
| } | |
| /** | |
| http://dabblet.com/gist/e324a92d31b7f67da5c0 | |
| * Static interpolation via paused animations | |
| * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum | |
| * Currently works in every modern browser except Safari | |
| */ | |
| @keyframes VU { | |
| 0% { background: green } | |
| 50% { background: yellowgreen } | |
| 67% { background: yellow } | |
| 83% { background: orange } | |
| 100% { background: red } | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: black; | |
| } | |
| .POT div, | |
| .VU div { | |
| display: flex; | |
| background: black; | |
| min-height: 8px; | |
| /*height: 10vw;*/ | |
| margin: 0; | |
| } | |
| .vu-left { | |
| padding: 1px 0 0 0; | |
| } | |
| .vu-right { | |
| padding: 0 0 1px 0; | |
| } | |
| .VU div>div { | |
| display: block; | |
| width: calc(10% - 4px); | |
| margin: 2px; | |
| height: calc(100% - 4px); | |
| animation: VU 1s both linear; | |
| animation-play-state: paused; | |
| border-radius: 3px; | |
| } | |
| .VU div>div:nth-of-type(2) { animation-delay: -.2s; } | |
| .VU div>div:nth-of-type(3) { animation-delay: -.3s; } | |
| .VU div>div:nth-of-type(4) { animation-delay: -.4s; } | |
| .VU div>div:nth-of-type(5) { animation-delay: -.5s; } | |
| .VU div>div:nth-of-type(6) { animation-delay: -.6s; } | |
| .VU div>div:nth-of-type(7) { animation-delay: -.7s; } | |
| .VU div>div:nth-of-type(8) { animation-delay: -.8s; } | |
| .VU div>div:nth-of-type(9) { animation-delay: -.9s; } | |
| .VU div>div:nth-of-type(10) { animation-delay: -1s; } | |
| .led0 div:nth-of-type(n+1), | |
| .led1 div:nth-of-type(n+2), | |
| .led2 div:nth-of-type(n+3), | |
| .led3 div:nth-of-type(n+4), | |
| .led4 div:nth-of-type(n+5), | |
| .led5 div:nth-of-type(n+6), | |
| .led6 div:nth-of-type(n+7), | |
| .led7 div:nth-of-type(n+8), | |
| .led8 div:nth-of-type(n+9), | |
| .led9 div:nth-of-type(n+10), | |
| .led10 div:nth-of-type(n+11) { | |
| opacity: 0; | |
| } | |
| input[type='range'] { | |
| } | |
| .POT div div { | |
| display: block; | |
| width: calc(10% - 4px); | |
| margin: 2px; | |
| height: calc(10vw - 4px); | |
| border-radius: 50%; | |
| border: 2px solid #333; | |
| color: transparent; | |
| text-align: center; | |
| } | |
| #wrap { | |
| /* Margin top by Header height */ | |
| width: 100vw; | |
| } | |
| #figure-1 { | |
| } | |
| .wrap { | |
| } | |
| @media only screen and (orientation: landscape) { | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> | |
| <link href="https://cdn.rawgit.com/StefanKovac/flex-layout-attribute/master/css/flex-layout-attribute.min.css" rel="stylesheet" /> |
javacsript volume-meter + css colors wiyh static interpolation via paused animations see: https://webaudiodemos.appspot.com/volume-meter/index.html (@Chris Wilson) see: http://dabblet.com/gist/e324a92d31b7f67da5c0( @Lea Verou)
A Pen by Hubert Souchaud on CodePen.