diff --git a/src/CDGKaraokePlayer.js b/src/CDGKaraokePlayer.js index 8efa34b..0e84367 100644 --- a/src/CDGKaraokePlayer.js +++ b/src/CDGKaraokePlayer.js @@ -33,6 +33,7 @@ export default class CDGKaraokePlayer { width = 2 * WIDTH, height = 2 * HEIGHT, backgroundContainer, + onSongEnd, canvas = this.createDisplayCanvas(width, height), ctx = this.createCanvasContext(canvas), audio = this.createAudio(), @@ -46,10 +47,12 @@ export default class CDGKaraokePlayer { this.canvas = canvas; this.ctx = ctx; this.audio = audio; + this.onSongEnd = onSongEnd; // Create the CDGPlayer instance this.player = new CDGPlayer({ afterRender: this.afterRender, + afterSongEnded: this.afterSongEnded, ...playerOptions, }); @@ -136,6 +139,17 @@ export default class CDGKaraokePlayer { this.copyContextToCanvas(context); }; + /** + * Gets fired when a song ends + * + * @param {CDGContext} context - CDG rendering context + */ + afterSongEnded = (context) => { + if (this.onSongEnd) { + this.onSongEnd(context); + } + }; + /** * Sets the background color of the container */ diff --git a/src/CDGPlayer.js b/src/CDGPlayer.js index c24aefa..2049255 100644 --- a/src/CDGPlayer.js +++ b/src/CDGPlayer.js @@ -122,14 +122,17 @@ export default class CDGPlayer { * @param {Object} [options] - CDG player options * @param {Object} [options.contextOptions] - options for the CDG context * @param {function} [options.afterRender] - function to call after rendering a frame + * @param {function} [options.afterSongEnded] - function to call ater the song ended */ constructor({ contextOptions = {}, context = this.createContext(contextOptions), afterRender, + afterSongEnded, } = {}) { this.context = context; this.afterRender = afterRender; + this.afterSongEnded = afterSongEnded; } /** @@ -240,6 +243,11 @@ export default class CDGPlayer { * @return {self} */ stop() { + // TODO: dirty, this class has to know about the id of the audio element + if (document.getElementById("audio").ended) { + this.afterSongEnded && this.afterSongEnded(this.context); + } + cancelFrame(this.frameId); this.frameId = null; this.lastSyncPos = null;