pingyen/wavHeader.html

## wavHeader.html
<!DOCTYPE>
<html>
<head>
<title>WAV Header</title>
<script>
	var buildWaveHeader = function(opts) {
		var numFrames = opts.numFrames,
			numChannels = opts.numChannels || 2,
			sampleRate = opts.sampleRate || 44100,
			bytesPerSample = opts.bytesPerSample || 2,
			blockAlign = numChannels * bytesPerSample,
			byteRate = sampleRate * blockAlign,
			dataSize = numFrames * blockAlign;

		var buffer = new ArrayBuffer(44),
			dv = new DataView(buffer),
			p = 0;

		var writeString = function(s) {
			for (var i = 0; i < s.length; i++) {
				dv.setUint8(p + i, s.charCodeAt(i));
			}

			p += s.length;
		}

		var writeUint32 = function(d) {
			dv.setUint32(p, d, true);
			p += 4;
		}

		var writeUint16 = function(d) {
			dv.setUint16(p, d, true);
			p += 2;
		}

		writeString('RIFF');              // ChunkID
		writeUint32(dataSize * 960 + 36); // ChunkSize
		writeString('WAVE');              // Format
		writeString('fmt ');              // Subchunk1ID
		writeUint32(16);                  // Subchunk1Size
		writeUint16(1);                   // AudioFormat
		writeUint16(numChannels);         // NumChannels
		writeUint32(sampleRate);          // SampleRate
		writeUint32(byteRate);            // ByteRate
		writeUint16(blockAlign);          // BlockAlign
		writeUint16(bytesPerSample * 8);  // BitsPerSample
		writeString('data');              // Subchunk2ID
		writeUint32(dataSize * 960);      // Subchunk2Size

		return buffer;
	}
</script>
</head>
<body>
<h2>WAV Header</h2>
<article>
	<h2>1 Frame WAV Header</h2>
	<script>
		var buffer = buildWaveHeader({ numFrames: 1 });

		var stringify = function(view) {
			return '[' + Array.prototype.slice.call(view).join(', ') + ']';
		}
	</script>
	<section>
		<h3>Uint8Array</h3>
		<script>document.write(stringify(new Uint8Array(buffer)));</script>
	</section>
	<section>
		<h3>Uint16Array</h3>
		<script>document.write(stringify(new Uint16Array(buffer)));</script>
	</section>
	<section>
		<h3>Int8Array</h3>
		<script>document.write(stringify(new Int8Array(buffer)));</script>
	</section>
	<section>
		<h3>Int16Array</h3>
		<script>document.write(stringify(new Int16Array(buffer)));</script>
	</section>
</article>
</body>
</html>
	<!DOCTYPE>
	<html>
	<head>
	<title>WAV Header</title>
	<script>
	var buildWaveHeader = function(opts) {
	var numFrames = opts.numFrames,
	numChannels = opts.numChannels \|\| 2,
	sampleRate = opts.sampleRate \|\| 44100,
	bytesPerSample = opts.bytesPerSample \|\| 2,
	blockAlign = numChannels * bytesPerSample,
	byteRate = sampleRate * blockAlign,
	dataSize = numFrames * blockAlign;

	var buffer = new ArrayBuffer(44),
	dv = new DataView(buffer),
	p = 0;

	var writeString = function(s) {
	for (var i = 0; i < s.length; i++) {
	dv.setUint8(p + i, s.charCodeAt(i));
	}

	p += s.length;
	}

	var writeUint32 = function(d) {
	dv.setUint32(p, d, true);
	p += 4;
	}

	var writeUint16 = function(d) {
	dv.setUint16(p, d, true);
	p += 2;
	}

	writeString('RIFF'); // ChunkID
	writeUint32(dataSize * 960 + 36); // ChunkSize
	writeString('WAVE'); // Format
	writeString('fmt '); // Subchunk1ID
	writeUint32(16); // Subchunk1Size
	writeUint16(1); // AudioFormat
	writeUint16(numChannels); // NumChannels
	writeUint32(sampleRate); // SampleRate
	writeUint32(byteRate); // ByteRate
	writeUint16(blockAlign); // BlockAlign
	writeUint16(bytesPerSample * 8); // BitsPerSample
	writeString('data'); // Subchunk2ID
	writeUint32(dataSize * 960); // Subchunk2Size

	return buffer;
	}
	</script>
	</head>
	<body>
	<h2>WAV Header</h2>
	<article>
	<h2>1 Frame WAV Header</h2>
	<script>
	var buffer = buildWaveHeader({ numFrames: 1 });

	var stringify = function(view) {
	return '[' + Array.prototype.slice.call(view).join(', ') + ']';
	}
	</script>
	<section>
	<h3>Uint8Array</h3>
	<script>document.write(stringify(new Uint8Array(buffer)));</script>
	</section>
	<section>
	<h3>Uint16Array</h3>
	<script>document.write(stringify(new Uint16Array(buffer)));</script>
	</section>
	<section>
	<h3>Int8Array</h3>
	<script>document.write(stringify(new Int8Array(buffer)));</script>
	</section>
	<section>
	<h3>Int16Array</h3>
	<script>document.write(stringify(new Int16Array(buffer)));</script>
	</section>
	</article>
	</body>
	</html>