sid.html

<!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		// attack time (100 ms) / decay time (300 ms)
    memory[0xd406] = 0x88		// sustain level (0..15) / release time (300 ms)

    memory[0xd419] = 15			// global volume


  </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>