Created
June 18, 2016 01:56
-
-
Save chris373/adad627fba60f6d1f8577813ee76edc8 to your computer and use it in GitHub Desktop.
Microphone level visualizer based on code from https://codepen.io/zapplebee/pen/gbNbZE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <!-- Based on the code listed on this code pen project: https://codepen.io/zapplebee/pen/gbNbZE --> | |
| <svg preserveAspectRatio="none" id="visualizer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <defs> | |
| <mask id="mask"> | |
| <g id="maskGroup"> | |
| </g> | |
| </mask> | |
| <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#ff0a0a;stop-opacity:1" /> | |
| <stop offset="20%" style="stop-color:#f1ff0a;stop-opacity:1" /> | |
| <stop offset="90%" style="stop-color:#d923b9;stop-opacity:1" /> | |
| <stop offset="100%" style="stop-color:#050d61;stop-opacity:1" /> | |
| </linearGradient> | |
| </defs> | |
| <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" mask="url(#mask)"></rect> | |
| </svg> | |
| <h1>In <a href="http://codepen.io/zapplebee/full/gbNbZE/">Full Page view</a>, please allow the use of your microphone</h1> | |
| <style> | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| background-color:#222; | |
| font-size: 0; | |
| } | |
| svg{ | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| position:absolute; | |
| } | |
| h1{ | |
| width: 100%; | |
| font-family: sans-serif; | |
| position:absolute; | |
| text-align:center; | |
| color:white; | |
| font-size: 18px; | |
| top: 40%; | |
| opacity: 1; | |
| transition: opacity 1s ease-in-out; | |
| -moz-transition: opacity 1s ease-in-out; | |
| -webkit-transition: opacity 1s ease-in-out; | |
| } | |
| h1 a{ | |
| color: #48b1f4; | |
| text-decoration:none; | |
| } | |
| path{ | |
| stroke-linecap: square; | |
| stroke: white; | |
| stroke-width: 0.5px; | |
| } | |
| </style> | |
| <script> | |
| window.onload = function () { | |
| alert('this requries using firefox, and enabling your microphone'); | |
| "use strict"; | |
| var paths = document.getElementsByTagName('path'); | |
| var visualizer = document.getElementById('visualizer'); | |
| var mask = visualizer.getElementById('mask'); | |
| var h = document.getElementsByTagName('h1')[0]; | |
| var path; | |
| var report = 0; | |
| var soundAllowed = function (stream) { | |
| //Audio stops listening in FF without // window.persistAudioStream = stream; | |
| //https://bugzilla.mozilla.org/show_bug.cgi?id=965483 | |
| //https://support.mozilla.org/en-US/questions/984179 | |
| window.persistAudioStream = stream; | |
| h.innerHTML = "Thanks"; | |
| h.setAttribute('style', 'opacity: 0;'); | |
| var audioContent = new AudioContext(); | |
| var audioStream = audioContent.createMediaStreamSource( stream ); | |
| var analyser = audioContent.createAnalyser(); | |
| audioStream.connect(analyser); | |
| analyser.fftSize = 1024; | |
| var frequencyArray = new Uint8Array(analyser.frequencyBinCount); | |
| visualizer.setAttribute('viewBox', '0 0 255 255'); | |
| //Though the frequencyArray has a length longer than 255, there seems to be no | |
| //significant data after this point. Not worth visualizing. | |
| for (var i = 0 ; i < 255; i++) { | |
| path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); | |
| path.setAttribute('stroke-dasharray', '4,1'); | |
| mask.appendChild(path); | |
| } | |
| var doDraw = function () { | |
| requestAnimationFrame(doDraw); | |
| analyser.getByteTimeDomainData(frequencyArray); | |
| var adjustedLength; | |
| var fastring = ''; | |
| for (var i = 0 ; i < 255; i++) { | |
| adjustedLength = Math.floor(frequencyArray[i]); | |
| adjustedLength -= 127; | |
| paths[i].setAttribute('d', 'M '+ (i) +',127 l 0,' + adjustedLength); | |
| } | |
| //alert(fastring); | |
| } | |
| doDraw(); | |
| } | |
| var soundNotAllowed = function (error) { | |
| h.innerHTML = "You must allow your microphone."; | |
| console.log(error); | |
| } | |
| window.navigator = window.navigator || {}; | |
| navigator.getUserMedia = navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia || | |
| null; | |
| navigator.getUserMedia({audio:true}, soundAllowed, soundNotAllowed); | |
| }; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment