1
0
Fork 0

Refactor to support multiple playbacks at once and Promises

This commit is contained in:
Starbeamrainbowlabs 2017-07-31 18:41:32 +01:00
parent 98ce186bb5
commit f2af3336c1
2 changed files with 31 additions and 18 deletions

View File

@ -12,15 +12,19 @@
<button onclick="play_sound_2();">Play Sound 2</button> <button onclick="play_sound_2();">Play Sound 2</button>
<button onclick="play_sound_3();">Play Sound 3</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();">Play Multiple Sounds</button>
<button onclick="play_multiple_sounds_promise();">Play Multiple Sounds with Promises</button>
<!-----------> <!----------->
<style> <style>
body { font-family: sans-serif; } body { font-family: sans-serif; }
</style> </style>
<script src="soundbox.min.js"></script> <script src="soundbox.js"></script>
<script> <script>
window.addEventListener("load", function(event) { window.addEventListener("load", function(event) {
window.soundbox = new SoundBox(); 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> </script>
</body> </body>
</html> </html>

View File

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