Chip Player JS

About this fork

Chip Player JS is web-based chip tune player written by Matt Montag.

This fork can play Sega Daytona USA correctly.

This fork is to share my fixes like;

• Small bugfixes and improvements
  • [GME] fixed incorrect text encoding handling in the tags
  • [GME/nsf] supported FDS write protect for some tunes which use multi extend chips
  • [Font] added additional font to improve rendering Japanese text
    • the font is created by MM of 自家製フォント工房 licensed by SIL Open Font License (with some modifications made by me)
• additional file formats support
  • gbs, hes
  • vgm, vgz (webVGM, based on VGMPlay)
    • Replaced GME to improve .vgm/vgz support
    • yrw801.rom must be located at chip-player-js/public/instruments to play OPL4(YMF278)
  • s98 (webS98, based on m_s98.kpi S98V3)
    • supports rhythm samples for OPNA
    • corrects volume balance for PC-9801
      • the player reduces the volume of PSG ch if there's 9801 in 'system' tag.
    • the following sound samples must be located at chip-player-js/public/rhythm before building (each filenames are case sensitive)
      • 2608_BD.WAV
      • 2608_HH.WAV
      • 2608_RIM.WAV
      • 2608_SD.WAV
      • 2608_TOM.WAV
      • 2608_TOP.WAV
  • pmd (webMDX, based on pmdmini)
    • supports rhythm samples for OPNA
    • supports ADPCM/PCM (.pps, .ppc, .p86, .pzi)
    • the following sound samples must be located at chip-player-js/public/rhythm before building (each filenames are case sensitive)
      • 2608_BD.WAV
      • 2608_HH.WAV
      • 2608_RIM.WAV
      • 2608_SD.WAV
      • 2608_TOM.WAV
      • 2608_TOP.WAV
  • fmp (fmplayer)
    • supports rhythm rom for OPNA
    • supports ADPCM/PCM (.pvi, .pzi(for PPZ8))
    • ym2608_adpcm_rom.bin must be located at chip-player-js/public/rhythm before building (the filename is case sensitive)
  • psf, minipsf (webPSX)
  • 2sf, mini2sf (webDS)
  • gsf (webGSF)
• additional soundfonts
  • added two high quality piano soundfonts. if you'd like to listen piano solo this is good choice :)
    • place the following .sf2 at public/sondfonts folder to enable them
    • Equinox Grand Pianos
    • Warren S. Trachtman - Steinway Model-C Soundfont
• Reverb effect
  • may be useful when playing a system(like nes, gameboy, msx ...) that does not have its own reverb.
  • all impulse response files are from Open AIR.
    • Koli National Park - Summer (Creative Commons, CC BY 4.0)
      • www.openairlib.net
      • Andrew Chadwick
      • Simon Shelley
    • Maes Howe (Creative Commons, CC BY 4.0)
      • www.openairlib.net
      • Audiolab, University of York
      • Dr. Damian T. Murphy
    • St Lawrence Church Molenbeek (Creative Commons, CC BY 4.0)
      • Audiolab, University of York
      • Simon Shelley
    • Stairway, University of York (Creative Commons, CC BY 4.0)
      • Audiolab, University of York
      • Simon Shelley
    • The Dixon Studio Theatre, University of York (Creative Commons, CC BY 4.0)
      • Ben Lavin
      • Darren Robinson
      • Ya-Hsin Chou
    • St Andrew’s Church (Creative Commons, CC BY 4.0)
      • www.openairlib.net
      • Audiolab, University of York
      • Dr. Damian T. Murphy
    • Lady Chapel, St Albans Cathedral (Creative Commons, CC BY 4.0)
      • www.openairlib.net
      • Audiolab, University of York
      • Marcin Gorzel
      • Gavin Kearney
      • Aglaia Foteinou
      • Sorrel Hoare
      • Simon Shelley
    • Tyndall Bruce Monument (Creative Commons, CC BY 4.0)
      • www.openairlib.net
      • Audiolab, University of York
      • Dr. Damian T. Murphy

This player assumes each pcm files(.pzi, .pvi, .pdx ...) are in the same directory where the music files are.

Building Additional library

On this fork, an additional library must be present before launching yarn run build-chip-core.

$ source ~/src/emsdk/emsdk_env.sh

$ cd ../webGSF/emscripten
$ emmake make -f Emscripten.Makefile    # building libwebgsf.a

$ cd ../../
$ yarn run build-chip-core              # and finally build chip-core (chip-core.wasm)

You can also enable sf3 support of FluidLite by building with ENABLE_SF3 option like the following. Loading sf3 files is quite slow, furthermore, doing the above will increase the .wasm file by around 200kb.　 So please consider if you need it carefully.

$ cd fluidlite/build/
$ emcmake cmake -DENABLE_SF3=YES -DSTB_VORBIS=YES ..
$ emmake make clean && emmake make fluidlite-static

---

Play online: Chip Player JS. Feature requests? Create an issue.

Features

• Support popular game console formats and tracker formats (not exhaustive)
• Advanced sound control (channel volume, panning, etc.) like NotSoFatso's stereo and bandlimiting controls
• Built-in online music library like Chipmachine
• Simple music management (at least the ability to save favorites) like Winamp/Spotify
• High-quality MIDI playback with JS wavetable synthesis
  • Bonus: user-selectable soundbanks
• Track sequencer with player controls and shuffle mode
• Media key support in Chrome
• High performance
  • Time-to-audio under 500 ms (i.e. https://mmontag.github.io/chip-player-js/?play=ModArchives/aryx.s3m)
  • Instant search results
  • CPU usage under 25% in most circumstances

Development Notes

Architecture

This project was bootstrapped with Create React App.

The player engines come from C/C++ libraries such as game-music-emu and libxmp, compiled to JS with Emscripten. Where possible, these projects are incorporated using git subtree.

The C/C++ code is compiled by scripts/build-chip-core.js. This file also defines the list of exports that will be available to the JavaScript program. Components that go into this build are as follows:

• Manually selected cpp sources from game-music-emu.
• For libraries with their own build system like LibXMP and Fluidlite (detailed below):
  • Build a static library with Emscripten (i.e. using emconfigure, emmake)
  • Link the static library in build-chip-core.js
• tinyplayer.c: a super light MIDI file reader/player
• showcqtbar.c: a modified FFMPEG plugin providing lovely constant Q spectrum analysis for the visualizer.

The music catalog is created by scripts/build-catalog.js. This script looks for a ./catalog folder to build a music index. This location is untracked, so put a symlink here that points to your local music archive. TODO: Document the corresponding public location (CATALOG_PREFIX).

Local Development Setup

Prerequisites: yarn, cmake, emsdk.

• Clone the repository.
• Run yarn install.

In building the subprojects, we ultimately invoke emmake make instead of make to yield an object file that Emscripten can link to in the final build.

• Install the Emscripten SDK (emsdk).

• The build script in package.json looks for the emsdk in ~/src/emsdk. Modify this line to match your emsdk install location if necessary:

  "build-chip-core": "source ~/src/emsdk/emsdk_env.sh; node scripts/build-chip-core.js",

Tight coupling to Github Pages

The project is currently set up to deploy to Github Pages. The deploy and deploy-lite NPM scripts invoke the gh-pages NPM module.

If you wish to deploy to your own Github Pages account, change the "homepage" field in package.json.

Creating Config File

Chip Player JS needs .env file on project root directly to get some settings.
Create your file from sample.env:

cd chip-player-js/              # navigate to chip-player-js root
cp sample.env .env              # create .env file from sample

User Accounts and Saved Favorites Functionality

User account management is provided through Firebase Cloud Firestore. You must obtain your own Google Firebase credentials and update src/config/firebaseConfig.js with these credentials. This file is not tracked. Without these credentials, Login/Favorites functionality won't work.

Subproject: libxmp-lite

Our goal is to produce libxmp/libxmp-lite-stagedir/lib/libxmp-lite.a. Build libxmp (uses GNU make):

cd chip-player-js/libxmp/        # navigate to libxmp root
source ~/src/emsdk/emsdk_env.sh  # load the emscripten environment variables
autoconf
emconfigure ./configure
emmake make

Proceed to build libxmp-lite:

emmake make -f Makefile.lite     # this will have some errors, but they can be ignored
cd libxmp-lite-stagedir/
autoconf
emconfigure ./configure --enable-static --disable-shared
emmake make

Subproject: fluidlite

Our goal is to produce fluidlite/build/libfluidlite.a. Build fluidlite (uses Cmake):

cd chip-player-js/fluidlite/     # navigate to fluidlite root
source ~/src/emsdk/emsdk_env.sh  # load the emscripten environment variables
mkdir build                      # create a build folder for Cmake output
cd build                         
emcmake cmake -DDISABLE_SF3=1 .. # Cmake will generate a Makefile by default
                                 # Problems here? Try deleting CMake cache files
emmake make fluidlite-static

Subproject: psflib and lazyusf2

Our goal is to produce psflib/libpsflib.a and lazyusf2/liblazyusf.a. These use a special Emscripten.Makefile (loosely based on Jeurgen Wothke's webn64 .bat script).

Build psflib:

cd chip-player-js/psflib/
source ~/src/emsdk/emsdk_env.sh  # load the emscripten environment variables
emmake make -f Emscripten.Makefile libpsflib.a

Build liblazyusf:

cd ../lazyusf2/
emmake make -f Emscripten.Makefile liblazyusf.a

WebAssembly build

Once these are in place we can build the parent project. Our goal is to produce public/chip-core.wasm.

cd chip-player-js/
yarn run build-chip-core

This will use object files created in the previous steps and link them into chip-core.wasm. If you change some C/C++ component of the subprojects, you'll need to redo this process. Once we have chip-core.wasm, we can proceed to develop JavaScript interactively on localhost:

yarn start

Build the entire project:

yarn build

Or deploy to Github Pages:

yarn deploy

Deploy to Github Pages without rebuilding chip-core.wasm:

yarn deploy-lite

Related Projects and Resources

Chipmachine (Native)

http://sasq64.github.io/chipmachine/

Chipmachine is a multiplatform player supporting an enormous number of formats. Downloads music from an impressive variety of external sources. Most of these come from HTTP sources without CORS headers, not feasible for direct playback.

Muki (JS)

http://muki.io

Muki, by Tomás Pollak, is a polished JS player pulling together Timidity (MIDI), Munt (MT-32), libopenmpt (instead of libxmp), game-music-emu, Wildmidi, Adplug, Adlmidi (OPL3), mdxmini, and sc68. The music is a collection of PC game music.

Chiptune Blaster (JS)

https://github.com/wothke?tab=repositories

Jeurgen Wothke's collection of chipmusic projects ported to the web with Emscripten. He's beaten me to it, but with a rudimentary player and no built-in music collection. http://www.wothke.ch/blaster

SaltyGME (JS)

http://gamemusic.multimedia.cx/about

SaltyGME is a GME-based web player targeting Google Chrome NaCl. (Deprecated)

Cirrus Retro (JS)

https://github.com/multimediamike/cirrusretro-players

Cirrusretro is an updated version of SaltyGME compiled with Emscripten. Self-hosted file archive.

Audio Overload (Native)

https://www.bannister.org/software/ao.htm

Audio Overload is a multiplatform player supporting 33 formats.

JSGME (JS)

http://onakasuita.org/jsgme/

One of the first examples of GME compiled with Emscripten. Music collection is a self-hosted mirror of Famicompo entries.

MoseAmp (Native + JS)

https://github.com/osmose/moseamp

MoseAmp is a multiplatform player built with Electron. Some nice game console icons: https://www.deviantart.com/jaffacakelover/art/Pixel-Gaming-Machine-Icons-413704203

MIDI Stuff

The best modern option for playing MIDI is probably using a well-designed GM SoundFont bank with a good SoundFont 2.01 implementation like FluidSynth.

• SF2 Overview: https://schristiancollins.wordpress.com/2016/03/02/using-soundfonts-in-2016/
• Timidity compiled by Emscripten: https://bitmidi.com/
  • https://github.com/feross/timidity/commit/d1790eef24ff3b4067c536e45aa88c0863ad9676
  • Uses the 32 MB "Old FreePats sound set"
• SoundFonts at MuseScore: https://musescore.org/en/handbook/soundfonts-and-sfz-files#list
• SoundFonts at Woolyss: https://woolyss.com/chipmusic-soundfonts.php
• MIDI file library: https://github.com/craigsapp/midifile
• FluidSynth Lite, supports SF3: https://github.com/divideconcept/FluidLite
• Compress SF2 to SF3: https://github.com/cognitone/sf2convert

SoundFont credits

Diverse and usable GM SoundFonts.

• GeneralUser SF2 sound bank: http://schristiancollins.com/generaluser.php
• Many excellent piano SoundFonts: https://sites.google.com/site/soundfonts4u
• The Ultimate Megadrive SoundFont: https://musical-artifacts.com/artifacts/24
• NTONYX SoundFont: http://ntonyx.com/sf_f.htm

Music archives

• The best pop music MIDI archive comes from Colin Raffel's thesis work on MIDI alignment. About 20,000 cleaned MIDI files
  • Colin Raffel. "Learning-Based Methods for Comparing Sequences, with Applications to Audio-to-MIDI Alignment and Matching". PhD Thesis, 2016.
• VGM Rips: https://vgmrips.net
• VGMusic.com: https://archive.org/details/vgmusic
• Sound Canvas MIDI Collection: https://archive.org/details/sound_canvas_midi_collection
• The Mod Archive: https://modarchive.org/
• Zophar's Domain: https://www.zophar.net/music
• OPL Archive: http://opl.wafflenet.com/
• Piano E-Competition MIDI: http://www.piano-e-competition.com/midiinstructions.asp
• Modland: https://modland.com/pub/modules/

Miscellaneous

ISO 226 Equal loudness curves

License

A word about licensing: chip-player-js represents the hard work of many individuals because it is built upon several open-source projects. Each of these projects carries their own license restrictions, and chip-player-js as a whole must adhere to the most restrictive licenses among these. Therefore, chip-player-js is generally licensed under GPLv3.

However, each subdirectory in this project may contain additional, more specific license info that pertains to files contained therein. For example, the code under src/ is written by me and is more permissively MIT licensed.