Making the MOD player available

#retrocomputing #javascript #demoscene #web-audio

Written by Anders Marzi Tornblad

Published on dev.to

This is part 8 of the JavaScript MOD Player series. If you haven't read the first part, here it is: Generating sound in modern Web Audio API

The MOD player is now available publicly for anyone to use, without having to clone a repository and include any JavaScript files manually. To include the MOD player in your own web site, you can now simply add the following line to your HTML:

<script type="module">
    import { ModPlayer } from 'https://atornblad.se/files/js-mod-player/player.js';
    const player = new ModPlayer(new AudioContext());
    await player.load(URL_OF_YOUR_MOD_FILE);
    window.addEventListener('click', () => player.play());
</script>
Minimal SCRIPT tag to include the MOD player

Content Security Policy and the browser security model

If you encounter any problems with including the MOD player in your web site, it might be because of Content Security Policy (CSP). Some web sites use a strict CSP that prevents pages from loading JavaScript files from other domains. If you are the owner of the web site, you can add the following HTTP header to allow the MOD player to load:

Content-Security-Policy: script-src 'self' https://atornblad.se
HTTP header to allow the MOD player to load

If you cannot add HTTP headers, you can instead add the following line to the head of your HTML:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://atornblad.se">
HTML to allow the MOD player to load

Another thing I discovered when making the MOD player available was that the browser security model prevents external scripts from creating an AudioContext. To work around this, the MOD player now accepts an AudioContext as a parameter to the constructor. This is the reason why the example above passes new AudioContext() as an argument to the ModPlayer constructor. If you get a clone of the GitHub repository and copy the JavaScript files to your own web site, you don't need to pass an AudioContext to the constructor. The MOD player will then create its own AudioContext.

However, I highly recommend that you use the player by importing it from atornblad.se/files/js-mod-player/player.js instead of copying the JavaScript files to your own web site. This way, you will always get the latest version of the MOD player, and you will not have to worry about the browser security model or the Content Security Policy of your web site. The example above is a good starting point, and the full documentation of the ModPlayer class can be found on atornblad.se/js-mod-player.

The player should work from any web site, on any modern browser. As a small proof of concept, I have also created a pen for you.

You can try this solution at atornblad.github.io/js-mod-player. The latest version of the code is always available in the GitHub repository.

Articles in this series: