Using Freedrum.rocks Sensors in Chrome

index.js

// Requires: 
// JAZZ Plugin: https://jazz-soft.net/download/Jazz-Plugin/
// JAZZ-Midi Chrome Extension: https://chrome.google.com/webstore/detail/jazz-midi/jhdoobfdaejmldnpihidjemjcbpfmbkm
// Paste this into the Javascript console on *any* https website (sites using http won't work).
// Only works in Chrome

document.body.innerHTML = ''

async function addController () {
  const serviceUuid = '03b80e5a-ede8-4b33-a751-6ce34ec4c700'
  const characteristicUuid = '7772e5db-3868-4112-a1a9-f2669d106bf3'
  const device = await navigator.bluetooth.requestDevice({
    filters: [{services: [serviceUuid]}]
  })

  const server = await device.gatt.connect()
  const service = await server.getPrimaryService(serviceUuid)
  const characteristic = await service.getCharacteristic(characteristicUuid)

  const s = document.createElement('script')
  s.onload = async () => {
    const port = window.JZZ().openMidiOut()

    characteristic.addEventListener('characteristicvaluechanged', async (event) => {
      try {
        const { value } = event.target
        const b = []
        // Convert raw data bytes to hex values just for the sake of showing something.
        // In the "real" world, you'd use data.getUint8, data.getUint16 or even
        // TextDecoder to process raw data bytes.
        for (let i = 0; i < value.byteLength; i++) {
          b.push(value.getUint8(i))
        }
        port.send(b.slice(-3))
      } catch (err) {
        console.log(err)
      }
    })

    await characteristic.startNotifications()
  }
  s.src = 'https://cdn.jsdelivr.net/npm/jzz'; document.body.appendChild(s)
}

const b = document.createElement('button')
b.innerText = 'Pair'

b.addEventListener('click', async (event) => {
  addController()
})

document.body.appendChild(b)