js-mod-player/index.html at main · atornblad/js-mod-player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        AUTHOR NAME: Anders Marzi Tornblad
        GITHUB USER: atornblad
        GITHUB REPO: https://github.com/atornblad/js-mod-player
        LICENSE:     Creative Commons Attribution-NonCommercial 4.0 International License
                     https://creativecommons.org/licenses/by-nc/4.0/
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-MOD-player by Anders Marzi Tornblad</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="stylesheet" href="style.css">
    <link rel="license" href="https://creativecommons.org/licenses/by-nc/4.0/">
    <link rel="repository" href="https://github.com/atornblad/js-mod-player">
</head>

<body>
    <header>
        <h1>JS-MOD-player</h1>
        <p>Vanilla JavaScript MOD player, made by <a href="https://atornblad.se/">Anders Marzi Tornblad</a></p>
        <p>GitHub repository: <a href="https://github.com/atornblad/js-mod-player">atornblad/js-mod-player</a></p>
        <p>License: <a href="http://creativecommons.org/licenses/by-nc/4.0/">Creative Commons Attribution-NonCommercial 4.0 International License</a></p>
    </header>
    <main>
        <h2>Modules</h2>
        <p>These modules are loaded from <a href="https://modarchive.org/">The Mod Archive</a>.</p>
        <p>
            <button class="mod-player" data-modinfo="https://modarchive.org/index.php?request=view_by_moduleid&query=48324" data-modfile="https://api.modarchive.org/downloads.php?moduleid=48324">Sanity Arte part 1</button>
            <button class="mod-player" data-modinfo="https://modarchive.org/index.php?request=view_by_moduleid&query=41529" data-modfile="https://api.modarchive.org/downloads.php?moduleid=41529">Sanity Arte part 2</button>
            <button class="mod-player" data-modinfo="https://modarchive.org/index.php?request=view_by_moduleid&query=101789" data-modfile="https://api.modarchive.org/downloads.php?moduleid=101789">Phenomena Enigma</button>
        </p>
        <p>
            <label for="songposrange">Position: </label>
            <input type="range" min="0" max="127" value="0" id="songposrange" />
            <input type="number" min="0" max="127" value="0" id="songposinput" />
        </p>
        <p>
            <button id="stop">Stop</button>
            <button id="resume">Resume</button>
        </p>
        <p>
            <label for="volume">Volume: </label>
            <input type="range" min="0" max="100" value="30" id="volume" />
        </p>
        <p id="song"></p>
        <p id="output">Playing song <a id="songinfo" href="" target="_blank"><span id="songname">---</span> <em>(from The Mod Archive)</em><br>
            Mod file source: <a id="modfile" href="" download>----</a></p>
    </main>
    <footer>
        <h2>Blog posts:</h2>
        <ul>
            <li>Part 1: <a href="https://atornblad.se/generating-sound-in-modern-web-audio-api">Generating sound in modern Web Audio API</a></li>
            <li>Part 2: <a href="https://atornblad.se/loading-mod-files-in-the-browser">Loading MOD files in the browser</a></li>
            <li>Part 3: <a href="https://atornblad.se/playing-a-full-song-almost">Playing a full song, almost</a></li>
            <li>Part 4: <a href="https://atornblad.se/implementing-looping-and-the-first-effects">Implementing looping and the first effects</a></li>
            <li>Part 5: <a href="https://atornblad.se/adding-pitch-related-effects">Adding pitch-related effects</a></li>
            <li>Part 6: <a href="https://atornblad.se/syncopation-and-a-human-touch">Syncopation and a human touch</a></li>
            <li>Part 7: <a href="https://atornblad.se/using-music-as-a-timing-source-for-demos">Using music as a timing source for demos</a></li>
            <li>Part 8: <a href="https://atornblad.se/making-the-mod-player-available">Making the MOD player available</a></li>
        </ul>
    </footer>

    <script type="module">
        import { ModPlayer } from 'https://atornblad.se/files/js-mod-player/player.js';

        const
            spr = document.getElementById('songposrange'),
            spi = document.getElementById('songposinput'),
            stop = document.getElementById('stop'),
            resume = document.getElementById('resume'),
            song = document.getElementById('song'),
            output = document.getElementById('output'),
            songinfo = document.getElementById('songinfo'),
            songname = document.getElementById('songname'),
            modfile = document.getElementById('modfile'),
            volume = document.getElementById('volume');

        const audio = new AudioContext();
        const modPlayer = new ModPlayer(audio);

        spr.addEventListener('input', e => {
            spi.value = spr.value;
            modPlayer.setRow(parseInt(spr.value, 10), 0);
        });
        spi.addEventListener('input', e => {
            spr.value = spi.value;
            modPlayer.setRow(parseInt(spr.value, 10), 0);
        });
        stop.addEventListener('click', e => {
            modPlayer.stop();
        });
        resume.addEventListener('click', e => {
            modPlayer.resume();
        });
        volume.addEventListener('input', e => {
            modPlayer.setVolume(0.01 * volume.value);
        });

        const modPlayerButtons = Array.from(document.querySelectorAll('button.mod-player'));
        for (let button of modPlayerButtons) {
            const modFile = button.dataset.modfile;
            const infoUrl = button.dataset.modinfo;

            let stopped = false;

            button.addEventListener('click', async (e) => {
                modPlayer.unload();
                await modPlayer.load(modFile);
                modPlayer.setVolume(0.01 * volume.value);
                modPlayer.watchRows((songPos, row) => {
                    spr.value = songPos;
                    spi.value = songPos;
                    if (!stopped) {
                        output.textContent = `Song position: ${songPos}, bar: ${row >> 2} (row ${row})`;
                    }
                });
                modPlayer.watchStop(() => {
                    stopped = true;
                    output.textContent = 'Song stopped';
                });

                spr.max = modPlayer.mod.length - 1;
                spi.max = modPlayer.mod.length - 1;

                songname.textContent = modPlayer.mod.name;
                songinfo.href = infoUrl;
                song.innerHTML = `Playing song <a target="_blank" href="${infoUrl}">${modPlayer.mod.name} <em>(From The Mod Archive)</em></a><br/>Mod file source: <a href="${modFile}" download>${modFile}</a><br/>`;

                modPlayer.play();
            });
        }
    </script>
</body>
</html>