@smwcentral/spc-player
v1.2.0
Published
SMW Central's SPC player
Downloads
3,347
Readme
SMW Central SPC Player
The online SNES SPC700 player used by SMW Central.
Usage
Load the stylesheet and the SPC player script:
<link rel="stylesheet" href="https://unpkg.com/@smwcentral/[email protected]/dist/spc_player.css">
<script src="https://unpkg.com/@smwcentral/[email protected]/dist/spc.js"></script>
You must also include the HTML from spc_player.html somewhere on the page.
After the DOM is ready, the SMWCentral.SPCPlayer
namespace will be globally available.
Loading SPC files
You can call:
SMWCentral.SPCPlayer.loadFromLink
with anHTMLAnchorElement
(i.e. an<a>
element) to fetch and play itshref
(which should be an SPC file).SMWCentral.SPCPlayer.loadSPC
with anArrayBuffer
containing an SPC file.SMWCentral.SPCPlayer.loadSong
with a song data object.
The song data objects used by loadSong
have the following structure:
interface Song {
index: number; /* Index of the song within the playlist */
files: string[]; /* Filenames in the playlist */
filename: string; /* Filename of the SPC */
title: string;
game: string;
comment: string;
date: string;
duration: number;
fade: number; /* Fade-out duration before ending the SPC (if not looping) */
author: string;
spc?: ArrayBuffer; /* SPC file to play */
data?: string; /* If `spc` is `undefined`, base64-encoded SPC file to play */
}
Playlists
Two steps are necessary to show a playlist in the SPC player.
First, you have to play the SPC using the low-level SMWCentral.SPCPlayer.loadSong
. Set index
, files
, and filename
appropriately. To make this easier, you can use SMWCentral.SPCPlayer.parseSPC
to extract the ID666 tags from an ArrayBuffer
containing an SPC file.
To make the playlist items interactive, set SMWCentral.SPCPlayer.createPlaylistItem
to a function that returns an HTMLLIElement
(i.e. an <li>
element). This function will be given, in order, the song that's currently playing (as a song data object), a filename of an SPC (from the files
property of the song
), and the index of that file within the playlist.
Events
If the player runs into an error, SMWCentral.SPCPlayer.onError
will be called with an error message. By default, the message is directly passed into window.alert
.
When a button in the interface is clicked, the following functions are called:
SMWCentral.SPCPlayer.onPlay
SMWCentral.SPCPlayer.onPause
SMWCentral.SPCPlayer.onRestart
SMWCentral.SPCPlayer.onStop
If the user turns off looping, SMWCentral.SPCPlayer.onEnd
is called when the SPC ends.
Custom interface
You can use any HTML and CSS for the SPC player. Check src/interface.js
for a list of elements that must exist.
Building
Building requires the Emscripten SDK. Execute npm run build
to compile production-ready files in dist/
, or npm run build-dev
for an unminified development build.
License
Released under the GNU Lesser General Public License v2.1.
Credits
Built and maintained by Telinc1. SMW Central is property of Noivern.
Uses Blargg's snes_spc library and logic from cosinusoidally's snes_spc_js, both licensed under the GNU Lesser General Public License v2.1.