Skip to content

Instantly share code, notes, and snippets.

@mkopa

mkopa/html-5-microphone-visualizer.markdown

Created April 21, 2022 13:28
Show Gist options
  • Save mkopa/2759f96c543f520c067ebfdcfec54642 to your computer and use it in GitHub Desktop.
Save mkopa/2759f96c543f520c067ebfdcfec54642 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mkopa created this gist Apr 21, 2022.
    7 changes: 7 additions & 0 deletions html-5-microphone-visualizer.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    HTML 5 Microphone Visualizer
    ----------------------------


    A [Pen](https://codepen.io/zapplebee/pen/gbNbZE) by [Zachary Skalko](https://codepen.io/zapplebee) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/gbNbZE).
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <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="https://codepen.io/zapplebee/full/gbNbZE/">Full Page view</a>, please allow the use of your microphone</h1>
    58 changes: 58 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    window.onload = function () {
    "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');

    //Through 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.getByteFrequencyData(frequencyArray);
    var adjustedLength;
    for (var i = 0 ; i < 255; i++) {
    adjustedLength = Math.floor(frequencyArray[i]) - (Math.floor(frequencyArray[i]) % 5);
    paths[i].setAttribute('d', 'M '+ (i) +',255 l 0,-' + adjustedLength);
    }

    }
    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);

    };
    43 changes: 43 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    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;
    }