Within reveal.js, I'm having issues pausing or ending 'background' audio playback. Within one of my first slides, I'm amending the tag with data-autoplay and data-ignore to ensure that it proceeds to play in the background past the current slide, however, I'd like to be able to end that audio after a set amount of slides. Ideally, a trigger class that I could add to the HTML of one of the later slides to end the track. Even being able to end ALL currently playing media would be fine.
Essentially, what I'm trying to achieve is a slideshow that, initially, talks about rock music and plays rock in the background for (lets say) 10 slides. Then I come to the next part of the presentation where I talk about classical music, and I want to have the rock stop and classical music play in the background for say, 13 slides etc. This slideshow will be shared, so I don't want there to be an expectation for users to 'know what to do when the time comes' with regards to playing/pausing media with a control bar etc.
I've researched thoroughly here and on GitHub no no avail, mostly because I'm not familiar with the way reveal.js is run, but moreso because of my lack of experience with js in general. I'm not sure whether I should just be trying to create a class with an eventlistener, nor how audio is handled or identified.
Apologies for my lack of js knowledge. I'm fairly competent in HTML and CSS, but I've not had nearly enough exposure to JS yet. Thanks in advance for anyone's help!
I ended up using the following code paired with a "stopAudio" id on my section to solve my issue.
Reveal.addEventListener('slidechanged', function(event) {
var currentSlide = event.currentSlide;
if (currentSlide.id === 'stopAudio') {
var audioElements = document.querySelectorAll('audio');
audioElements.forEach(function(audio) {
audio.pause();
});
}
});
Hopefully this helps someone else in the future