Add afterSongEnded and onSongEnd listeners

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
    */

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;