https://github.com/jazz-soft/jzz-gui-karaoke
Karaoke MIDI Player
https://github.com/jazz-soft/jzz-gui-karaoke
karaoke midi midi-file midi-files midi-player smf
Last synced: about 1 month ago
JSON representation
Karaoke MIDI Player
- Host: GitHub
- URL: https://github.com/jazz-soft/jzz-gui-karaoke
- Owner: jazz-soft
- License: mit
- Created: 2018-12-19T03:18:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T23:05:44.000Z (9 months ago)
- Last Synced: 2024-10-31T17:09:56.981Z (7 months ago)
- Topics: karaoke, midi, midi-file, midi-files, midi-player, smf
- Language: JavaScript
- Homepage:
- Size: 66.4 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# JZZ-gui-Karaoke
Karaoke MIDI Player
[](https://www.npmjs.com/package/jzz-gui-karaoke)
[](https://www.npmjs.com/package/jzz-gui-karaoke)
[](https://github.com/jazz-soft/JZZ-gui-Karaoke/actions)
[](https://coveralls.io/github/jazz-soft/JZZ-gui-Karaoke?branch=master)
## Install
`npm install jzz-gui-karaoke --save`
or `yarn add jzz-gui-karaoke`
or get the full development version and minified scripts from [**GitHub**](https://github.com/jazz-soft/JZZ-gui-Karaoke)
## Test
`node karaoke.js`
or `node karaoke.js filename.kar`
## Usage
##### Plain HTML
```html
//...
```
##### CDN (jsdelivr)
```html
//...
```
##### CDN (unpkg)
```html
//...
```
##### CommonJS
```js
var JZZ = require('jzz');
require('jzz-midi-smf')(JZZ);
require('jzz-gui-karaoke')(JZZ);
//...
```
##### TypeScript / ES6
```ts
import { JZZ } from 'jzz';
import { SMF } from 'jzz-midi-smf';
import { Karaoke } from 'jzz-gui-karaoke';
SMF(JZZ);
Karaoke(JZZ);
//...
```
##### AMD
```js
require(['JZZ', 'JZZ.midi.SMF', 'JZZ.gui.Karaoke'], function(JZZ, smf, kar) {
// ...
});
```
## Playing MIDI file
Please check the [**API Reference**](https://jazz-soft.net/doc/JZZ/karaoke.html) !
```html
<!--
var midiout = JZZ().openMidiOut().or('Cannot open MIDI Out');
var data = ... // load the .kar file as string
var smf = new JZZ.MIDI.SMF(data);
var karaoke = new JZZ.gui.Karaoke('kar');
var player = smf.player();
karaoke.load(smf);
player.connect(karaoke);
player.connect(midiout);
player.onEnd = function() { karaoke.reset(); };
player.play();
-->
```
## CSS
It's up to the user how to style the Karaoke.
Generated Karaoke DOM tree looks like the following:
```html
// parent element
// one for each track that has text
... // Title and oter special text events:
// t for @T..., k for @K..., v for @V..., i for @I..., l for @L..., w for @W...
// most of these except the title are best to set invisible.
// past verses
...
// current verse
// past line
...
// current line
Ma // past span
ry // current span
was // future spans - no class
...
// future lines - no class
...
// future verses - no class
...
```
## More information
Please visit [**https://jazz-soft.net**](https://jazz-soft.net) for more information.