音声波形の拡大表示 – プログラム例
今回の音声の波形は、特に時間いっぱい（60000点分）録音されている場合に、波形の細かいところが潰れて見えなくなってしまいます。
ここでは、音声波形表示ページにグラフをもうひとつ設け、メインの波形グラフのある箇所がクリックされた際に、その周辺の波形をもうひとつのグラフに拡大表示（時間軸方向）するようにしてみましょう。
以下にコードの作成例を示します。ここでは、クリックされた点の前後あわせて0.1秒分を拡大表示用グラフに表示するようにしています。
コード例26-5 analysis.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音声解析</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/analysis.js"></script>
</head>
<body>
<h1>音声解析</h1>
<div>
<button id="update">更新</button>
</div>
<div class="graph">
<canvas id="wave"></canvas>
</div>
<div class="graph">
<canvas id="zoom"></canvas>
</div>
</body>
</html>
Code language: HTML, XML (xml)コード例26-5 js/analysis.js
// 読み込み完了時に実行
window.addEventListener("load", function() {
// 「更新」ボタンの取得
const update = document.getElementById("update");
// 音声グラフ表示canvasの取得
const wave = document.getElementById("wave");
// 音声グラフ拡大表示canvasの取得
const zoom = document.getElementById("zoom");
// キャンバスサイズの調整
wave.setAttribute("width", wave.parentNode.clientWidth);
wave.setAttribute("height", 200);
zoom.setAttribute("width", zoom.parentNode.clientWidth);
zoom.setAttribute("height", 200);
// 音声データ
let d = [];
// 「更新」ボタンが押された時の処理
update.onclick = function() {
Code language: JavaScript (javascript) // 音声再生を開始
source.start();
//// 音声波形の拡大表示
// マウスのX座標の取得
const mouseX = e.clientX;
// クリックされたグラフ上のx座標の取得
const x = (mouseX-zoom.offsetLeft)/zoom.offsetWidth;
// 表示する点数
const n = 22050*0.1; 0.1秒ぶん表示
// 表示する最小の点の取得
let i0 = Math.trunc(x*d.length - n/2);
if(i0<0) i0 = 0;
// 表示する最大の点+1の取得
let i1 = i0 + n;
if(i1>d.length) i1 = d.length;
console.log(i0, i1, d.length, x);
if(i1-i0==0) return;
// zoomキャンバスへの波形の描写
if(zoom.getContext) {
// キャンバスのコンテキストの取得
const ctx = zoom.getContext("2d");
// キャンバスをクリア
ctx.clearRect(0, 0, zoom.clientWidth, zoom.clientHeight);
// 波形データの描写パスを開始
ctx.beginPath();
// 波形データの各点を描写
for(let i=i0;i<i1;i++) {
// 波形データの各点の描写を設定
let x = zoom.clientWidth*(i-i0)/(i1-i0);
let y = zoom.clientHeight - zoom.clientHeight*d[i]/256;
ctx.lineTo(x, y);
console.log(x, y);
}
// パスの色の設定
ctx.strokeStyle = "blue";
// パスの描写
ctx.stroke();
}
};
});
Code language: JavaScript (javascript)
プログラムができたら、音声波形表示ページ
を再読み込みして再度音声を取得し、音声波形のグラフが表示されたらグラフをクリックしてみましょう。
拡大表示用グラフに音声波形は拡大表示されましたか？
