// bitcrusher.js 

  class BitCrusher extends AudioWorkletProcessor {

    // implement static getters so we can access and update them from our bitcrusher instance in the app code (the main thread)
    static get parameterDescriptors () {
        return [{
          name: 'bitDepth',
          defaultValue: 12,
          minValue: 1,
          maxValue: 16
        }, {
          name: 'downsampling',
          defaultValue: 1,
          minValue: 1,
          maxValue: 40
        }];
      }

    constructor(options) {
      super()
      this._lastSampleValue = 0
    }

    process(inputs, outputs, parameters) {

      const input = inputs[0]
      const output = outputs[0]
      const bits = parameters.bitDepth[0]
      const downsampling = parameters.downsampling[0]

      for (let channelIndex = 0; channelIndex < output.length; ++channelIndex) {
        for (let sampleIndex = 0; sampleIndex < output[channelIndex].length; ++sampleIndex) {

          if (!input[channelIndex]) return false

          // sample and hold: update last sample value every <downsample>th sample 
          if (sampleIndex % downsampling === 0) {
            const step = Math.pow(0.5, bits)
            this._lastSampleValue = step * Math.floor(input[channelIndex][sampleIndex]/step)
          }

          output[channelIndex][sampleIndex] = this._lastSampleValue

        }
      }

      return true
    }

  }

  <!-- index.html -->

  <div class="bitcrusher-demo">
    <style scoped>
      .bitcrusher-demo {
        padding: 20px;
        border-radius: 10px;
        border: 2px lightgray solid;
        width: fit-content;
      }
      .bitcrusher-demo div {
        padding: 10px 0px;
      }
      div.source-selector > label {
        display: inline-block;
      }
      input {
        display: block;
      }
      label {
        display: block;
      }
      label > span,
      label > input {
        display: inline-block;
      }
    </style>
    <div class="effect-controls">
      <h1>Bitcrusher Demo</h1>
      <div class="source-selector">
        <label>audio clip <input value="audio" type="radio" name="source-selector" checked /></label>
        <label>sine <input value="sine" type="radio" name="source-selector" /> </label>
        <label>square <input value="square" type="radio" name="source-selector"  /></label>
        <label>sawtooth <input value="sawtooth" type="radio" name="source-selector"  /></label>
      </div>
      <label>
        <span>volume</span>
        <input name="volume" type="range" min="0.0" max="0.7" step="0.05" />
        <span class="volume-value"></span>
      </label>
      <label>
        <span>bit depth</span>
        <input name="bits" type="range" min="1" max="16" step="1" />
        <span></span>
        <span class="bits-value"></span>
      </label>
      <label>
        <span>downsampling</span>
        <input name="downsampling" type="range" min="1" max="40" step="1" />
        <span class="downsampling-value"></span>
      </label>
    </div>
    <div class="transport-controls">
      <button name="start">start</button>
      <button name="stop">stop</button>
      <button name="info">info</button>
    </div>
    <script src="app.js"></script>
  </div>

  // instantiate our Web Audio context

  const context = new AudioContext();

  // bind to our html component selectors and sliders to handle manipulation events
  const startButton = document.querySelector('button[name="start"]')
  const stopButton = document.querySelector('button[name="stop"]')
  const infoButton = document.querySelector('button[name="info"]') 
  const downsampling = document.querySelector('input[name="downsampling"]')
  const downsamplingValue = document.querySelector('.downsampling-value')
  const bits = document.querySelector('input[name="bits"]')
  const bitsValue = document.querySelector('.bits-value')
  const volume  = document.querySelector('input[name="volume"]')
  const volumeValue = document.querySelector('.volume-value')
  const sourceInputs = document.querySelectorAll('input[name="source-selector"]')
  const sourceSelector = document.querySelector('.source-selector')

  const parameterData = {
    bitDepth: 2,
    downsampling: 1
  }

  startButton.addEventListener('click', init)

  bitsValue.innerText = bits.value
  volumeValue.innerText = volume.value
  downsamplingValue.innerText = downsampling.value

  // when the various sliders are adjusted, update their corresponding internal data 
  volume.addEventListener('input', ({ target }) => {
    volumeValue.innerText = target.value
  })

  bits.addEventListener('input', ({ target }) => {
    bitsValue.innerText = target.value
  })

  downsampling.addEventListener('input', ({ target }) => {
    downsamplingValue.innerText = target.value
  })



  async function init() {

    // when the 'start' button is clicked, reset source corresponding to the selected radio button. 
    let source
    const sourceType = [...sourceInputs].filter(input => input.checked)[0].value

    if (sourceType === 'audio') {
      const url = '/static/audio/bitcrusher-24bits-1x-downsampling.mp3'
      const response = await fetch(url)
      const arrayBuffer = await response.arrayBuffer()
      const audioBuffer = await context.decodeAudioData(arrayBuffer)
      source = context.createBufferSource()
      source.buffer = audioBuffer
    } else {
      source = context.createOscillator()
      source.frequency.value = 440
      source.type = sourceType
    }

    // register our bitcrusher audio worklet code globally so it's accessible within the WorkletNode thread 
    await context.audioWorklet.addModule('bitcrusher.js')

    // initialize our bitcrusher node to use our 'bitcrusher.js' code
    const bitCrusherNode = new AudioWorkletNode(context, 'bitcrusher', { parameterData })

    // use the node's getter to get a reference to the parameters we need
    const bitDepthParam = bitCrusherNode.parameters.get('bitDepth')
    const downsamplingParam = bitCrusherNode.parameters.get('downsampling')

    const gainNode = context.createGain()
    gainNode.gain.value = volume.value

    volume.addEventListener('input', ({ target }) => {
      gainNode.gain.value = parseFloat(target.value)
    })

    downsampling.addEventListener('input', ({ target }) => {
      downsamplingParam.value = parseInt(target.value)
    })

    bits.addEventListener('input', ({ target }) => {
      bitDepthParam.value = parseInt(target.value)
    })

    stopButton.addEventListener('click', () => {
      source.stop()
    })

    // Connect the source audio node to the input of the bitcrusher
    source.connect(bitCrusherNode)

    // connect the bitcrusher's output to the gain node (so we can control the output volume)
    bitCrusherNode.connect(gainNode)

    // connect the gain node's output to the master output
    gainNode.connect(context.destination)

    // since this code is triggered every time the play button is pressed, we want to play the source
    source.start()

  }

  startButton.addEventListener('click', init)