概要

下みたいなやつ(マイク入力の音量をプレビューするやつ)をJavaScriptとCSSを使って作る.

中身

マイクの画像はFont Awesomeのアイコン,マイクの音量取得とかはAudioManager.jsをつかってます.

test.html

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  <style>
    .volume-viewer {
      margin: 50px auto 0;
      width: 128px;
      height: 128px;
      position: relative;
      text-align: center;
      line-height: 140px;
      font-size: 80px;
      border: 3px solid #888;
      border-radius: 50%;
      color: #888;
    }
    .volume-viewer-volume {
      width: 140px;
      height: 140px;
      position: absolute;
      border-radius: 50%;
      border: 4px solid #888;
      top: -10px;
      left: -10px;
      z-index: -1;
    }
  </style>
</head>
<body>

  <div class="volume-viewer">
    <i class="fa fa-microphone" aria-hidden="true"></i>
    <div class="volume-viewer-volume"></div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="./audioManager.min.js"></script>
  <script>
    var manager;
    manager = (new AudioManager({
      useMicrophone: true,
      onEnterFrame: function() {
        var volume = Utils.sum(this.analysers.mic.getByteFrequencyData());
        var size = (140 + volume/1000); // 1000は適当(小さくすると円が大きくなる)
        var adj = (128-size)/2 - 4; // 4はborderの大きさ

        $('.volume-viewer-volume')
          .css('height', size + 'px')
          .css('width', size + 'px')
          .css('top', adj + 'px')
          .css('left', adj + 'px')
      }
    })).init();
  </script>
</body>
</html>

雑な説明

AudioManagerで音量を拾ってくる.
音量を適当な大きさに変換したりして,jQueryで外枠の大きさを変える.

結論

AudioManager.jsを使えばかなり簡単にマイク音量とか見れる.

その他

http://*だとセキュリティ云々でマイクやビデオの取得ができない罠があるのでご注意.
わりとこの仕様にはまって動いていないサンプルサイトとかかなり多いです.
(https://*,localhost,ローカルファイルならマイクの取得はできる)

宣伝

フォローお願いします @redshoga