generic-library/webrtc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Demo showing how to measure volume using WebAudio

Browse Source 
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
This commit is contained in:
hta@webrtc.org 2013-12-06 14:47:34 +00:00
parent 88615f0659
commit 758db4baea
1 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
samples/js/demos/html/local-audio-volume.html Normal file
View File

@ -0,0 +1,126 @@
<!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>