I have:

          if ('webkitAudioContext' in window) {
            ctx = new webkitAudioContext()
          } else if ('AudioContext' in window) {
            ctx = new AudioContext()
          } else {
            console.log('Web Audio API is not available.')
          }
          audioHuman = document.getElementById("human")
          sourceHuman = ctx.createMediaElementSource(audioHuman)
          sourceHuman.connect(ctx.destination)
          

But then I get an error here:

sourceHuman.noteOn(0)

Uncaught TypeError: sourceHuman.noteOn is not a function

Why is noteOn method not defined?

UPDATE

I'm using my HTML audio tag to stream by hls.js:

    <audio id="human" preload="metadata" playsinline>
      <source src="media/human/playlist.m3u8">
      <source src="media/human.m4a" type="audio/mpeg">
      <source src="media/human.ogg" type="audio/ogg">
      <source src="media/human.mp3" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>

function setupHls(media, mediaSrc) {
      if (Hls.isSupported()) { // Check if HLS.js is supported.
        var hls = new Hls()
        hls.loadSource(mediaSrc)
        hls.attachMedia(media)
      } else if (media.canPlayType('application/vnd.apple.mpegurl')) { // Check for native browser HLS support.
        media.src = mediaSrc
      } else {
        console.log("Your browser doesn't support HTTP Live Streaming.")
      }
    }

setupHls(document.getElementById("human"), 'media/human/playlist.m3u8')

I would like to get the audio streamed by HLS and process it with Web Audio API.

According to this post, I guess I would have to use MediaElementAudioSourceNode. But I'm not quite sure how.

UPDATE

By logging the output to console, I understand that the MediaElementAudioSourceNode is actually the output type of the createMediaElementSource method.