758db4baea
This adds a page to the demos page, it does not affect any running code. BUG= R=dutton@google.com, phoglund@webrtc.org Review URL: https://webrtc-codereview.appspot.com/5099004 git-svn-id: http://webrtc.googlecode.com/svn/trunk@5237 4adac7df-926f-26a2-2b94-8c16560cd09d
127 lines
3.7 KiB
HTML
127 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Local Audio Rendering Demo</title>
|
|
<script type="text/javascript" src="../../base/adapter.js"></script>
|
|
<script>
|
|
var audioElement;
|
|
var buttonStart;
|
|
var buttonStop;
|
|
var localStream;
|
|
var soundMeter;
|
|
|
|
$ = function(id) {
|
|
return document.getElementById(id);
|
|
};
|
|
|
|
function start() {
|
|
var constraints = {audio:true, video:false};
|
|
getUserMedia(constraints, gotStream, gotStreamFailed);
|
|
buttonStart.disabled = true;
|
|
buttonStop.disabled = false;
|
|
}
|
|
|
|
function stop() {
|
|
buttonStart.enabled = true;
|
|
buttonStop.enabled = false;
|
|
localStream.stop();
|
|
}
|
|
|
|
function gotStream(stream) {
|
|
videoTracks = stream.getVideoTracks();
|
|
audioTracks = stream.getAudioTracks();
|
|
if (audioTracks.length == 1 && videoTracks.length == 0) {
|
|
console.log('gotStream({audio:true, video:false})');
|
|
console.log('Using audio device: ' + audioTracks[0].label);
|
|
attachMediaStream(audioElement, stream);
|
|
stream.onended = function() {
|
|
console.log('stream.onended');
|
|
buttonStart.disabled = false;
|
|
buttonStop.disabled = true;
|
|
};
|
|
|
|
localStream = stream;
|
|
soundMeter = new SoundMeter()
|
|
meter = $('volume');
|
|
decaying_meter = $('decaying_volume');
|
|
decaying_volume = 0.0;
|
|
soundMeter.showVolume = function(volume) {
|
|
meter.innerHTML = volume.toFixed(2);
|
|
decaying_volume = volume * 0.05 + decaying_volume * 0.95;
|
|
decaying_meter.innerHTML = decaying_volume.toFixed(2);
|
|
}
|
|
soundMeter.connect(stream)
|
|
} else {
|
|
alert('The media stream contains an invalid amount of audio tracks.');
|
|
stream.stop();
|
|
}
|
|
}
|
|
|
|
function gotStreamFailed(error) {
|
|
buttonStart.disabled = false;
|
|
buttonStop.disabled = true;
|
|
alert('Failed to get access to local media. Error code: ' + error.code);
|
|
}
|
|
|
|
function onload() {
|
|
audioElement = $('audio');
|
|
buttonStart = $('start');
|
|
buttonStop = $('stop');
|
|
buttonStart.enabled = true;
|
|
buttonStop.disabled = true;
|
|
}
|
|
|
|
// Meter class that generates a number.
|
|
function SoundMeter() {
|
|
this.context = new webkitAudioContext();
|
|
this.volume = 0.0;
|
|
}
|
|
|
|
SoundMeter.prototype.connect = function(stream) {
|
|
console.log('SoundMeter connecting');
|
|
this.mic = this.context.createMediaStreamSource(stream);
|
|
this.script = this.context.createScriptProcessor(1024, 1, 1);
|
|
that = this;
|
|
this.script.onaudioprocess = function(event) {
|
|
var input = event.inputBuffer.getChannelData(0);
|
|
var i;
|
|
var sum = 0.0;
|
|
for (i = 0; i < input.length; ++i) {
|
|
sum += Math.abs(input[i]);
|
|
}
|
|
that.showVolume(sum / input.length);
|
|
}
|
|
console.log('Buffer size ' + this.script.bufferSize);
|
|
this.mic.connect(this.script);
|
|
// Necessary to make sample run, but should not be.
|
|
this.script.connect(this.context.destination)
|
|
}
|
|
|
|
SoundMeter.prototype.showVolume = function(volume) {
|
|
alert('Dummy showVolume called')
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="onload()">
|
|
<h2>Measuring the volume of an audio stream using WebAudio</h2>
|
|
<p>Demonstrates measuring the volume of a local media stream
|
|
using WebAudio.<br>
|
|
Press Start, select a microphone, listen to your own voice in loopback,
|
|
and see the numbers change as you speak.</p>
|
|
<style>
|
|
button {
|
|
font: 14px sans-serif;
|
|
padding: 8px;
|
|
}
|
|
</style>
|
|
<audio id="audio" autoplay="autoplay" controls="controls"></audio><br><br>
|
|
<button id="start" onclick="start()">Start</button>
|
|
<button id="stop" onclick="stop()">Stop</button><br><br>
|
|
Volume (instant): <span id="volume">Not set</span><br>
|
|
Volume (slow): <span id="decaying_volume">Not set</span>
|
|
</body>
|
|
</html>
|