fix onEnded feature if using media element

Author: chrisweb

src/library/audio.ts

@@ -66,11 +66,6 @@ interface IMediaElementAudioSourceOptions extends MediaElementAudioSourceOptions
     loop: boolean;
 }
 
-interface IMediaElementAudioSourceNode extends MediaElementAudioSourceNode {
-    onended: IOnEnded;
-    loop: boolean;
-}
-
 export interface IChangeVolumeOptions {
     volume: number;
     sound?: ISound;
@@ -388,18 +383,18 @@ class PlayerAudio {
     public async createMediaElementSourceNode(sourceNodeOptions: IMediaElementAudioSourceOptions, sound: ISound): Promise<void> {
 
         const audioContext = await this.getAudioContext();
-        let mediaElementAudioSourceNode: IMediaElementAudioSourceNode;
+        let mediaElementAudioSourceNode: MediaElementAudioSourceNode;
 
         try {
-            mediaElementAudioSourceNode = audioContext.createMediaElementSource(sourceNodeOptions.mediaElement) as IMediaElementAudioSourceNode;
+            mediaElementAudioSourceNode = audioContext.createMediaElementSource(sourceNodeOptions.mediaElement) as MediaElementAudioSourceNode;
         } catch (error) {
             throw new PlayerError(error);
         }
 
         sound.mediaElementAudioSourceNode = mediaElementAudioSourceNode;
 
         // do we loop this song
-        mediaElementAudioSourceNode.loop = sourceNodeOptions.loop;
+        mediaElementAudioSourceNode.mediaElement.loop = sourceNodeOptions.loop;
 
         // ??? no onEnded on MediaElementSource: https://developer.mozilla.org/en-US/docs/Web/API/AudioScheduledSourceNode/onended
         // ??? mediaElementAudioSourceNode.mediaElement.ended
@@ -408,7 +403,8 @@ class PlayerAudio {
         // NOTE: the onEnded handler won't have any effect if the loop property is set to
         // true, as the audio won't stop playing. To see the effect in this case you'd
         // have to use AudioBufferSourceNode.stop()
-        mediaElementAudioSourceNode.onended = (): void => {
+        mediaElementAudioSourceNode.mediaElement.onended = (): void => {
+            sourceNodeOptions.onEnded();
             this.destroySourceNode(sound);
             // TODO on end destroy the audio element, probably not if loop enabled, but if loop
             // is disabled, maybe still a good idea to keep it (cache?), but not all audio elements
@@ -417,7 +413,7 @@ class PlayerAudio {
 
     }
 
-    public connectSourceNodeToGraphNodes(sourceNode: AudioBufferSourceNode | IMediaElementAudioSourceNode): void {
+    public connectSourceNodeToGraphNodes(sourceNode: AudioBufferSourceNode | MediaElementAudioSourceNode): void {
 
         // audio routing graph
         this.getAudioGraph().then((audioGraph: IAudioGraph) => {
@@ -576,4 +572,4 @@ class PlayerAudio {
 
 }
 
-export { PlayerAudio, IAudioGraph, IAudioOptions, IAudioBufferSourceOptions, IMediaElementAudioSourceOptions, IMediaElementAudioSourceNode };
+export { PlayerAudio, IAudioGraph, IAudioOptions, IAudioBufferSourceOptions, IMediaElementAudioSourceOptions };

src/library/core.ts

@@ -5,7 +5,6 @@ import {
     IAudioOptions,
     IAudioBufferSourceOptions,
     IMediaElementAudioSourceOptions,
-    IMediaElementAudioSourceNode
 } from './audio';
 import { PlayerRequest } from './request';
 import { PlayerError, IPlayerError } from './error';
@@ -696,6 +695,7 @@ export class PlayerCore {
             }
 
             // whichSound is optional, if set it can be the sound id or if it's a string it can be next / previous / first / last
+            // TODO: next / previous ... should be constants, more accurate to compare and would also allow id to be string or number
             const sound = this._getSoundFromQueue({ whichSound });
 
             // if there is no sound we could play, do nothing
@@ -763,6 +763,7 @@ export class PlayerCore {
             const sourceOptions: IAudioBufferSourceOptions = {
                 loop: sound.loop,
                 onEnded: (event: Event) => {
+                    this._onEnded()
                     console.log('AudioBufferSourceNode ended', event);
                 }
             };
@@ -806,6 +807,7 @@ export class PlayerCore {
             const sourceOptions: IMediaElementAudioSourceOptions = {
                 loop: sound.loop,
                 onEnded: (event: Event) => {
+                    this._onEnded()
                     console.log('MediaElementSourceNode ended', event);
                 },
                 mediaElement: sound.audioElement
@@ -820,7 +822,7 @@ export class PlayerCore {
 
         }
 
-        const mediaElementAudioSourceNode: IMediaElementAudioSourceNode = sound.mediaElementAudioSourceNode as IMediaElementAudioSourceNode;
+        const mediaElementAudioSourceNode: MediaElementAudioSourceNode = sound.mediaElementAudioSourceNode as MediaElementAudioSourceNode;
 
         // connect the source to the graph node(s)
         this._playerAudio.connectSourceNodeToGraphNodes(mediaElementAudioSourceNode);
@@ -1293,6 +1295,8 @@ export class PlayerCore {
 
         sound.onPlaying(playingPercentage, duration, sound.playTime);
 
+
+
     }
 
     public setAudioGraph(customAudioGraph: IAudioGraph): void {