Sample is best!
Sample is best!
開発環境 メモ帳
実行環境 Internet Explorer 11


WavView.html 
<!doctype html>
<head>
<title>WavView</title>
</head>
 
<body>
<div id="drop" style="height:300px; padding:10px; border:3px solid;"
 ondragover="onDragOver(event)" ondrop="onDrop(event)">
ここにwavファイルをドロップします。
</div>
<br>
<table border=1>
<tr><td>
<svg id="svg" preserveAspectRatio="none">
</svg>
</td></tr>
</table>
<script>
 
var svg;
 
function onDrop(event)
{
	event.preventDefault();
 
	svg = document.getElementById("svg");
	while (svg.firstChild) {
		svg.removeChild(svg.firstChild);
	}
 
	var files = event.dataTransfer.files;
	var file = files[0];
	var drop = document.getElementById("drop");
 
	var str = "";
	str += "name=[" + file.name + "]<br>";
	str += "type=[" + file.type + "]<br>";
	str += "size=[" + file.size + "]<br>";
	drop.innerHTML = str;
 
	if (file.type != "audio/wav") {
		drop.innerHTML += "wavファイルではありません。";
		return;
	}
 
	var reader = new FileReader();
	reader.onload = onLoad;
	reader.readAsArrayBuffer(file);
}
 
function onDragOver(event)
{
	event.preventDefault();
}
 
function onLoad(event)
{
	var buf = event.target.result;
	var dv = new DataView(buf);
	var pos = 0;
	var drop = document.getElementById("drop");
 
	// RIFFチャンク
	{
		var ckid = fourcc(dv, 0); // RIFF
		var cksize = dv.getUint32(4, true);
		var fccType = fourcc(dv, 8); // WAVE
		pos += 12;
 
		var str = "";
		str += "<br>";
		str += "ckid=[" + ckid + "]<br>";
		str += "cksize=[" + cksize + "]<br>";
		str += "fccType=[" + fccType + "]<br>";
		drop.innerHTML += str;
	}
 
	while (pos < buf.byteLength) {
		var ckid = fourcc(dv, pos + 0);
		var cksize = dv.getUint32(pos + 4, true);
		pos += 8;
 
		var str = "";
		str += "<br>";
		str += "ckid=[" + ckid + "]<br>";
		str += "cksize=[" + cksize + "]<br>";
		drop.innerHTML += str;
 
		switch (ckid) {
		case "fmt ": {
				// WAVEFORMAT
				var wFormatTag = dv.getUint16(pos + 0, true);
				var nChannels = dv.getUint16(pos + 2, true);
				var nSamplesPerSec = dv.getUint32(pos + 4, true);
				var nAvgBytesPerSec = dv.getUint32(pos + 8, true);
				var nBlockAlign = dv.getUint16(pos + 12, true);
				var wBitsPerSample = dv.getUint16(pos + 14, true);
 
				var str = "";
				str += "wFormatTag=[" + wFormatTag + "]<br>";
				str += "nChannels=[" + nChannels + "]<br>";
				str += "nSamplesPerSec=[" + nSamplesPerSec + "]<br>";
				str += "nAvgBytesPerSec=[" + nAvgBytesPerSec + "]<br>";
				str += "nBlockAlign=[" + nBlockAlign + "]<br>";
				str += "wBitsPerSample=[" + wBitsPerSample + "]<br>";
				drop.innerHTML += str;
			}
			break;
		case "data":
			dataChunk(dv, pos, cksize);
			break;
		}
 
		pos += cksize;
	}
}
 
function fourcc(dv, pos)
{
	var str = "";
	for (var i = 0; i < 4; i++) {
		str += String.fromCharCode(dv.getUint8(pos + i));
	}
	return str;
}
 
function dataChunk(dv, pos, cksize)
{
	svg.setAttribute("width", Math.floor(cksize / 10));
	svg.setAttribute("height", 256);
	svg.setAttribute("viewBox", "0 0 " + cksize + " 256");
 
	for (var i = 0; i < cksize; i++) {
		var n = dv.getUint8(pos + i);
		append("line", {x1:i, y1:128, x2:i, y2:255 - n, stroke:"blue"});
	}
}
 
function append(type, attr)
{
	var e = document.createElementNS("http://www.w3.org/2000/svg", type);
	for (var n in attr) {
		e.setAttribute(n, attr[n]);
	}
	svg.appendChild(e);
}
 
</script>
</body>
 
「WavView」をウィキ内検索
最終更新：2014年10月09日 20:24