8c37c8d96b
Closes #3. The code which defines what the buttons do and downloads songs and so forth are now completely separated from the player, which has the following API: - `XMPlayer.initAudio` -> starts up audio context; it's available as `XMPlayer.audioctx` - `XMPlayer.loadXM(ArrayBuffer)` -> returns `true` if loaded, otherwise barfs randomly - `XMPlayer.playXM()` -> starts playing - `XMPlayer.pauseXM()` -> obvious - `XMPlayer.stopXM()` -> obvious; call this before loading a new one Loading trackview.js is now optional; without it, the player won't do any visualizations. Or, you can override the following to get callbacks: - `XMView.pushEvent(e)` -> push an audio event onto the queue. Called once per tick (about 50Hz, controlled by song). `e` contains fields: - `t` - audio timestamp - `vu` - Float32Array of RMS power (volume) for each channel - `scopes` - [Float32Array] of oscilloscope data, one array per channel; `XMView.scope_width` contains # of samples to produce here - `songpos` - position in the song (# patterns played) - `pat` - pattern number currently playing - `row` - row within pattern - `XMView.pause()` - pause visualization - `XMView.stop()` - stop/reset visualization
111 lines
2.5 KiB
JavaScript
111 lines
2.5 KiB
JavaScript
(function (window, document) {
|
|
if (!window.XMPlayer) {
|
|
window.XMPlayer = {};
|
|
}
|
|
var XMPlayer = window.XMPlayer;
|
|
if (!window.XMView) {
|
|
window.XMView = {};
|
|
}
|
|
var XMView = window.XMView;
|
|
|
|
function loadXMAndInit(xmdata) {
|
|
if (!XMPlayer.loadXM(xmdata)) {
|
|
return;
|
|
}
|
|
|
|
XMView.init();
|
|
|
|
var playbutton = document.getElementById("playpause");
|
|
playbutton.innerHTML='Play';
|
|
playbutton.onclick = function() {
|
|
if (XMPlayer.playing) {
|
|
XMPlayer.pauseXM();
|
|
playbutton.innerHTML='Play';
|
|
} else {
|
|
XMPlayer.playXM();
|
|
playbutton.innerHTML='Pause';
|
|
}
|
|
};
|
|
playbutton.disabled = false;
|
|
|
|
return XMPlayer.xm;
|
|
}
|
|
|
|
function downloadXM(uri) {
|
|
var xmReq = new XMLHttpRequest();
|
|
xmReq.open("GET", uri, true);
|
|
xmReq.responseType = "arraybuffer";
|
|
xmReq.onload = function (xmEvent) {
|
|
var arrayBuffer = xmReq.response;
|
|
if (arrayBuffer) {
|
|
loadXMAndInit(arrayBuffer);
|
|
} else {
|
|
console.log("unable to load", uri);
|
|
}
|
|
};
|
|
xmReq.send(null);
|
|
}
|
|
|
|
XMPlayer.allowDrop = function(ev) {
|
|
ev.stopPropagation();
|
|
ev.preventDefault();
|
|
var elem = document.getElementById("playercontainer");
|
|
elem.className = (ev.type == "dragover" ? "draghover" : "playercontainer");
|
|
return false;
|
|
};
|
|
|
|
XMPlayer.handleDrop = function(e) {
|
|
console.log(e);
|
|
e.preventDefault();
|
|
var elem = document.getElementById("playercontainer");
|
|
elem.className = "playercontainer";
|
|
var files = e.target.files || e.dataTransfer.files;
|
|
if (files.length < 1) return false;
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
XMPlayer.stopXM();
|
|
loadXMAndInit(e.target.result);
|
|
};
|
|
reader.readAsArrayBuffer(files[0]);
|
|
return false;
|
|
};
|
|
|
|
function initFilelist() {
|
|
var el = document.getElementById('filelist');
|
|
xmuris.forEach(function(entry) {
|
|
var a = document.createElement('a');
|
|
a.text = entry[0];
|
|
a.href = '#'+entry[1];
|
|
a.onclick = function() {
|
|
el.style.display = "none";
|
|
XMPlayer.stopXM();
|
|
downloadXM(baseuri + entry[1]);
|
|
};
|
|
el.appendChild(a);
|
|
el.appendChild(document.createElement('br'));
|
|
});
|
|
var loadbutton = document.getElementById('loadbutton');
|
|
loadbutton.onclick = function() {
|
|
if (el.style.display == "none") {
|
|
el.style.display = "block";
|
|
} else {
|
|
el.style.display = "none";
|
|
}
|
|
};
|
|
}
|
|
|
|
window.onload = function() {
|
|
XMPlayer.initAudio();
|
|
initFilelist();
|
|
|
|
var uri = location.hash.substr(1);
|
|
if (uri === "") {
|
|
uri = "kamel.xm";
|
|
}
|
|
if (!uri.startsWith("http")) {
|
|
uri = baseuri + uri;
|
|
}
|
|
downloadXM(uri);
|
|
};
|
|
|
|
})(window, document);
|