Having trouble playing audio on "touchstart" and then pausing audio on "touchend". I am using Howler.JS library to do so. Please let me know if you can help. Goal is to just play some audio as the user touches anywhere on the screen. Then pause the audio when the user lifts their finger. At the moment, I have the audio playing ontouch. However, the pause listener is not responding. Any ideas?
Howler JS link: https://github.com/goldfire/howler.js
<script>
document.addEventListener("touchstart", function(event) {
var sound = new Howl({
src: ['./audio/spray.mp3'],
});
sound.play();
});
document.addEventListener("touchend", function(event) {
var sound = new Howl({
src: ['./audio/spray.mp3'],
});
sound.pause();
sound.currentTime = 0;
});
</script>
It's been a long time without using Howler but I think the issue is that the Howler sound instances are different. When you do:
var sound = new Howl({
src: ['./audio/spray.mp3'],
});
You create a different instance with a different ID. If I remember correctly you can pause the sound with the ID or referencing the same instance.
So, you have to keep a reference to the sound instance being played.