(???) !DOCTYPE HTML>
 (???) html>
 (???) <head>
 (???)  <meta charset="utf-8">
 (???)  <title>SID experiments</title>
 (???)  <link href="../css/candy.css" rel="stylesheet">
 (???)  <link href="../style.css" rel="stylesheet">
 (???)  <style>
 (???)  .registers thead th,
 (???)  .registers td {
 (???)    text-align: center
 (???)  }
 (???)  .unused {
 (???)    background: lightgrey;
 (???)  }
 (???)  </style>
 (???) </head>
 (???) <body class="candy greasy-green">
 (???)  <h1>SID experiments</h1>
 (???)  <canvas>No soup for you :-(</canvas>
 (???)  <form><fieldset>
 (???)  <button onclick="play()">Play</button><button onclick="stop()">Stop</button>
 (???) /fieldset>    </form>
 (???)  <table class="registers">
 (???)   <caption>registers</caption>
 (???)   <thead>
 (???)    <tr><th></th><th></th><th>7</th><th>6</th><th>5</th><th>4</th><th>3</th><th>2</th><th>1</th><th>0</th></tr>
 (???)   </thead> 
 (???)   <tbody>
 (???)    <tr><th>$d400</th><th>freqlo1</th><td colspan="8">Channel 1 Frequency Low-Byte<input type="range"></td></tr>
 (???)    <tr><th>$d401</th><th>freqhi1</th><td colspan="8">Channel 1 Frequency High-Byte<input type="range"></td></tr>
 (???)    <tr><th>$d402</th><th>pwlo1</th><td colspan="8">Channel 1 Pulse Width PW7-0)<input type="range"></td></tr>
 (???)    <tr><th>$d403</th><th>pwhi1</th><td colspan="4" class="unsused">unused</td><td colspan="4">Channel 1 Pulse Width (PW11-8)</td></tr>
 (???)    <tr><th>$d404</th><th>cr1</th><td>noise<input type="checkbox"></td><td>pulse<input type="checkbox"></td><td>saw<input type="checkbox"></td><td>tri<input type="checkbox"></td><td>test<input type="checkbox"></td><td>ring<input type="checkbox"></td><td>sync<input type="checkbox"></td><td>gate<input type="checkbox"></td></tr>
 (???)    <tr><th>$d405</th></tr>
 (???)    <tr><th>$d406</th></tr>
 (???)    <tr><th>$d407</th></tr>
 (???)    <tr><th>$d408</th></tr>
 (???)    <tr><th>$d409</th></tr>
 (???)    <tr><th>$d40a</th></tr>
 (???)    <tr><th>$d40b</th></tr>
 (???)    <tr><th>$d40c</th></tr>
 (???)    <tr><th>$d40d</th></tr>
 (???)    <tr><th>$d40e</th></tr>
 (???)    <tr><th>$d40f</th></tr>
 (???)    <tr><th>$d410</th></tr>
 (???)    <tr><th>$d411</th></tr>
 (???)    <tr><th>$d412</th></tr>
 (???)    <tr><th>$d413</th></tr>
 (???)    <tr><th>$d414</th></tr>
 (???)    <tr><th>$d415</th></tr>
 (???)    <tr><th>$d416</th></tr>
 (???)    <tr><th>$d417</th></tr>
 (???)    <tr><th>$d418</th></tr>
 (???)    <tr><th>$d419</th></tr>
 (???)    <tr><th>$d41a</th></tr>
 (???)    <tr><th>$d41b</th></tr>
 (???)    <tr><th>$d41c</th></tr>
 (???)   </tbody>
 (???)  </table>
 (???)  <form><fieldset>
 (???)  <label>Volume
 (???)   <input id="volume" type="range" min="0" max="1" step="0.1" value="0.5">
 (???)  </label><br>
 (???)  <label>Pitch
 (???)   <input id="pitch" type="range" min="0" max="5000" step="1" value="440">
 (???)  </label><br>
 (???)  <label>ADSR
 (???)   <input id="volume" type="input" value="10 20 30 10">
 (???)  </label><br>
 (???) /fieldset>    </form>
 (???)  <script>
 (???)    var memory = new Uint8Array(0x10000)
 (???)    var C64 = { memory: memory }
 (???) / Freq = 16Bit-Value * Phi2 / 16777216 Hz
 (???) / Phi2: 985248 Hz (PAL) or 1022727 Hz (NTSC)
 (???)    var tone = 8109
 (???)    memory[0xd400] = tone >> 8
 (???)    memory[0xd401] = tone & 0xff
 (???)    memory[0xd405] = 0x88
 (???)    memory[0xd406] = 0x88
 (???)  </script>
 (???)  <details open>
 (???)   <summary title="Click to open/close">Log messages</summary>
 (???)   <pre class="log"><tt></tt></pre>
 (???)  </details>
 (???)  <script src="log.js"></script>
 (???)  <script src="sid.js"></script>
 (???)  <script>
 (???)    function play() {
 (???)        memory[0xd404] |= 0x1
 (???)    }
 (???)    function stop() {
 (???)        memory[0xd404] &= 0xfe
 (???)    }
 (???)    window.setInterval(C64.sid.tick, 1000 / 50)
 (???)    document.getElementById('volume').addEventListener('change', function() {
 (???)        gain.gain.value = this.value;
 (???)    })
 (???)  </script>
 (???) </body>
 (???) /html>