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
82 lines
2.1 KiB
HTML
82 lines
2.1 KiB
HTML
<head>
|
|
<title>js xm</title>
|
|
<script src="http://a1k0n-pub.s3-website-us-west-1.amazonaws.com/xm/xmlist.js"></script>
|
|
<script src="xmeffects.js"></script>
|
|
<script src="trackview.js"></script>
|
|
<script src="xm.js"></script>
|
|
<script src="shell.js"></script>
|
|
<style>
|
|
|
|
.centered {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#filelist a { color: #fff; }
|
|
|
|
.playercontainer {
|
|
background:#000;
|
|
}
|
|
|
|
.draghover {
|
|
background:#000;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.hscroll {
|
|
overflow: auto;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.hscroll::-webkit-scrollbar {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.hscroll::-webkit-scrollbar:horizontal {
|
|
height: 11px;
|
|
}
|
|
|
|
.hscroll::-webkit-scrollbar-thumb {
|
|
border-radius: 2px;
|
|
border: 1px solid #93C3E9; /* should match background, can't be transparent */
|
|
background-color: #A0D4FD;
|
|
}
|
|
|
|
.hscroll::-webkit-scrollbar-track {
|
|
background-color: #333;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="playercontainer" class="playercontainer" ondrop="XMPlayer.handleDrop(event)"
|
|
ondragover="XMPlayer.allowDrop(event)" ondragleave="XMPlayer.allowDrop(event)">
|
|
<div><canvas class="centered" id='title' width="640" height="22"></canvas></div>
|
|
<div class="hscroll">
|
|
<div><canvas class="centered" id='vu' width="224" height="64"></canvas></div>
|
|
<div><canvas class="centered" id='gfxpattern' width="640" height="200"></canvas></div>
|
|
</div>
|
|
<div id='instruments'></div>
|
|
<div>
|
|
<p style="text-align: center">
|
|
<button id="playpause" disabled="true" style="width: 100px; background: #ccc;">Play</button>
|
|
<button id="loadbutton" style="width: 100px; background: #ccc">Load</button>
|
|
</p>
|
|
</div>
|
|
<div style="display: none" id='filelist'></div>
|
|
</div>
|
|
|
|
<pre>
|
|
code: <a href="http://github.com/a1k0n/jsxm/">github.com/a1k0n/jsxm</a>
|
|
todo:
|
|
- missing XM effects:
|
|
- E3x, E4x, E5x, E6x, E7x, E9x, EDx, EEx
|
|
- 7xy - tremolo
|
|
- Gxx, Hxy, Kxx, Lxx, Pxy, Txy
|
|
- render pattern with the wider fonts for fewer channels
|
|
- fix occasional rendering/audio hiccups when switching songs
|
|
</pre>
|
|
</body>
|
|
|