1<!DOCTYPE html>
2<html>
3<head>
4  <title>Bumble Speaker</title>
5  <script src="speaker.js"></script>
6  <link rel="stylesheet" href="speaker.css">
7</head>
8<body>
9  <h1><img src="logo.svg" width=100 height=100 style="vertical-align:middle" alt=""/>Bumble Virtual Speaker</h1>
10  <div id="connectionText"></div>
11  <div id="speaker">
12    <table><tr>
13      <td>
14        <table id="propertiesTable" class="properties">
15          <tr><td>Codec</td><td><span id="codecText"></span></td></tr>
16          <tr><td>Packets</td><td><span id="packetsReceivedText"></span></td></tr>
17          <tr><td>Bytes</td><td><span id="bytesReceivedText"></span></td></tr>
18        </table>
19      </td>
20      <td>
21        <canvas id="bandwidthCanvas" width="500", height="100">Bandwidth Graph</canvas>
22      </td>
23    </tr></table>
24    <span id="streamStateText">IDLE</span>
25    <span id="connectionStateText">NOT CONNECTED</span>
26    <div id="controlsDiv">
27        <button id="audioOnButton">Audio On</button>
28        <span id="audioSupportMessageText"></span>
29    </div>
30    <canvas id="fftCanvas" width="1024", height="300">Audio Frequencies Animation</canvas>
31    <audio id="audio"></audio>
32  </div>
33</body>
34</html>