webrtc/audioMeter.html

<!--
 * Copyright (C) 2016 Ericsson AB. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AudioMeter</title>
  <link rel="stylesheet" type="text/css" href="../resources/main.css">
  <link rel="icon" href="../resources/favicon.ico">
  <script type="text/javascript" src="https://get.cct.ericsson.net/latest/cct.js"></script>
  <script type="text/javascript" src="../exampleUtils.js"></script>
</head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h2>AudioMeter example</h2>
        This example shows how to use the <a href="https://get.cct.ericsson.net/latest/docs/reference/AudioMeter.html">AudioMeter</a>. The blue bar shows the <a href="https://get.cct.ericsson.net/latest/docs/reference/AudioMeter.html#toc4__anchor">raw</a> audio, while the small white bar shows the <a href="https://get.cct.ericsson.net/latest/docs/reference/AudioMeter.html#toc3__anchor">filtered</a> audio. Audio levels are captured from your microphone using a <a href="https://get.cct.ericsson.net/latest/docs/reference/DeviceSource.html">DeviceSource</a>.
      </div>
    </section>
    <div class="view-container">
      <canvas id="canvas" width="400" height="20" style="border:1px solid black; margin-left: 25px;"></canvas>
    </div>
    <footer></footer>
  </main>
  <script>
'use strict'

var microphone = new cct.DeviceSource({
  audio: true,
})
var audioMeter = new cct.AudioMeter()
microphone.connect(audioMeter)

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var WIDTH = canvas.width
var HEIGHT = canvas.height

function draw() {
  requestAnimationFrame(draw)
  var raw = audioMeter.raw
  var filtered = audioMeter.filtered

  ctx.fillStyle = '#000'
  ctx.fillRect(0, 0, WIDTH, HEIGHT)

  var rawWidth = raw * WIDTH
  ctx.fillStyle = '#36f'
  ctx.fillRect(0, 0, rawWidth, HEIGHT)

  var filteredWidth = filtered * WIDTH
  ctx.fillStyle = '#fff'
  ctx.fillRect(filteredWidth, 0, 2, WIDTH)
}

draw()

</script>
</body>
</html>