URLベースなボリュームメーターを作ってみる #JavaScript

概要

twitterで面白いものを見つけたので、共有します。

それは、URLフォームに再現される、ボリュームメータ？（バー）です。
あれの名前は何なんだろう。

作るもの

when your friend throws you a dumb idea like a URL-based graphic eq, don't think twice, just do it. pic.twitter.com/gBOQR2Ews9
— jake albaugh (@jake_albaugh) April 17, 2019

URLフォームに動的にボリュームが表現されます。面白い。

コード

これで終わり！

以下を保存してopenコマンドで開けば終わり！

<html>
  <script>
    var l = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
    var x = new AudioContext();
    var a = x.createAnalyser();
    a.fftSize = 32;
    var d = new Uint8Array(16);
    navigator.mediaDevices.getUserMedia({ audio: true }).then(s => {
      x.createMediaStreamSource(s).connect(a);
      z();
    });
    function z() {
      setTimeout(z, 40);
      a.getByteFrequencyData(d);
      var s = [];
      d.forEach(v => s.push(l[Math.floor((v / 255) * 8)]));
      location.hash = document.title = s.join("");
    }
  </script>
</html>

注意

chromeだと以下の警告が出て、動かないです。
Firefoxで動作確認済みです。

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu