libgamemusic JavaScript player

A JavaScript version of the libgamemusic player. This runs in a browser and will play songs that are supported by libgamemusic. Source is on GitHub.

Demo

Embedding the player

To use the player in your own web page, you only need to include a single JavaScript file. You can then create HTML <span> elements wherever you wish a player to appear.

<script src="http://camoto.shikadi.net/libgamemusic/player.js"></script>

<span class="lgmPlayer" data-src="song.imf"></span>

The data-src attribute is a standard URL (same as you might use with an <img> element), so in the above example the file will be retrieved from the same location as the HTML document, however you can use a full http:// URL as well. The file is actually retrieved with an XHR request.

You can use normal CSS attributes on the class or element to change the player size.

Specifying the file type

The player will autodetect most file formats, however a couple cannot be detected automatically. If these formats should be played, you will need to manually indicate what file format they are.

You can also do this if you know what file format you will be playing, as it will speed up the loading time if the autodetection code does not have to run.

One of the file formats that needs to be manually specified is the WLF variant of the IMF format. IMF files default to a speed of 560 Hz, but WLF ones need to be played at 700 Hz. By specifying the wlf-idsoftware-type1 file format, the autodetection will be bypassed and the correct tempo will be used. Of course this will only allow type-1 IMF files to be played!

Autodetect: (wrong type/tempo, too slow)

Manually specified type: (correct tempo)

Loading files at runtime

Normally the song to play is loaded from the URL given in the HTML element, however the setSong() function can be used to pass raw file data to the player at runtime instead. This would only need to be used if you are obtaining the song from somewhere else, rather than a direct URL download.

This example uses a HTML file input control to allow the user to select a file on their local system, which is then played. Here, no data-src attribute is set as there is no file to play by default.

<span id="idBrowsePlayer" class="lgmPlayer"></span>
<input type="file" id="idFile" />
<script>
	function loadFile(ev) {
		var files = ev.target.files;
		var reader = new FileReader();
		reader.onload = fileData => {
			var content = fileData.target.result;
			var filename = files[0].name;

			var ctPlayer = document.getElementById('idBrowsePlayer');
			ctPlayer.player.setSong(content, filename);
		};
		reader.readAsArrayBuffer(files[0]);
	}
	document.getElementById('idFile')
		.addEventListener('change', loadFile, false);
</script>

Again, WLF files will play at the wrong tempo, so if a WLF file is loaded dynamically the file format will have to be specified in the call to setSong().

Sometimes, if you know the URL during the page load, it can be easier to simply set it before the player tries to download the song.

ctPlayer.oninit = function(el) {
	ctPlayer.dataset.src = 'http://example';
};

oninit() is called once the player has been initialised but immediately before it tries to download a song.

Hiding the player

If you want to hide the player and control the music yourself, you can do that too. Just use normal CSS to hide the player, and access it via JavaScript instead.

<span class="lgmPlayer" data-src="menusng.s3m" id="idHiddenPlayer" style="display: none;"></span>

<!-- Some example control buttons -->
<button onclick="var p = document.getElementById('idHiddenPlayer'); p.playbackStart(); return false;">Play</button>
<button onclick="var p = document.getElementById('idHiddenPlayer'); p.playbackStop(); return false;">Stop</button>
<button onclick="var p = document.getElementById('idHiddenPlayer'); p.seekToMs(0); return false;">Rewind</button>
<button onclick="var p = document.getElementById('idHiddenPlayer'); p.seekToMs(p.getSongLength() / 2); return false;">Seek to middle</button>

<!-- An example to retrieve the playback time -->
<span id="time">?</span>
<script>
	// Call a function when the player is loaded and the song is ready
	document.getElementById('idHiddenPlayer').onload = function(el) {
		var ctTime = document.getElementById('time');
		var p = el.player;

		// Override one of the functions
		p.updatePlayTime = function(msPlayback) {
			ctTime.innerHTML = msPlayback;
		};
	};
</script>

Outstanding issues

The following issues still need to be addressed.

• Return the playback time after looping so the progress bar loops back to the correct time.
• Perform the loop on the C++ side so there's no lag.
• Set a MIDI patch bank so .mid files can be played.
• Figure out why the drum loop in Zone 66 m01gmuz.670 doesn't repeat cleanly on Chrome (48 kHz) but is fine on Firefox (44.1 kHz).