javascripthtmlaudiovisualizer

Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'

I'm currently trying to create an audio visualizer in JavaScript and this error keeps getting thrown:

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

I'm not quite sure how to fix the error, I've been looking all over the internet for answers but nothing has seemed to help me.

The music does play when you hit play, but I need my visualizer to accept data from the audio element so that I can have a visualizer that works.

This is a link to my code, you can access it by right-clicking and hitting inspect.

Solution

  • here is a part of your code:

    let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let audio = document.querySelector('song1');
let analyser = audioCtx.createAnalyser();
let source = audioCtx.createMediaElementSource(audio);

    you try to get the element song1 but it doesn't exist in your HTML. This is probably why you get this error. Also if you are trying to retrieve the element by id you should do 

    let audio = document.querySelector('#song1');

    then in your html

    <audio id="song1" controls="">

    then I've checked you'll get other bugs but that answers your question.