mirror of https://github.com/sbrl/soundbox.git
Refactor to support multiple playbacks at once and Promises
This commit is contained in:
parent
98ce186bb5
commit
f2af3336c1
15
example.html
15
example.html
|
@ -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>
|
||||||
|
|
34
soundbox.js
34
soundbox.js
|
@ -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));
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue