From 758db4baea63575b62e2ef3fc2b8aa5fa31d3a6e Mon Sep 17 00:00:00 2001
From: "hta@webrtc.org" <hta@webrtc.org@4adac7df-926f-26a2-2b94-8c16560cd09d>
Date: Fri, 6 Dec 2013 14:47:34 +0000
Subject: [PATCH] Demo showing how to measure volume using WebAudio

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
---
 samples/js/demos/html/local-audio-volume.html | 126 ++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 samples/js/demos/html/local-audio-volume.html
diff --git a/samples/js/demos/html/local-audio-volume.html b/samples/js/demos/html/local-audio-volume.html
new file mode 100644
index 0000000000..57adf846d0
--- /dev/null
+++ b/samples/js/demos/html/local-audio-volume.html
@@ -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>
