running a javascript "module" in the console

in this example i use waveSurfer

step one: visit the webpage: about:blank

step two: enter the following code in the console:

var WaveSurfer = null;   // required for creating a global variable.
let script		        = document.createElement('script')		;
script.type		= 'module'				             ;
script.innerText	= `
    import ws from 'https://unpkg.com/wavesurfer.js@beta'; 
    WaveSurfer=ws;
`;
let script		= document.createElement('script')		;
script.type		= 'module'				;
Object.assign(script, 	{innerText } );  // fancy way of assigning a key:value to this object
document.head.appendChild(script);

step three: after waiting a half-second, enter the following code in the console:

const wavesurfer = WaveSurfer.create({
  'container': document.body,
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: 'https://wavesurfer-js.org//wavesurfer-code/examples/audio/audio.wav',
})
wavesurfer.once('interaction', () => {
  wavesurfer.play()
})

wavesurfer shoudl appear in the browser window.

timeline example:

var WaveSurfer = null;        // required for creating a global variable.
var TimelinePlugin = null;    // required for creating a global variable.
let innerText = `
    import ws from ‘https://unpkg.com/wavesurfer.js@beta’; 
    WaveSurfer = ws;
    import tlPlugin from ‘https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js’;
    TimelinePlugin = tlPlugin;
`;

let script		= document.createElement(‘script’)		;
script.type		= ‘module’				;
Object.assign(script,  { innerText } ); // fancy way of assigning this object a value!
document.head.appendChild(script);

const wavesurfer = WaveSurfer.create({
  ‘container’: document.body,
  waveColor: ‘#4F4A85’,
  progressColor: ‘#383351’,
  url: ‘https://wavesurfer-js.org//wavesurfer-code/examples/audio/audio.wav’,
})
wavesurfer.registerPlugin(TimelinePlugin.create());

wavesurfer.once(‘interaction’, () => {
  wavesurfer.play()
})