karaoke
v0.2.1
Published
CD+G Player
Downloads
8
Readme
JavaScript CD+G Player
This is a CD Graphics (CD+G) implementation that draws to an HTML5 canvas. It's based on the Brandon Jones's fork of the player by Luke Tucker.
There are two main pieces that make this thing work:
CDGPlayer
library that decodes CD+G files draws the instructions to an HTML5 canvas- Demo app that creates a
CDGPlayer
instance and an<audio>
tag and keeps them synced
Usage as a Module
If all you wanna do is download this and see it in action, skip down to Running the Demo.
Otherwise, you're building some kind of Karaoke thing with this library. That's great!
Install this module
yarn add karaoke
/npm install karaoke
Import the library:
import CDGKaraokePlayer from 'karaoke';
Create an instance of the player:
const karaoke = new CDGKaraokePlayer();
Append the
canvas
andaudio
elements from the player instance:document.body.appendChild(karaoke.canvas); document.body.appendChild(karaoke.audio);
Load and play your audio/CDG:
karaoke.loadAndPlay('YOUR_AUDIO.mp3', 'YOUR_CDG.cdg');
Running the Demo
- Check out this repo.
yarn install
/npm install
- Add
test.mp3
andtest.cdg
to thebuild
folder alongsideindex.html
- Run
yarn start
/npm start
- Open
http://localhost:8069/
in your browser.
Implementation Notes
- Drawing uses requestAnimationFrame instead of a fixed timer. When syncing with the audio, it will process as many instructions as necessary based on the time since the last frame was drawn.
- The player maintains its own
Canvas
and draws someimageData
to it rather than usingfillRect
for each pixel. As it turns out, this made drawing really fast! - As a result of the change above, scaled display requires copying the player's canvas to another canvas. Well, maybe it's not totally required, but that's how it's working right now.
Future Improvements
- Isomorphic rendering. There is still a teeny bit of refactoring necessary to allow
CDGContext
to create a non-HTMLCanvasElement
canvas in a node.js environment, but it's already pretty close, I think. - CD+G authoring utils, like converting images to instructions, instruction timelines, etc.
Resources
- Jim Bumgardner's CD+G Revealed document/specification