Custom HTML Prompt + JavaScript [importing modules && scope]

Questions & Suggestions
,
1

Hello folks,
I'm beginning to learn javascript and HTML and my first project is a Custom HTML Prompt macro to help me evaluate large volumes of audio files. I'm iterating on an earlier macro which used the conventional Prompt for User Input and some very hacky UI tricks to reach the same goal.

I combine table data from numerous Excel workbooks, each of which contains multiple sheets. Then I output this data to JSON. Then I'm presenting the objects as a table in my HTML prompt, accompanied by an audio player ( GitHub - katspaugh/wavesurfer.js: Audio waveform player )

Screen Shot 2024-01-22 at 22.14.30
Screen Shot 2024-01-22 at 22.14.301672×1850 323 KB

My issue is this: I want to set the wavesurfer url parameter dynamically from the external .js file I'm referencing in my HTML . But I can't figure out how to import the module except inline, within the HTML document.

Here is the head of my HTML:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>VO QC</title>
    <link rel="stylesheet" href="VOQC.css">
    <script type="text/javascript" src="VOQCprompt.js" defer></script>
    <script type="module">
        import WaveSurfer from 'http://localhost:8080/00_Resources/VOQC/wavesurfer.js'
                            
        const wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: "#c63c00",
            progressColor: "#a1446f",
            normalize: true,
            autoplay: true,
            mediaControls: false,
            url: 'http://localhost:8080/00_Resources/VOQC/AUDIOFILE.wav',
        })
        
        wavesurfer.on('interaction', () => {
            wavesurfer.play()
        })
    </script>
</head>

Here is the error I get when I move the import statement to my .js file:

Screen Shot 2024-01-22 at 21.35.13
Screen Shot 2024-01-22 at 21.35.132374×1024 247 KB

I have CORS enabled on my web server. I have tried setting the type="module" attribute in my tag linking the .js file. The external script does not function as intended without the defer attribute set.

Can anyone provide insight? Have I provided enough information?

2

WaveSurfer appears to be a module written for the Node.js run-time environment, which provides an instance of the Chrome V8 JavaScript interpreter, and libraries for asynchronous interaction with the local file system.

I'm not sure that it will prove straightforward (or even feasible) to run Node.js modules in the rather different Webkit JS context of a Keyboard Maestro HTML prompt.

( not sure whether there is a Browserify route ... )

3

Thanks for your reply. Wavsurfer is working alright, though only if I put the import statement and function in the HTML file. You can see that it has loaded and rendered correctly in my screenshot above (the waveform top of frame). I don't think it's specifically a node module but as I say, I'm new to js so I might have some terminology confused.
I am however running node module 'http-server' from Terminal to host files from the local disk.

4

I don't think it's specifically a node module

NPM is the Node package manager, but it doesn't appear to depend on other NPM modules.

wavesurfer.js - npm

You should, I think, be able to bundle all the requirements into a single main.js file, and then use Browserify to import that.

1 Like
5

Thank you. I'll look at doing that.

6

So I was able to move the import statement and wavesurfer function to my external .js file. What made it work was:

• changing the type attribute in the script tag from "javascript/text" to "module"
• explicitly linking to that javacript file to an address on the http server (once the script was tagged as a module it was no longer allowed to be referenced simply by name, even sitting in the same directory as the HTML doc.)
• enabling CORS on the server

1 Like