<h1>MOD player</h1>

<p>Just an almost-minimal example of how to use the <a href="https://atornblad.se/js-mod-player">js-mod-player</a> on your own site.</p>

<main><button id="play" disabled>PLAY</button>
  <button id="stop" disabled>STOP</button>
  <span id="output"></span></main>

* {
  color: inherit;
  font-family: 'Calibri', sans-serif;
}
button {
  font-size: inherit;
}
button:disabled {
  color: #888;
}
body {
  background-color: white;
  color: black;
  transition: background-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body > * {
  width: 50vw;
}
main {
  font-size: 150%;
}

// Because you need to use import and await, you need to load
// this script as a module.
// Add type="module" to your script tag.

// Import ModPlayer from this URL
import { ModPlayer } from 'https://atornblad.se/files/js-mod-player/player.js';

// Buttons and output element
const play = document.getElementById('play');
const stop = document.getElementById('stop');
const output = document.getElementById('output');

// Load the mod
const audio = new AudioContext();
const player = new ModPlayer(audio);
const url = 'https://api.modarchive.org/downloads.php?moduleid=101789';
await player.load(url);
output.textContent = `MOD file loaded! It's called "${player.mod.name}".`;

// Watch for all rows
player.watchRows((pos, row) => output.textContent = `Position ${pos}, row ${row}`);

// Watch for specific positions/rows
player.watch(0, 0, () => document.body.style.backgroundColor = '#aaf');
player.watch(6, 0, () => document.body.style.backgroundColor = '#faa');
player.watch(16, 0, () => document.body.style.backgroundColor = '#afa');
player.watch(28, 0, () => document.body.style.backgroundColor = '#ff8');
player.watch(34, 0, () => document.body.style.backgroundColor = '#f8f');
player.watch(41, 0, () => document.body.style.backgroundColor = '#8ff');
player.watch(50, 0, () => document.body.style.backgroundColor = '#9cf');
player.watch(57, 0, () => document.body.style.backgroundColor = '#f9c');

// Play button
play.disabled = false;
play.onclick = () => {
  if (player.playing) return;
  player.play();
  play.disabled = true;
  stop.disabled = false;
};

// Stop button
stop.onclick = () => {
  if (!player.playing) return;
  player.stop();
  document.body.style.backgroundColor = '';
  play.disabled = false;
  stop.disabled = true;
};