Frequency Transcription Application

以下が、お客様の要望に基づいたアプリケーションの実装例になります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Frequency Transcription Application</title>
    <style type="text/css">
      #canvas {
        width: 800px;
        height: 500px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>Frequency Transcription Application</h1>
    <p>Speak into your microphone to display the frequency as a wave.</p>
    <canvas id="canvas"></canvas>

    <script type="text/javascript">
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      var context = new AudioContext();
      var canvas = document.getElementById('canvas');
      var canvasCtx = canvas.getContext('2d');

      function visualize(stream) {
        var source = context.createMediaStreamSource(stream);
        var analyser = context.createAnalyser();
        analyser.fftSize = 2048;
        source.connect(analyser);
        var bufferLength = analyser.frequencyBinCount;
        var dataArray = new Uint8Array(bufferLength);

        function draw() {
          requestAnimationFrame(draw);
          analyser.getByteTimeDomainData(dataArray);
          canvasCtx.fillStyle = 'rgb(255, 255, 255)';
          canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
          canvasCtx.lineWidth = 2;
          canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
          canvasCtx.beginPath();
          var sliceWidth = canvas.width * 1.0 / bufferLength;
          var x = 0;
          for(var i = 0; i < bufferLength; i++) {
            var v = dataArray[i] / 128.0;
            var y = v * canvas.height/2;
            if(i === 0) {
              canvasCtx.moveTo(x, y);
            } else {
              canvasCtx.lineTo(x, y);
            }
            x += sliceWidth;
          }
          canvasCtx.lineTo(canvas.width, canvas.height/2);
          canvasCtx.stroke();
        }

        draw();
      }

      function handleError(error) {
        console.log('navigator.getUserMedia error: ', error);
      }

      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
      navigator.getUserMedia({audio: true}, visualize, handleError);
    </script>
  </body>
</html>

このアプリケーションは、音声を録音し、録音データを解析して周波数を計算し、波形を描画します。ユーザーは、マイクに向かって話して、波形がリアルタイムで表示されます。このアプリケーションは、getUserMedia APIを使用して、マイクへのアクセスを許可する必要があります。また、AudioContext APIを使用して、解析と視覚化を実現しています。