Refactor to support multiple playbacks at once and Promises

example.html

@@ -12,15 +12,19 @@
 		<button onclick="play_sound_2();">Play Sound 2</button>
 		<button onclick="play_sound_3();">Play Sound 3</button>
 		
+		<br />
+		
 		<button onclick="play_multiple_sounds();">Play Multiple Sounds</button>
 		
+		<button onclick="play_multiple_sounds_promise();">Play Multiple Sounds with Promises</button>
+		
 		
 		<!----------->
 		<style>
 			body { font-family: sans-serif; }
 		</style>
 		
-		<script src="soundbox.min.js"></script>
+		<script src="soundbox.js"></script>
 		<script>
 			window.addEventListener("load", function(event) {
 				window.soundbox = new SoundBox();
@@ -50,6 +54,13 @@
 					});
 				});
 			}
+			
+			function play_multiple_sounds_promise()
+			{
+				window.soundbox.play("beep1")
+					.then(() => window.soundbox.play("beep2"))
+					.then(() => window.soundbox.play("beep3"));
+			}
 		</script>
 	</body>
-</html>
+</html>

soundbox.js

@@ -1,17 +1,11 @@
 function SoundBox() {
 	this.sounds = {};
-	this.sound_callbacks = {};
-	this.load = function(sound_name, path) {
+	this.load = function(sound_name, path, callback) {
 		this.sounds[sound_name] = new Audio(path);
-		// reset the sound ready for the next playing
-		this.sounds[sound_name].addEventListener("ended", (function(event) {
-			event.target.currentTime = 0;
-			if(typeof this.sound_callbacks[sound_name] == "function")
-			{
-				this.sound_callbacks[sound_name](sound_name);
-				delete this.sound_callbacks[sound_name];
-			}
-		}).bind(this));
+		if(typeof callback == "function")
+			this.sounds[sound_name].addEventListener("canplaythrough", callback);
+		else
+			return new Promise((resolve, reject) => this.sounds[sound_name].addEventListener("canplaythrough", resolve));
 	};
 	
 	this.remove = function(sound_name) {
@@ -22,15 +16,23 @@ function SoundBox() {
 	};
 	
 	this.play = function(sound_name, callback) {
-		if(typeof this.sounds[sound_name] == "undefined")
-		{
+		if(typeof this.sounds[sound_name] == "undefined") {
 			console.error("Can't find sound called '" + sound_name + "'.");
 			return false;
 		}
 		
-		if(typeof callback == "function")
-			this.sound_callbacks[sound_name] = callback;
+		var soundInstance = this.sounds[sound_name].cloneNode(true);
 		
-		this.sounds[sound_name].play();
+		soundInstance.play();
+		
+		if(typeof callback == "function") {
+			console.log("Adding callback");
+			soundInstance.addEventListener("ended", callback);
+			return true;
+		}
+		else {
+			console.log("Returning promise");
+			return new Promise((resolve, reject) => soundInstance.addEventListener("ended", resolve));
+		}
 	};
 }