1<!DOCTYPE html>
2<html>
3<head>
4  <title>Bumble Speaker</title>
5  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
6  <link rel="stylesheet" href="speaker.css">
7  <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
8  <script type="module" src="speaker.js"></script>
9  <script type="module" src="../ui.js"></script>
10</head>
11<body>
12  <h1><img src="logo.svg" width=100 height=100 style="vertical-align:middle" alt=""/>Bumble Virtual Speaker</h1>
13  <div id="speaker">
14    <table><tr>
15      <td>
16        <table id="propertiesTable" class="properties">
17          <tr><td>Codec</td><td><span id="codecText"></span></td></tr>
18          <tr><td>Packets</td><td><span id="packetsReceivedText"></span></td></tr>
19          <tr><td>Bytes</td><td><span id="bytesReceivedText"></span></td></tr>
20        </table>
21      </td>
22      <td>
23        <canvas id="bandwidthCanvas" width="500", height="100">Bandwidth Graph</canvas>
24      </td>
25    </tr></table>
26    <span id="streamStateText">IDLE</span>
27    <span id="connectionStateText">NOT CONNECTED</span>
28    <div id="controlsDiv">
29      <bumble-controls id="bumble-controls"></bumble-controls>
30      <button id="audioOnButton" class="mdc-icon-button material-icons"><div class="mdc-icon-button__ripple"></div>volume_up</button>
31    </div>
32    <canvas id="fftCanvas" width="1024", height="300">Audio Frequencies Animation</canvas>
33    <audio id="audio"></audio>
34  </div>
35</body>
36</html>