Making the MOD player available

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>

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

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">

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.

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.