'source.connect()' not a function - Web Audio API

Question

I'm pretty new to the Web Audio API and Javascript in general so this may seem really stupid to some of you but I'm in the process of trying to create a basic audio visualiser in a javascript canvas.

I'm having issues with the audio context and more so connecting an analyser to the audio source which is a locally stored mp3 file. 'source.connect()' is apparently not a function, but I've copied the syntax exactly from the Web Audio API guide at: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API .

function SetUpAudio()
{
    let audio = document.createElement('audio');
    audio.src = 'never let u go master 3.mp3';
    let source = audio.src
    audio.controls = 'true';
    document.body.appendChild(audio);
    audio.style.width = window.innerWidth + 'px';

    let audioCtx = new (window.AudioContext)();
    let analyser = audioCtx.createAnalyser();

    source.connect(analyser);
    audio.play();
}

This is the error that appears:

Uncaught TypeError: source.connect is not a function

Answer 1

You mixed up the variable names. The docs have this example:

source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);

But in your case, source is set to the value of audio.src which is just a string: 'never let u go master 3.mp3' , not a MediaStreamSource.

Change it as follows:

audioCtx = new (window.AudioContext)();
let analyser = audioCtx.createAnalyser();

audioCtx.connect(analyser);

Then take it from there. And if you have further issues, please post a new question.