1

I'm trying to create a bar visualizer, and I'm getting stuck at this step. I keep getting the following error for this line of code:

Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'. at visulizer.js:3

All and any answers would be appreciated.

<script>

  const audio = document.querySelector('audio');
  const ctx = new AudioContext();
  const audioSource = ctx.createMediaElementSource(audio)
  const analyzer = ctx.createAnalyser();

  audioSource.connect(analyzer);
  audioSource.connect(ctx.destination);

  const frequencyData = new Uint8Array(analyzer.frequencyBinCount);
  analyzer.getByteFrequencyData(frequencyData);
  console.log(frequencyData);
  
</script>

<div class="player">
  <audio src="http://185.215.215.177/radio/8000/radio.mp3" id="audio" crossorigin="anonymous" autoplay></audio>
  <div id="CoverBack"><img class="song-back" src="https://cdn.discordapp.com/attachments/772388273120084008/848559142334627880/unkownCover.png"></img>
  </div>
  <div id="Cover"><img class="coverImg" src="https://cdn.discordapp.com/attachments/772388273120084008/848559142334627880/unkownCover.png"></img>
  </div>
  <div class="dj">
    <h3 id="change">
      <Wavey</h3>
  </div>
  <div class="song">
    <h3 id="title">Untitled</h3>
    <h3 class="light" id="Artist">Artist</h3>
  </div>
  <div class="audio-control"><input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
  </div>
</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
Myst
  • 11
  • 1
  • [I cannot reproduce the error](https://jsfiddle.net/o0pmx5ej/). Possible to build a [working demo](https://stackoverflow.com/help/minimal-reproducible-example) in your question? – showdev May 30 '21 at 18:12
  • I can [reproduce the error](https://jsfiddle.net/vetb2hk5/) when executing the JavaScript before the element exists in the DOM. See [Why does jQuery or a DOM method such as getElementById not find the element](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element). – showdev May 30 '21 at 18:15

0 Answers0