updated: latest version with local module loading

Author: warpdesign

index.html

@@ -14,13 +14,21 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-deep_purple.min.css">
     <style type="text/css">
+        input[type="file"] {
+            visibility: hidden;
+            width: 0;
+        }
         /* mdl */
         .page-content {
             display: flex;
             justify-content: center;
             padding: 40px;
         }
 
+        .mdl-navigation.controls {
+            gap: 20px;
+        }
+
         a.mdl-navigation__link.selected:before {
             font-family: 'Material Icons';
             font-weight: 400;
@@ -91,12 +99,15 @@
                 <div class="mdl-layout-spacer"></div>
                 <!-- Navigation. We hide it in small screens. -->
                 <nav class="mdl-navigation controls">
-                    <!-- <a class="mdl-navigation__link mdl-navigation__link--icon github" href="https://github.com/warpdesign/modplayer-js"><i class="material-icons">link</i><span>GitHub</span></a> -->
-                    <button class="mdl-button mdl-js-button mdl-button--icon play" style="display:none;" onclick="togglePlay()">
-                        <i class="material-icons">play_arrow</i>
+                    <button class="mdl-button mdl-js-button play mdl-button--raised mdl-button--accent" style="display:none;" onclick="togglePlay()">
+                        <i class="material-icons">play_arrow</i><span>Play</span>
+                    </button>
+                    <button class="mdl-button mdl-js-button stop mdl-button--raised mdl-button--accent" style="display:none;" onclick="stop()">
+                        <i class="material-icons">stop</i>Stop
                     </button>
-                    <button class="mdl-button mdl-js-button mdl-button--icon play" style="display:none;" onclick="stop()">
-                        <i class="material-icons">stop</i>
+                    <button class="mdl-button mdl-js-button eject mdl-button--raised mdl-button--accent" style="display:none;" onclick="window.choose_local_file.click()">
+                        <input type="file" id="choose_local_file" onchange="loadLocalFile(this.files[0]);this.value = null;"/>
+                        <i class="material-icons">eject</i>Load
                     </button>
                     <div id="loader" class="mdl-spinner mdl-js-spinner is-active"></div>
                 </nav>
@@ -169,15 +180,7 @@ <h2 class="mdl-card__title-text" title="Click here to load another module"><div>
                             </div>
                         </div>
                     </div>
-                    <!-- <div class="mdl-card__actions mdl-card--border">
-                        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
-                            Get Started
-                        </a>
-                    </div> -->
                     <div class="mdl-card__menu">
-                        <!-- <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
-                            <i class="material-icons">attachment</i>
-                        </button> -->
                     </div>
                 </div>
             </div>

js/main.js

@@ -36,11 +36,15 @@ window.onload = function () {
 
     toast = new Toast('info-snackbar');
 
+    document.addEventListener('moduleLoadError', () => {
+        toast.show(`Error loading module: are you sure this is a Sound Tracker module file?`);
+        removeLoader()
+    })
+
     document.addEventListener('moduleLoaded', (event) => {
-        const split = moduleList[selectedMod].file.split('#'),
-            name = split.length > 1 && split[1] || split[0];
+        const name = event.data.title || "No Title"
 
-        toast.show(`Module loaded: ${name}`);
+        toast.show(`Module loaded: ${event.data.title || "No Name"}`);
 
         const samples = event.data.samples;
         let str = '';
@@ -54,17 +58,16 @@ window.onload = function () {
 
         document.querySelector('.song-title').innerText = event.data.title;
         document.querySelector('.title').innerText = name;
-        document.querySelector('.author').innerText = moduleList[selectedMod].author;
+        document.querySelector('.author').innerText = moduleList[selectedMod]?.author || 'Unknown Author';
         document.querySelector('.song-length').innerText = event.data.length;
         document.querySelector('.song-samples').innerText = event.data.samples.length;
         document.querySelector('.song-positions').innerText = event.data.positions;
         document.querySelector('.song-patterns').innerText = event.data.patterns;
 
-        document.querySelector('#loader').classList.remove('is-active');
+        document.querySelector('a.mdl-navigation__link.selected')?.classList.remove('selected');
+        typeof selectedMod === 'number' && document.querySelector(`a.mdl-navigation__link.mod_${selectedMod}`).classList.add('selected');
 
-        document.querySelectorAll('.controls button').forEach((button) => {
-            button.style.display = 'inline-block';
-        });
+        removeLoader();
 
         togglePlayButton();
 
@@ -117,37 +120,6 @@ window.onload = function () {
         ModPlayer.setPlayingChannels(channelsPlaying);
     });
 
-    // function drawBars(amplitudeArray) {
-    //     var bufferLength = amplitudeArray.length;
-    //     ctx.fillStyle = 'rgb(0, 0, 0)';
-    //     ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-
-    //     var barWidth = (canvasWidth / bufferLength) * 2.5 - 1;
-    //     barWidth *= 2;
-    //     var barHeight;
-    //     var x = 0;
-
-    //     for (var i = 0; i < bufferLength; i++) {
-    //         barHeight = amplitudeArray[i];
-
-    //         ctx.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';
-    //         ctx.fillRect(x, canvasHeight - barHeight / 2, barWidth, barHeight / 2);
-
-    //         x += barWidth;
-    //     }
-    // }
-
-    // function drawOscillo(amplitudeArray) {
-    //     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-
-    //     for (var i = 0; i < amplitudeArray.length; i++) {
-    //         var value = amplitudeArray[i] / 256;
-    //         var y = canvasHeight - (canvasHeight * value) - 1;
-    //         ctx.fillStyle = '#000000';
-    //         ctx.fillRect(i, y, 1, 1);
-    //     }
-    // }
-
     ModPlayer.init({
         canvas: canvas,
         audioWorkletSupport: audioWorkletSupport
@@ -158,8 +130,17 @@ window.onload = function () {
     });
 }
 
+function removeLoader() {
+    document.querySelector('#loader').classList.remove('is-active');
+
+    document.querySelectorAll('.controls button').forEach((button) => {
+        button.style.display = 'inline-block';
+    });
+}
+
 function togglePlayButton() {
     document.querySelector('button.play i').innerText = ModPlayer.playing && 'pause' || 'play_arrow';
+    document.querySelector('button.play span').innerText = ModPlayer.playing && 'Pause' || 'Play';
 }
 
 function togglePlay() {
@@ -172,12 +153,17 @@ function stop() {
     togglePlayButton();
 }
 
-function loadModule(moduleIndex, hideDrawer = true) {
-    var moduleName = moduleList[moduleIndex].file;
+function loadLocalFile(file) {
+    console.log("should load local file", file);
+    loadModule(file, false)
+}
+
+function loadModule(module, hideDrawer = true) {
+    var moduleName = typeof module === 'number' && moduleList[module].file;
 
-    selectedMod = moduleIndex;
+    selectedMod = module;
 
-    if (ModPlayer.ready && moduleName) {
+    if (ModPlayer.ready && (moduleName || module)) {
         // I guess that's the best way to programmatically hide the drawer
         // since MDL does not provide any API to do that
         if (hideDrawer) {
@@ -190,10 +176,12 @@ function loadModule(moduleIndex, hideDrawer = true) {
             button.style.display = 'none';
         });
 
-        document.querySelector('a.mdl-navigation__link.selected').classList.toggle('selected');
-        document.querySelector(`a.mdl-navigation__link.mod_${moduleIndex}`).classList.add('selected');
+        const file = moduleName ?
+            (moduleName.match(/^http/) ? moduleName : prefix + moduleName)
+            :
+            module;
 
-        ModPlayer.loadModule(moduleName.match(/^http/) ? moduleName : prefix + moduleName)
+        ModPlayer.loadModule(file)
             .catch(err => {
                 toast.show(`Error loading module: ${err}`);
             });

js/mod-processor-es5.js

@@ -205,10 +205,25 @@ class PTModuleProcessor extends AudioWorkletProcessor{
         }
     }
 
+    isModule(buffer) {
+        // Very basic mod file detection, maybe we could check for M.K signature
+        // at offset 1080 instead
+        return buffer.byteLength > 20 && new DataView(buffer).getUint8(0x13) === 0;
+    }
+
     prepareModule(buffer) {
         console.log('Decoding module data...');
+
+        if (!this.isModule(buffer)) {
+            this.postMessage({
+                message: 'moduleLoadError',
+            })
+            return
+        }
+
         this.ready = false;
         this.init();
+
         this.buffer = buffer;
         this.name = BinUtils.readAscii(this.buffer, 20);
 
@@ -361,8 +376,6 @@ class PTModuleProcessor extends AudioWorkletProcessor{
                 }
 
                 this.decodeRow();
-
-                // console.log('** next row !', this.row.toString(16).padStart(2, "0"));
             }
         }
     }
@@ -372,7 +385,6 @@ class PTModuleProcessor extends AudioWorkletProcessor{
 
         // Loop ? Use loop parameter
         if (this.position > this.positions.length - 1) {
-            debugger;
             console.log('Warning: last position reached, going back to 0');
             this.position = 0;
         }
@@ -382,8 +394,6 @@ class PTModuleProcessor extends AudioWorkletProcessor{
         }
 
         this.pattern = this.positions[this.position];
-
-        console.log('** position', this.position, 'pattern:', this.pattern);
     }
 
     decodeRow() {
@@ -448,7 +458,6 @@ class PTModuleProcessor extends AudioWorkletProcessor{
         try {
             Effects[channel.cmd](this, channel);
         } catch (err) {
-            debugger;
             console.warn(`effect not implemented: ${channel.cmd.toString(16).padStart(2, '0')}/${channel.data.toString(16).padStart(2, '0')}`);
         }
     }
@@ -472,9 +481,9 @@ class PTModuleProcessor extends AudioWorkletProcessor{
                 data: null
             };
 
-            if (sample.finetune) {
-                debugger;
-            }
+            // if (sample.finetune) {
+            //     debugger;
+            // }
 
             // Existing mod players seem to play a sample only once if repeatLength is set to 2
             if (sample.repeatLength === 2) {
@@ -730,7 +739,6 @@ const Effects = {
      * Set Vibrato waveform + retrigger
      */
     0xE4(Module, channel) {
-        debugger;
         if (!Module.ticks) {
             // channel.vform = //
         }

js/mod-processor.js

@@ -20,7 +20,7 @@ const ModPlayer = {
         return this.createContext();
     },
 
-    async loadModule(url) {
+    async loadModule(module) {
         if (!this.ready) {
             return;
         } else {
@@ -36,7 +36,7 @@ const ModPlayer = {
             this.createContext();
         }
 
-        const buffer = await this.loadBinary(url);
+        const buffer = typeof module === 'string' ? await this.loadBinaryFromURL(module) : await this.loadBinaryFromLocalFile(module);
         this.postMessage({
             message: 'loadModule',
             buffer: buffer
@@ -45,13 +45,26 @@ const ModPlayer = {
         this.ready = true;
     },
 
-    async loadBinary(url) {
+    async loadBinaryFromURL(url) {
         const response = await betterFetch(url);
         const buffer = await response.arrayBuffer();
 
         return buffer;
     },
 
+    async loadBinaryFromLocalFile(file) {
+        return new Promise((resolve, reject) => {
+            var reader = new FileReader();
+            reader.onload = function(e) {
+                resolve(e.target.result);
+            };
+            reader.onerror = function(e) {
+                reject('Error : ' + e.type);;
+            };
+            reader.readAsArrayBuffer(file);
+        });
+    },
+
     createContext() {
         console.log('Creating audio context...');
         this.context = new (window.AudioContext || window.webkitAudioContext)();
@@ -138,7 +151,7 @@ const ModPlayer = {
 
     handleMessage(message) {
         switch (message.data.message) {
-            case 'moduleLoaded':
+            case 'moduleLoaded': {
                 this.loaded = true;
                 const event = new Event('moduleLoaded');
                 event.data = message.data.data;
@@ -147,11 +160,18 @@ const ModPlayer = {
                 if (!this.playing) {
                     this.renderScope();
                 }
-                break;
+            }
+            break;
 
             case 'toggleLowPass':
                 this.setLowPass(message.data.data.activate);
                 break;
+
+            default: {
+                this.loaded = true;
+                const event = new Event(message.data.message);
+                document.dispatchEvent(event);
+            }
         }
     },
 
@@ -308,8 +328,6 @@ const ModPlayer = {
             this.ctx.strokeStyle = style;
             this.ctx.fillStyle = style;
 
-            // this.ctx.beginPath();
-
             while (timeData[risingEdge] > 0 &&
                 risingEdge <= this.canvasWidth &&
                 risingEdge < timeData.length) {
@@ -329,12 +347,8 @@ const ModPlayer = {
 
             for (let x = risingEdge; x < timeData.length && x - risingEdge < this.canvasWidth; x++) {
                 const y = this.canvasHeight - (((timeData[x] + 1) / 2) * this.canvasHeight);
-                // this.ctx.moveTo(x - risingEdge + i * this.canvasWidth, y-1);
-                // this.ctx.lineTo(x - risingEdge + i * this.canvasWidth, y);
                 this.ctx.fillRect(x - risingEdge + pos * this.canvasWidth, y, 1, 1);
             }
-
-            // this.ctx.stroke();
         });
     }
 }

js/modplayer.js

@@ -4,8 +4,8 @@
   "description": "JavaScript player for SoundTracker/Noisetracker mod files using the webaudio AudioWorklet API.",
   "main": "js/modplayer.js",
   "scripts": {
-    "build": "microbundle",
-    "dev": "microbundle watch",
+    "build": "microbundle -i js/mod-processor.js -o dist && cp dist/modplayer-js.js js/mod-processor-es5.js",
+    "server": "http-server",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -28,6 +28,7 @@
   },
   "homepage": "https://github.com/warpdesign/modplayer-js#readme",
   "devDependencies": {
-    "microbundle": "^0.6.0"
+    "http-server": "^14.1.1",
+    "microbundle": "^0.15.1"
   }
 }