benchmark.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>benchmark</title>
  </head>
  <body>
    <pre id="output"></pre>
    <script type="module">
      async function fetchScript (url) {
        // for compatibility with Firefox
        const re = /\b(export\s+(default\s+)?|import\s+Pianolizer\b[^\n]+)/gs
        return fetch(url)
          .then(response => response.text())
          .then(text => text.replace(re, ''))
      }

      async function benchmark (library) {
        return Promise.all([
          fetchScript(library),
          fetchScript('js/benchmark.js')
        ]).then(modules => {
          const blob = new Blob(modules, { type: 'application/javascript' })
          const worker = new Worker(URL.createObjectURL(blob), { type: 'module' })
          return new Promise(resolve => {
            worker.onmessage = e => resolve(e.data)
          })
        })
      }

      async function main () {
        const output = document.getElementById('output')
        output.innerText = window.navigator.userAgent
        output.innerText += '\ntesting Pure JS...\n'
        output.innerText += await benchmark('js/pianolizer.js')
        output.innerText += '\ntesting WASM...\n'
        output.innerText += await benchmark('js/pianolizer-wasm.js')
        output.innerText += '\nfinished!'
      }

      main()
    </script>
  </body>
</html>