initial commit
This commit is contained in:
Kouya Heika
894
player.js
Normal file
894
player.js
Normal file
@@ -0,0 +1,894 @@
|
||||
const XMP_NAME_SIZE = 64;
|
||||
const XMP_MAX_MOD_LENGTH = 256;
|
||||
const XMP_MAX_ENV_POINTS = 32;
|
||||
const XMP_MAX_KEYS = 121;
|
||||
const XMP_MAX_CHANNELS = 64;
|
||||
|
||||
const SR = 44100;
|
||||
const BUF = 1024;
|
||||
const BYTES = BUF * 4;
|
||||
const NOTES = ["C ", "C#", "D ", "D#", "E ", "F ", "F#", "G ", "G#", "A ", "A#", "B "];
|
||||
const EFFECTS_MAP = new Map([
|
||||
[
|
||||
'669',
|
||||
new Map([
|
||||
[96, 'A'], [97, 'B'], [98, 'C'], [99, 'D'], [100, 'E'], [126, 'F']
|
||||
])
|
||||
],
|
||||
[
|
||||
'Farandole',
|
||||
new Map([
|
||||
[249, '1'], [248, '2'], [122, '3'], [251, '4'], [254, '5'], [4, '6'],
|
||||
[256, '7'], [252, '8'], [123, '9'], [250, 'C'], [15, 'F']
|
||||
])
|
||||
],
|
||||
[
|
||||
'Imago Orpheus',
|
||||
new Map([
|
||||
[1, '1'], [2, '2'], [3, '3'], [4, '4'], [5, '5'], [6, '6'],
|
||||
[7, '7'], [8, '8'], [9, '9'], [10, 'A'], [11, 'B'], [12, 'C'],
|
||||
[13, 'D'], [14, 'E'], [15, 'F'], [16, 'G'], [17, 'H'], [18, 'I'],
|
||||
[19, 'J'], [20, 'K'], [21, 'L'], [22, 'M'], [23, 'N'], [24, 'O'],
|
||||
[25, 'P'], [26, 'Q'], [27, 'R'], [28, 'S'], [29, 'T'], [30, 'U'],
|
||||
[31, 'V'], [32, 'W'], [33, 'X'], [34, 'Y'], [35, 'Z']
|
||||
])
|
||||
],
|
||||
[
|
||||
'S3M',
|
||||
new Map([
|
||||
[163, 'A'], [11, 'B'], [13, 'C'], [10, 'D'], [2, 'E'], [1, 'F'],
|
||||
[3, 'G'], [4, 'H'], [29, 'I'], [180, 'J'], [6, 'K'], [5, 'L'],
|
||||
[9, 'O'], [27, 'Q'], [7, 'R'], [254, 'S'], [171, 'T'], [172, 'U'],
|
||||
[16, 'V'], [8, 'X'], [141, 'X'], [14, 'S']
|
||||
])
|
||||
],
|
||||
[
|
||||
'IT',
|
||||
new Map([
|
||||
[163, 'A'], [11, 'B'], [142, 'C'], [10, 'D'], [2, 'E'], [1, 'F'],
|
||||
[3, 'G'], [4, 'H'], [29, 'I'], [180, 'J'], [6, 'K'], [5, 'L'],
|
||||
[128, 'M'], [129, 'N'], [9, 'O'], [137, 'P'], [27, 'Q'], [7, 'R'],
|
||||
[254, 'S'], [135, 'T'], [172, 'U'], [16, 'V'], [17, 'W'], [8, 'X'],
|
||||
[138, 'Y'], [141, 'S'], [136, 'S'], [14, 'S'], [192, 'c'], [193, 'd'],
|
||||
[194, 'a'], [195, 'b'], [132, 'S'], [139, 'S'], [140, 'S']
|
||||
])
|
||||
],
|
||||
[
|
||||
'LIQ',
|
||||
new Map([
|
||||
[0, 'A'], [171, 'B'], [13, 'C'], [2, 'D'], [172, 'F'], [11, 'J'],
|
||||
[10, 'L'], [14, 'M'], [3, 'N'], [9, 'O'], [163, 'S'], [7, 'T'],
|
||||
[1, 'U'], [4, 'V'], [5, 'X'], [6, 'Y']
|
||||
])
|
||||
],
|
||||
[
|
||||
'Oktalyzer',
|
||||
new Map([
|
||||
[1, '1'], [2, '2'], [112, '0'], [113, '0'], [114, '0'], [115, '6'],
|
||||
[116, '5'], [156, '6'], [11, 'B'], [15, 'F'], [157, '5'], [12, 'C'],
|
||||
[10, 'A'], [174, 'E'], [17, 'E'], [0, '0']
|
||||
])
|
||||
],
|
||||
[
|
||||
'STX',
|
||||
new Map([
|
||||
[15, 'A'], [11, 'B'], [13, 'C'], [10, 'D'], [2, 'E'], [1, 'F'],
|
||||
[3, 'G'], [4, 'H'], [29, 'I'], [0, 'J']
|
||||
])
|
||||
],
|
||||
[
|
||||
'Funk',
|
||||
new Map([
|
||||
[121, 'A'], [120, 'B'], [122, 'C'], [123, 'D'], [124, 'G'], [125, 'H'],
|
||||
[0, 'L'], [12, 'N'], [127, 'O'], [14, 'O'], [15, 'O']
|
||||
])
|
||||
],
|
||||
[
|
||||
'Protracker',
|
||||
new Map([
|
||||
[0, '0'], [1, '1'], [2, '2'], [3, '3'], [4, '4'], [5, '5'],
|
||||
[6, '6'], [7, '7'], [8, '8'], [9, '9'], [10, 'A'], [11, 'B'],
|
||||
[12, 'C'], [13, 'D'], [14, 'E'], [15, 'F'], [16, 'G'], [27, 'Q'],
|
||||
[181, 'P'], [17, 'H'], [21, 'L'], [164, 'c'], [33, 'X'], [20, 'K'],
|
||||
[25, 'P'], [29, 'T'], [146, '4'], [160, 'x'], [161, 'x'], [171, 'F']
|
||||
])
|
||||
],
|
||||
]);
|
||||
|
||||
let lib = null, ctx = 0, audio = null, node = null, xmi = null;
|
||||
let playing = false, paused = false;
|
||||
let lastPattern = -1, lastPos = -1, lastRow = -1, lastSpeed = -1, lastBpm = -1;
|
||||
let volume = 100, stereo = 50;
|
||||
let efx_map = new Map();
|
||||
let meters = new Array();
|
||||
let active_meters = new Array();
|
||||
|
||||
let filename = 'unknown';
|
||||
let mode = 'tracker';
|
||||
|
||||
/* DOM Elements */
|
||||
const uiRoot = document.body.querySelector('.tracker');
|
||||
const uiHeader = uiRoot.querySelector(':scope > .header');
|
||||
const uiControls = uiHeader.querySelector(':scope > .holder > .controls');
|
||||
const buttonPlay = uiControls.querySelector(':scope button#play');
|
||||
const buttonPause = uiControls.querySelector(':scope button#pause');
|
||||
const buttonStop = uiControls.querySelector(':scope button#stop');
|
||||
const buttonDownload = uiControls.querySelector(':scope button#download');
|
||||
const titleBar = uiControls.querySelector(':scope input[name=title]');
|
||||
const curTimeText = uiControls.querySelector(':scope .curtime');
|
||||
const totalTimeText = uiControls.querySelector(':scope .totaltime');
|
||||
const speedText = uiControls.querySelector(':scope .speed');
|
||||
const bpmText = uiControls.querySelector(':scope .bpm');
|
||||
const typeText = uiControls.querySelector(':scope input[name=type]');
|
||||
const volumeBar = uiControls.querySelector(':scope input[name=volume]');
|
||||
const volumeText = uiControls.querySelector(':scope .vol-div .vol-text');
|
||||
const stereoBar = uiControls.querySelector(':scope input[name=stereo]');
|
||||
const stereoText = uiControls.querySelector(':scope .stsep-div .stsep-text');
|
||||
const uiOrder = uiHeader.querySelector(':scope > .order-box > .orders');
|
||||
const uiPatterns = uiRoot.querySelector(':scope > .patterns');
|
||||
const uiInstruments = uiControls.querySelector(':scope .instruments-div .instruments');
|
||||
const uiSamples = uiControls.querySelector(':scope .samples-div .samples');
|
||||
|
||||
let uiCurrentPattern = null, uiCurrentRow = null;
|
||||
/* End DOM Elements */
|
||||
|
||||
let headerHeight = 0, gapHeight = 0, rowHeight = 0;
|
||||
|
||||
let orderCells = [];
|
||||
let patternTables = [];
|
||||
let patternMeters = [];
|
||||
let patternRows = [];
|
||||
let instrumentRows = [];
|
||||
let sampleRows = [];
|
||||
|
||||
libxmp().then(m => {
|
||||
lib = m;
|
||||
if (!lib) throw new Error('libxmp module is null');
|
||||
|
||||
ctx = lib._xmp_create_context();
|
||||
if (!ctx) throw new Error('Failed to create context');
|
||||
|
||||
console.log('libxmp ready, ctx:', ctx);
|
||||
volumeBar.value = volume;
|
||||
stereoBar.value = stereo;
|
||||
['dragenter', 'dragover'].forEach(ev => {
|
||||
document.body.addEventListener(ev, e => {
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
['dragleave', 'drop'].forEach(ev => {
|
||||
document.body.addEventListener(ev, e => {
|
||||
e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
let url = params.get('media');
|
||||
if (url) {
|
||||
loadFromUrl(url);
|
||||
} else {
|
||||
document.body.addEventListener('drop', e => {
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) {
|
||||
stop();
|
||||
orderCells.forEach(e => e.remove());
|
||||
patternTables.forEach(e => e.remove());
|
||||
patternMeters.forEach(e => {e.forEach(f => {f.l.remove(); f.r.remove();})});
|
||||
patternRows.forEach(e => e.forEach(f => f.remove()));
|
||||
instrumentRows.forEach(e => e.remove());
|
||||
sampleRows.forEach(e => e.remove());
|
||||
orderCells = [];
|
||||
patternTables = [];
|
||||
patternMeters = [];
|
||||
patternRows = [];
|
||||
instrumentRows = [];
|
||||
sampleRows = [];
|
||||
meters = new Array();
|
||||
active_meters = new Array();
|
||||
filename = file.name;
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
file.arrayBuffer().then(buffer => loadModule(new Uint8Array(buffer)));
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function dispatch(name, detail) {
|
||||
window.dispatchEvent(new CustomEvent(name, { detail }));
|
||||
}
|
||||
|
||||
function readString(ptr, maxLen = 0) {
|
||||
if (!ptr) return null;
|
||||
return maxLen ? lib.UTF8ToString(ptr, maxLen).replace(/\0.*$/, '') : lib.UTF8ToString(ptr);
|
||||
}
|
||||
|
||||
function readEvent(ptr) {
|
||||
if (!ptr) return null;
|
||||
return {
|
||||
note : lib.getValue(ptr + 0, 'i8'),
|
||||
ins : lib.getValue(ptr + 1, 'i8'),
|
||||
vol : lib.getValue(ptr + 2, 'i8'),
|
||||
fxt : lib.getValue(ptr + 3, 'i8'),
|
||||
fxp : lib.getValue(ptr + 4, 'i8'),
|
||||
f2t : lib.getValue(ptr + 5, 'i8'),
|
||||
f2p : lib.getValue(ptr + 6, 'i8'),
|
||||
_flag: lib.getValue(ptr + 7, 'i8')
|
||||
};
|
||||
}
|
||||
|
||||
function readChannel(ptr) {
|
||||
return {
|
||||
pan : lib.getValue(ptr + 0, 'i32'),
|
||||
vol : lib.getValue(ptr + 4, 'i32'),
|
||||
flg : lib.getValue(ptr + 8, 'i32')
|
||||
};
|
||||
}
|
||||
|
||||
function readEnvelope(ptr) {
|
||||
if (!ptr) return null;
|
||||
const flg = lib.getValue(ptr + 0, 'i32');
|
||||
const npt = lib.getValue(ptr + 4, 'i32');
|
||||
const data = [];
|
||||
for (let i = 0; i < npt * 2 && i < XMP_MAX_ENV_POINTS * 2; i++) {
|
||||
data.push(lib.getValue(ptr + 28 + i * 2, 'i16'));
|
||||
}
|
||||
return {
|
||||
flg,
|
||||
npt,
|
||||
scl : lib.getValue(ptr + 8, 'i32'),
|
||||
sus : lib.getValue(ptr + 12, 'i32'),
|
||||
sue : lib.getValue(ptr + 16, 'i32'),
|
||||
lps : lib.getValue(ptr + 20, 'i32'),
|
||||
lpe : lib.getValue(ptr + 24, 'i32'),
|
||||
data
|
||||
};
|
||||
}
|
||||
|
||||
function readSubinstrument(ptr) {
|
||||
if (!ptr) return null;
|
||||
return {
|
||||
vol : lib.getValue(ptr + 0, 'i32'),
|
||||
gvl : lib.getValue(ptr + 4, 'i32'),
|
||||
pan : lib.getValue(ptr + 8, 'i32'),
|
||||
xpo : lib.getValue(ptr + 12, 'i32'),
|
||||
fin : lib.getValue(ptr + 16, 'i32'),
|
||||
vwf : lib.getValue(ptr + 20, 'i32'),
|
||||
vde : lib.getValue(ptr + 24, 'i32'),
|
||||
vra : lib.getValue(ptr + 28, 'i32'),
|
||||
vsw : lib.getValue(ptr + 32, 'i32'),
|
||||
rvv : lib.getValue(ptr + 36, 'i32'),
|
||||
sid : lib.getValue(ptr + 40, 'i32'),
|
||||
nna : lib.getValue(ptr + 44, 'i32'),
|
||||
dct : lib.getValue(ptr + 48, 'i32'),
|
||||
dca : lib.getValue(ptr + 52, 'i32'),
|
||||
ifc : lib.getValue(ptr + 56, 'i32'),
|
||||
ifr : lib.getValue(ptr + 60, 'i32')
|
||||
};
|
||||
}
|
||||
|
||||
function readInstrument(basePtr, index) {
|
||||
const ptr = basePtr + index * 764;
|
||||
const name = readString(ptr, 32);
|
||||
const nsm = lib.getValue(ptr + 36, 'i32');
|
||||
const subPtr = lib.getValue(ptr + 752, 'i32');
|
||||
|
||||
const map = [];
|
||||
for (let k = 0; k < XMP_MAX_KEYS; k++) {
|
||||
const mptr = ptr + 512 + k * 2;
|
||||
map.push({
|
||||
ins : lib.getValue(mptr, 'i8'),
|
||||
xpo : lib.getValue(mptr + 1, 'i8')
|
||||
});
|
||||
}
|
||||
|
||||
const sub = [];
|
||||
if (nsm > 0 && nsm <= 255 && subPtr) {
|
||||
for (let s = 0; s < nsm; s++) {
|
||||
sub.push(readSubinstrument(subPtr + s * 64));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
vol : lib.getValue(ptr + 32, 'i32'),
|
||||
nsm,
|
||||
rls : lib.getValue(ptr + 40, 'i32'),
|
||||
aei : readEnvelope(ptr + 44),
|
||||
pei : readEnvelope(ptr + 200),
|
||||
fei : readEnvelope(ptr + 356),
|
||||
map,
|
||||
sub
|
||||
};
|
||||
}
|
||||
|
||||
function readSample(basePtr, index) {
|
||||
const ptr = basePtr + index * 52;
|
||||
return {
|
||||
name : readString(ptr, 32),
|
||||
len : lib.getValue(ptr + 32, 'i32'),
|
||||
lps : lib.getValue(ptr + 36, 'i32'),
|
||||
lpe : lib.getValue(ptr + 40, 'i32'),
|
||||
flg : lib.getValue(ptr + 44, 'i32'),
|
||||
data : lib.getValue(ptr + 48, 'i32')
|
||||
};
|
||||
}
|
||||
|
||||
function readTrack(ptr) {
|
||||
if (!ptr) return null;
|
||||
const rows = lib.getValue(ptr + 0, 'i32');
|
||||
const events = [];
|
||||
const eventPtr = ptr + 4;
|
||||
for (let r = 0; r < rows; r++) {
|
||||
events.push(readEvent(eventPtr + r * 8));
|
||||
}
|
||||
return { rows, events };
|
||||
}
|
||||
|
||||
function readPattern(ptr, chn) {
|
||||
if (!ptr) return null;
|
||||
const rows = lib.getValue(ptr + 0, 'i32');
|
||||
const index = [];
|
||||
for (let i = 0; i < chn; i++) {
|
||||
index.push(lib.getValue(ptr + 4 + i * 4, 'i32'));
|
||||
}
|
||||
return { rows, index };
|
||||
}
|
||||
|
||||
function get_module_info(context) {
|
||||
if (!lib || !context) return null;
|
||||
|
||||
const infoSize = 36;
|
||||
const infoPtr = lib._malloc(infoSize);
|
||||
lib._xmp_get_module_info(context, infoPtr);
|
||||
|
||||
const md5 = [];
|
||||
for (let i = 0; i < 16; i++) md5.push(lib.getValue(infoPtr + i, 'i8'));
|
||||
|
||||
const vol_base = lib.getValue(infoPtr + 16, 'i32');
|
||||
const mod_ptr = lib.getValue(infoPtr + 20, 'i32');
|
||||
const comment_ptr = lib.getValue(infoPtr + 24, 'i32');
|
||||
const num_sequences = lib.getValue(infoPtr + 28, 'i32');
|
||||
const seq_data_ptr = lib.getValue(infoPtr + 32, 'i32');
|
||||
|
||||
const comment = readString(comment_ptr);
|
||||
|
||||
const sequences = [];
|
||||
if (seq_data_ptr && num_sequences > 0) {
|
||||
for (let i = 0; i < num_sequences; i++) {
|
||||
const s = seq_data_ptr + i * 8;
|
||||
sequences.push({
|
||||
start: lib.getValue(s, 'i32'),
|
||||
length: lib.getValue(s + 4, 'i32')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let mod = null;
|
||||
if (mod_ptr) {
|
||||
const name = readString(mod_ptr, XMP_NAME_SIZE);
|
||||
const type = readString(mod_ptr + XMP_NAME_SIZE, XMP_NAME_SIZE);
|
||||
|
||||
const base = mod_ptr + 2 * XMP_NAME_SIZE;
|
||||
const pat = lib.getValue(base + 0, 'i32');
|
||||
const trk = lib.getValue(base + 4, 'i32');
|
||||
const chn = lib.getValue(base + 8, 'i32');
|
||||
const ins = lib.getValue(base + 12, 'i32');
|
||||
const smp = lib.getValue(base + 16, 'i32');
|
||||
const spd = lib.getValue(base + 20, 'i32');
|
||||
const bpm = lib.getValue(base + 24, 'i32');
|
||||
const len = lib.getValue(base + 28, 'i32');
|
||||
const rst = lib.getValue(base + 32, 'i32');
|
||||
const gvl = lib.getValue(base + 36, 'i32');
|
||||
|
||||
const xxp = lib.getValue(base + 40, 'i32');
|
||||
const xxt = lib.getValue(base + 44, 'i32');
|
||||
const xxi = lib.getValue(base + 48, 'i32');
|
||||
const xxs = lib.getValue(base + 52, 'i32');
|
||||
const xxc = base + 56;
|
||||
const xxo = base + 56 + 64 * 12;
|
||||
|
||||
const patterns = [];
|
||||
if (xxp) {
|
||||
for (let i = 0; i < pat; i++) {
|
||||
const p = lib.getValue(xxp + i * 4, 'i32');
|
||||
patterns.push(readPattern(p, chn));
|
||||
}
|
||||
}
|
||||
|
||||
const tracks = [];
|
||||
if (xxt) {
|
||||
for (let i = 0; i < trk; i++) {
|
||||
const t = lib.getValue(xxt + i * 4, 'i32');
|
||||
tracks.push(readTrack(t));
|
||||
}
|
||||
}
|
||||
|
||||
const instruments = [];
|
||||
if (xxi && ins > 0) {
|
||||
for (let i = 0; i < ins; i++) {
|
||||
instruments.push(readInstrument(xxi, i));
|
||||
}
|
||||
}
|
||||
|
||||
const samples = [];
|
||||
if (xxs && smp > 0) {
|
||||
for (let i = 0; i < smp; i++) {
|
||||
samples.push(readSample(xxs, i));
|
||||
}
|
||||
}
|
||||
|
||||
const channels = [];
|
||||
for (let i = 0; i < chn; i++) {
|
||||
channels.push(readChannel(xxc + i * 16));
|
||||
}
|
||||
|
||||
const order = [];
|
||||
for (let i = 0; i < XMP_MAX_MOD_LENGTH && i < len; i++) {
|
||||
order.push(lib.getValue(xxo + i, 'i8') & 0xFF);
|
||||
}
|
||||
|
||||
mod = {
|
||||
name, type, pat, trk, chn, ins, smp, spd, bpm, len, rst, gvl,
|
||||
order, channels, patterns, tracks, instruments, samples
|
||||
};
|
||||
}
|
||||
|
||||
lib._free(infoPtr);
|
||||
return { md5, vol_base, mod, comment, num_sequences, sequences };
|
||||
}
|
||||
|
||||
function get_frame_info(context) {
|
||||
if (!lib || !context) return null;
|
||||
|
||||
const infoSize = 2048; // generous
|
||||
const ptr = lib._malloc(infoSize);
|
||||
lib._xmp_get_frame_info(context, ptr);
|
||||
|
||||
const info = {
|
||||
pos: lib.getValue(ptr + 0, 'i32'),
|
||||
pattern: lib.getValue(ptr + 4, 'i32'),
|
||||
row: lib.getValue(ptr + 8, 'i32'),
|
||||
num_rows: lib.getValue(ptr + 12, 'i32'),
|
||||
frame: lib.getValue(ptr + 16, 'i32'),
|
||||
speed: lib.getValue(ptr + 20, 'i32'),
|
||||
bpm: lib.getValue(ptr + 24, 'i32'),
|
||||
time: lib.getValue(ptr + 28, 'i32'),
|
||||
total_time: lib.getValue(ptr + 32, 'i32'),
|
||||
frame_time: lib.getValue(ptr + 36, 'i32'),
|
||||
buffer: lib.getValue(ptr + 40, 'i32'),
|
||||
buffer_size: lib.getValue(ptr + 44, 'i32'),
|
||||
total_size: lib.getValue(ptr + 48, 'i32'),
|
||||
volume: lib.getValue(ptr + 52, 'i32'),
|
||||
loop_count: lib.getValue(ptr + 56, 'i32'),
|
||||
virt_channels: lib.getValue(ptr + 60, 'i32'),
|
||||
virt_used: lib.getValue(ptr + 64, 'i32'),
|
||||
sequence: lib.getValue(ptr + 68, 'i32')
|
||||
};
|
||||
|
||||
const chanInfoPtr = ptr + 72;
|
||||
const chanSize = 24;
|
||||
info.channel_info = [];
|
||||
|
||||
for (let i = 0; i < XMP_MAX_CHANNELS; i++) {
|
||||
const c = chanInfoPtr + i * chanSize;
|
||||
info.channel_info.push({
|
||||
period: lib.getValue(c + 0, 'i32'),
|
||||
position: lib.getValue(c + 4, 'i32'),
|
||||
pitchbend: lib.getValue(c + 8, 'i16'),
|
||||
note: lib.getValue(c + 10, 'i8'),
|
||||
instrument: lib.getValue(c + 11, 'i8'),
|
||||
sample: lib.getValue(c + 12, 'i8'),
|
||||
volume: lib.getValue(c + 13, 'i8'),
|
||||
pan: lib.getValue(c + 14, 'i8'),
|
||||
reserved: lib.getValue(c + 15, 'i8'),
|
||||
event: readEvent(c + 16)
|
||||
});
|
||||
}
|
||||
|
||||
lib._free(ptr);
|
||||
return info;
|
||||
}
|
||||
|
||||
async function loadFromUrl(url) {
|
||||
const res = await fetch(url);
|
||||
console.log(res);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
filename = res.headers.get('content-disposition');
|
||||
if (filename && (filename.indexOf('attachment') !== -1 || filename.indexOf('inline') !== -1)) {
|
||||
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
|
||||
var matches = filenameRegex.exec(filename);
|
||||
if (matches != null && matches[1]) {
|
||||
filename = matches[1].replace(/['"]/g, '');
|
||||
}
|
||||
} else {
|
||||
filename = res.url.substring(res.url.lastIndexOf('/')+1)
|
||||
if (filename.indexOf('?') !== -1) {
|
||||
filename.substring(0, filename.lastIndexOf('?'));
|
||||
}
|
||||
}
|
||||
const buf = await res.arrayBuffer();
|
||||
loadModule(new Uint8Array(buf));
|
||||
}
|
||||
|
||||
async function loadModule(u8buf) {
|
||||
try {
|
||||
console.log('Module size:', u8buf.byteLength, 'bytes');
|
||||
|
||||
const ptr = lib._malloc(u8buf.byteLength);
|
||||
if (!ptr) throw new Error('Malloc failed for module');
|
||||
lib.HEAPU8.set(u8buf, ptr);
|
||||
console.log(u8buf);
|
||||
|
||||
const ret = lib._xmp_load_module_from_memory(ctx, ptr, u8buf.byteLength);
|
||||
lib._free(ptr);
|
||||
if (ret !== 0) throw new Error(`Load failed: ${ret}`);
|
||||
|
||||
const blob = new Blob([u8buf], { type: 'application/octet-stream' });
|
||||
buttonDownload.onclick = () => {
|
||||
const link = document.createElement('a');
|
||||
link.href = window.URL.createObjectURL(blob);
|
||||
link.download = filename;
|
||||
link.click();
|
||||
};
|
||||
buttonDownload.disabled = false;
|
||||
|
||||
xmi = get_module_info(ctx);
|
||||
efx_map = getEffectsMap();
|
||||
|
||||
for(let c = 0; c < xmi.mod.chn; c++)
|
||||
active_meters.push({l:null,r:null});
|
||||
|
||||
Promise.resolve().then(() => {
|
||||
titleBar.value = xmi.mod.name;
|
||||
typeText.value = xmi.mod.type;
|
||||
totalTimeText.textContent = (Math.floor(((xmi.sequences[0].length / 1000) / 60) % 60)).toString().padStart(2, '0') + ':' +
|
||||
(Math.floor((xmi.sequences[0].length / 1000) % 60)).toString().padStart(2, '0');
|
||||
if (mode == 'tracker') {
|
||||
preloadOrder();
|
||||
|
||||
loadInstruments();
|
||||
loadSamples();
|
||||
|
||||
// load first pattern
|
||||
let p = xmi.mod.order[0];
|
||||
uiNewPattern = createPatternTable(p);
|
||||
patternTables[p] = uiNewPattern;
|
||||
uiPatterns.appendChild(uiNewPattern);
|
||||
}
|
||||
console.log('Module loaded successfully');
|
||||
document.getElementById('play').disabled = false;
|
||||
dispatch('moduleReady');
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Load error:', err);
|
||||
alert('An error occured attempting to load the module.');
|
||||
}
|
||||
}
|
||||
|
||||
function getEffectsMap() {
|
||||
const type = xmi.mod.type;
|
||||
console.log(type);
|
||||
|
||||
for (const entry of EFFECTS_MAP.entries()) {
|
||||
if (type.includes(entry[0])) {
|
||||
return entry[1];
|
||||
}
|
||||
}
|
||||
return EFFECTS_MAP.get('Protracker');
|
||||
}
|
||||
|
||||
async function preloadOrder() {
|
||||
for (let o = 0; o < xmi.mod.len; o++) {
|
||||
let index = xmi.mod.order[o];
|
||||
if (index == 0xFF) continue;
|
||||
const indexBox = document.createElement('div');
|
||||
indexBox.textContent = toHex(index);
|
||||
indexBox.width = indexBox.height = '24px';
|
||||
uiOrder.appendChild(indexBox);
|
||||
orderCells.push(indexBox);
|
||||
}
|
||||
}
|
||||
|
||||
function loadInstruments() {
|
||||
for (let i = 0; i < xmi.mod.ins; i++) {
|
||||
const row = uiInstruments.insertRow();
|
||||
|
||||
const index = row.insertCell();
|
||||
index.width = 16;
|
||||
index.textContent = toHex(i);
|
||||
|
||||
const name = row.insertCell();
|
||||
name.textContent = xmi.mod.instruments[i].name;
|
||||
|
||||
instrumentRows.push(row);
|
||||
}
|
||||
}
|
||||
|
||||
function loadSamples() {
|
||||
for (let s = 0; s < xmi.mod.smp; s++) {
|
||||
const row = uiSamples.insertRow();
|
||||
|
||||
const index = row.insertCell();
|
||||
index.width = 16;
|
||||
index.textContent = toHex(s);
|
||||
|
||||
const name = row.insertCell();
|
||||
name.textContent = xmi.mod.samples[s].name;
|
||||
|
||||
sampleRows.push(row);
|
||||
}
|
||||
}
|
||||
|
||||
function createPatternTable(p) {
|
||||
const chn = xmi.mod.chn;
|
||||
const pattern = xmi.mod.patterns[p];
|
||||
if (!pattern) return null;
|
||||
|
||||
let html = `<table class="pattern" id="p${p}">`;
|
||||
|
||||
// Header
|
||||
html += '<tr><th></th>';
|
||||
for (let c = 0; c < chn; c++) {
|
||||
html += `<th class="channel">Channel ${c+1}<div class="visualizer"><meter class="left" max="64"></meter><meter class="right" max="64"></meter></div></th>`;
|
||||
}
|
||||
html += '</tr>';
|
||||
|
||||
// Top gap
|
||||
html += '<tr class="gap"><td></td>';
|
||||
for (let c = 0; c < chn; c++) html += '<td></td>';
|
||||
html += '</tr>';
|
||||
|
||||
// Rows
|
||||
for (let r = 0; r < pattern.rows; r++) {
|
||||
html += `<tr id="r${r}"><td id="no">${toHex(r)}</td>`;
|
||||
for (let c = 0; c < chn; c++) {
|
||||
const track = pattern.index[c];
|
||||
const event = xmi.mod.tracks[track].events[r];
|
||||
|
||||
let noteText = '...';
|
||||
if (event.note < 0) noteText = '===';
|
||||
else if (event.note > 0) noteText = NOTES[event.note % 12] + Math.floor(event.note / 12);
|
||||
|
||||
let insText = event.ins > 0 ? toHex(event.ins) : '..';
|
||||
|
||||
let volText = '..';
|
||||
if (event.vol != 0) volText = toHex(event.vol - 1);
|
||||
else if (event.note > 0) volText = '40';
|
||||
|
||||
const fxp = event.fxp & 0xFF;
|
||||
let efxType = '.';
|
||||
let efxParam = '..';
|
||||
if (efx_map.has(event.fxt) && fxp != 0) {
|
||||
efxType = efx_map.get(event.fxt);
|
||||
efxParam = toHex(fxp);
|
||||
}
|
||||
|
||||
html += `<td><a class="note">${noteText}</a> <a class="instrument">${insText}</a> <a class="volume">${volText}</a> `+
|
||||
`<a class="effect_type">${efxType}</a><a class="effect_param">${efxParam}</a></td>`;
|
||||
}
|
||||
html += '</tr>';
|
||||
}
|
||||
|
||||
// Bottom gap
|
||||
html += '<tr class="gap"><td></td>';
|
||||
for (let c = 0; c < chn; c++) html += '<td></td>';
|
||||
html += '</tr></table>';
|
||||
|
||||
const container = document.createElement('div'); // Temporary container to parse HTML
|
||||
container.innerHTML = html;
|
||||
const patternTable = container.firstChild;
|
||||
|
||||
// Extract meters
|
||||
patternMeters[p] = [];
|
||||
const headerRow = patternTable.rows[0];
|
||||
for (let c = 0; c < chn; c++) {
|
||||
const vis = headerRow.cells[c + 1].querySelector('.visualizer');
|
||||
patternMeters[p][c] = {
|
||||
l: vis.querySelector('.left'),
|
||||
r: vis.querySelector('.right')
|
||||
};
|
||||
}
|
||||
|
||||
// Extract rows
|
||||
patternRows[p] = [];
|
||||
for (let r = 0; r < pattern.rows; r++) {
|
||||
patternRows[p][r] = patternTable.rows[r + 2];
|
||||
}
|
||||
|
||||
return patternTable;
|
||||
}
|
||||
|
||||
async function play() {
|
||||
if (playing && !paused) return;
|
||||
let initalized = (audio != null && node != null);
|
||||
|
||||
if (!initalized) {
|
||||
console.log('Starting playback...');
|
||||
audio = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: SR });
|
||||
var soundBuffer = lib._malloc(BYTES+1);
|
||||
await audio.resume();
|
||||
console.log('AudioContext ready');
|
||||
|
||||
node = audio.createScriptProcessor(BUF, 0, 2);
|
||||
console.log('ScriptProcessorNode created');
|
||||
|
||||
node.onaudioprocess = (e) => {
|
||||
const leftChannel = e.outputBuffer.getChannelData(0);
|
||||
const rightChannel = e.outputBuffer.getChannelData(1);
|
||||
|
||||
if (!paused && lib._xmp_play_buffer(ctx, soundBuffer, BYTES, 0) == 0) {
|
||||
const heap = lib.HEAP16;
|
||||
const base = soundBuffer >> 1;
|
||||
for (let i = 0; i < BUF; i++) {
|
||||
leftChannel[i] = heap[base + i*2] / 32768;
|
||||
rightChannel[i] = heap[base + i*2 + 1] / 32768;
|
||||
}
|
||||
|
||||
const xfi = get_frame_info(ctx);
|
||||
if (xfi) {
|
||||
if (xfi.pos !== lastPos) {
|
||||
dispatch('patternChanged', {xfi});
|
||||
lastPattern = xfi.pattern;
|
||||
lastPos = xfi.pos;
|
||||
lastRow = -1;
|
||||
}
|
||||
if (xfi.row !== lastRow) {
|
||||
dispatch('rowChanged', {xfi});
|
||||
lastRow = xfi.row;
|
||||
}
|
||||
if (xfi.speed !== lastSpeed) {
|
||||
dispatch('speedChanged', {xfi});
|
||||
lastSpeed = xfi.speed;
|
||||
}
|
||||
if (xfi.bpm !== lastBpm) {
|
||||
dispatch('bpmChanged', {xfi});
|
||||
lastBpm = xfi.bpm;
|
||||
}
|
||||
|
||||
// set time
|
||||
curTimeText.textContent = (Math.floor(((xfi.time / 1000) / 60) % 60)).toString().padStart(2, '0') + ':' +
|
||||
(Math.floor((xfi.time / 1000) % 60)).toString().padStart(2, '0');
|
||||
|
||||
for (var c = 0; c < xmi.mod.chn; c++) {
|
||||
const chan = xfi.channel_info[c];
|
||||
const chanVol = chan.volume & 0xFF;
|
||||
const chanPan = chan.pan & 0xFF;
|
||||
const leftVol = Math.floor(chanVol * (256 - chanPan) / 256);
|
||||
const rightVol = Math.floor(chanVol * chanPan / 256);
|
||||
|
||||
if (active_meters[c].l) active_meters[c].l.value = leftVol;
|
||||
if (active_meters[c].r) active_meters[c].r.value = rightVol;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
node.connect(audio.destination);
|
||||
lib._xmp_start_player(ctx, SR, 0);
|
||||
lib._xmp_set_player(ctx, 7, volume);
|
||||
lib._xmp_set_player(ctx, 1, stereo);
|
||||
}
|
||||
|
||||
paused = false;
|
||||
playing = true;
|
||||
buttonPlay.disabled = true;
|
||||
buttonPause.disabled = buttonStop.disabled = false;
|
||||
console.log('Playback started');
|
||||
}
|
||||
|
||||
function pause() {
|
||||
paused = true;
|
||||
buttonPlay.disabled = false;
|
||||
buttonPause.disabled = buttonStop.disabled = true;
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (!playing) return;
|
||||
console.log('Stopping playback');
|
||||
lib._xmp_end_player(ctx);
|
||||
if (node) node.disconnect();
|
||||
audio = null;
|
||||
node = null;
|
||||
playing = false;
|
||||
lastPattern = lastRow = lastPos = -1;
|
||||
buttonPlay.disabled = buttonPause.disabled = false;
|
||||
buttonStop.disabled = true;
|
||||
}
|
||||
|
||||
function changeVolume() {
|
||||
volumeText.textContent = volumeBar.value+'%';
|
||||
volume = volumeBar.value;
|
||||
lib._xmp_set_player(ctx, 7, volume);
|
||||
}
|
||||
|
||||
function changeStereoSeparation() {
|
||||
stereoText.textContent = stereoBar.value+'%';
|
||||
stereo = stereoBar.value;
|
||||
lib._xmp_set_player(ctx, 1, stereo);
|
||||
}
|
||||
|
||||
buttonPlay.onclick = play;
|
||||
buttonPause.onclick = pause;
|
||||
buttonStop.onclick = stop;
|
||||
volumeBar.oninput = changeVolume;
|
||||
stereoBar.oninput = changeStereoSeparation;
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
if (ctx) lib._xmp_free_context(ctx);
|
||||
});
|
||||
|
||||
window.addEventListener('patternChanged', e => {
|
||||
if (mode != 'tracker') return;
|
||||
const xfi = e.detail.xfi;
|
||||
|
||||
if (lastPos >= 0) orderCells[lastPos].classList.remove('active');
|
||||
orderCells[xfi.pos].className = 'active';
|
||||
orderCells[xfi.pos].scrollIntoView();
|
||||
|
||||
if (xfi.pattern == lastPattern) return;
|
||||
const p = xfi.pattern;
|
||||
|
||||
if (uiCurrentPattern != null) {
|
||||
uiCurrentPattern.style.display = 'none';
|
||||
}
|
||||
|
||||
let uiNewPattern = patternTables[p];
|
||||
if (uiNewPattern == null) {
|
||||
uiNewPattern = createPatternTable(p);
|
||||
patternTables[p] = uiNewPattern;
|
||||
uiPatterns.appendChild(uiNewPattern);
|
||||
}
|
||||
|
||||
uiNewPattern.style.display = '';
|
||||
uiCurrentPattern = uiNewPattern;
|
||||
|
||||
if (rowHeight === 0) {
|
||||
headerHeight = uiNewPattern.rows[0].clientHeight;
|
||||
gapHeight = uiNewPattern.rows[1].clientHeight;
|
||||
rowHeight = uiNewPattern.rows[2].clientHeight;
|
||||
}
|
||||
|
||||
for (let c = 0; c < xmi.mod.chn; c++) {
|
||||
active_meters[c] = patternMeters[p][c];
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('rowChanged', e => {
|
||||
if (mode != 'tracker') return;
|
||||
const xfi = e.detail.xfi;
|
||||
|
||||
if (uiCurrentRow != null) uiCurrentRow.classList.remove('playhead');
|
||||
|
||||
const patternIndex = lastPattern;
|
||||
let uiNewRow = patternRows[patternIndex] ? patternRows[patternIndex][xfi.row] : null;
|
||||
if (uiNewRow != null) {
|
||||
uiNewRow.classList.add('playhead');
|
||||
uiCurrentRow = uiNewRow;
|
||||
|
||||
if (rowHeight > 0) {
|
||||
const container = uiPatterns;
|
||||
const rowPosition = headerHeight + gapHeight + xfi.row * rowHeight;
|
||||
const targetScroll = rowPosition + rowHeight / 2 - container.clientHeight / 2;
|
||||
container.scrollTop = Math.max(0, targetScroll);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('speedChanged', e => {
|
||||
speedText.textContent = e.detail.xfi.speed;
|
||||
});
|
||||
|
||||
window.addEventListener('bpmChanged', e => {
|
||||
bpmText.textContent = e.detail.xfi.bpm;
|
||||
});
|
||||
|
||||
HTMLTableRowElement.prototype.insertHeadCell = function() {
|
||||
var head = document.createElement('th');
|
||||
this.append(head);
|
||||
return head;
|
||||
};
|
||||
|
||||
function toHex(s) {
|
||||
return s.toString(16).toUpperCase().padStart(2, '0');
|
||||
};
|
||||
Reference in New Issue
Block a user