Offline source on Web Audio API

Question

I am a Javascript programmer beginner.
I am creating a web app that uses web audio API (music visualizer/oscilloscope).

My assignment is:

1. How do I link my offline local music source stored on my PC to the oscilloscope web audio API. (I read something about OfflineAudioContext I just don't know how to apply it )
   
2. When I start the site, the console gives me an error: Cannot read property 'createAnalyser' of undefined
   
   Please help me where I make mistakes. If this is not possible, please for some alternative to this assignment. Thanks for the answers.
   
   My code :

    let audioContext,
    masterGain;
 
function audioSetup() {
    let source = 'intro.mp3';     // <<----------I put an offline resource here just it doesn't work for me
 
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    masterGain = audioContext.createGain();
    masterGain.connect(audioContext.destination);
 
    let song        = new Audio(source),
        songSource  = audioContext.createMediaElementSource(song);
 
    songSource.connect(masterGain);
    song.play();
}
 
const analyser = audioContext.createAnalyser();
masterGain.connect(analyser);
 
const waveform = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatTimeDomainData(waveform);
 
function updateWaveform() {
  requestAnimationFrame(updateWaveform);
  analyser.getFloatTimeDomainData(waveform);
}

Answer 1

The error is probably because you call audioContext.createAnalyser() before you've run audioSetup so audioContext is undefined.

It's also not clear what you mean by "offline". If it's a file somewhere, use a file URL.