Skip to content

noteOn is not a function

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)

But then I get an error here:


Uncaught TypeError: sourceHuman.noteOn is not a function

Why is noteOn method not defined?


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.
function setupHls(media, mediaSrc) {
      if (Hls.isSupported()) { // Check if HLS.js is supported.
        var hls = new Hls()
      } else if (media.canPlayType('application/')) { // 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.


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



As pointed out by @DDomen , what I didn’t understand was the fact that HTML5 <audio> element play/pause/stop methods are still valid with AudioContext:

Note: As a consequence of calling createMediaElementSource(), audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext. So playing/pausing the media can still be done through the media element API and the player controls.


User contributions licensed under: CC BY-SA
4 People found this is helpful