前提・実現したいこと
AnalyserNodeを使って音声を取得したい
現在、大学院の研究にて音声をマイクから取得して、それを画面上に出力するような研究をしています。
そこで、qiitaの記事などを参考にコードを書いてみたのですが、画面に表示はされるものの動作がうまくいかず反応しません。そこでAnalyserNodeに詳しい方にコードレビューしていただきたいです。
発生している問題・エラーメッセージ
エラーは出ていない。
画面に表示はされるものの動作がうまくいかず反応しない。
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas" width="500" height="200" style="border:1px solid #000000;"></canvas><br> <button id="startButton">Start</button> <span id="errorMessage"></span> <script> var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var analyser = audioCtx.createAnalyser(); let canvasCtx = canvas.getContext("2d"); let WIDTH = canvas.width; let HEIGHT = canvas.height; let stream; startButton.onclick = async function () { if (stream) return; try { stream = await navigator.mediaDevices.getUserMedia({ audio: true }); audioCtx.createMediaStreamSource(stream).connect(analyser); } catch (err) { errorMessage.textContent = err.toString(); } }; analyser.fftSize = 2048; var bufferLength = analyser.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); analyser.getByteTimeDomainData(dataArray); // draw an oscilloscope of the current audio source function draw() { drawVisual = requestAnimationFrame(draw); analyser.getByteTimeDomainData(dataArray); canvasCtx.fillStyle = "rgb(200, 200, 200)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; canvasCtx.strokeStyle = "rgb(0, 0, 0)"; canvasCtx.beginPath(); var sliceWidth = (WIDTH * 1.0) / bufferLength; var x = 0; for (var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = (v * 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(); </script> </body> </html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー