[Resolved] Stop audio player in Slick carousel when Slick carousel slider changes slides

[Author]

Posts

[darmaJ-2]

Hi, I am using the audio custom field to store the audio in the CPT I make.
And then using the views to load it using the audio player.

The thing is I load the audio player in each tabs using the Bootstrap tabs, and when I change the tab the sound is still continue on.

What I want to do is I can have control of the audio player so when I go to another tab when the audio still played it got paused immediately

So, I noticed that when there is an audio played and I clicked on other audio player in different tabs it can automatically paused the before audio player and change the sound of current audio player i clicked on.

Can I use that same method to paused the audio when I clicked on the tab? If so can you give the sample code maybe like a javascript plugin that I can worked on?

[Christian Cox]

You can use jQuery or something similar to pause all audio players on the site:

jQuery('audio').each(function(){
    this.pause(); // Stop playing
}); 

You can trigger this code whenever you click a tab using an onclick handler or something similar. I don't have a cut-and-paste solution available but if you show me on your site I might be able to recommend something similar.

[darmaJ-2]

Hi Chris, thanks for your reply, sorry I caught in my work this past few days.

Actually I already upload the site so you can try to access the site in here : hidden link

So you can slide to the slide of WTO memberships.

In that slide I use the bootstrap tabs to create the tab list on the left and tabs content fpr the right content, and inside the right content I include the audio player, and for the slider i use slick carousel

And I can give you the access to the wp admin if needed

Thanks

[Christian Cox]

Okay I was able to see the membership slide and play the audio player. When the audio is playing, I open the JavaScript browser and enter the code I mentioned before:

jQuery('audio').each(function(){
    this.pause(); // Stop playing
}); 

When I run this code, the audio player stops playing. So this seems to be working well. Now we need to know when to trigger this code. It seems this code should be triggered any time the User navigates to a different slide. So you would need to use your slider's JavaScript API to trigger this code whenever the slide changes.

Slick, for example, has an API event beforeChange that can be used to trigger your own JavaScript before the slide is changed. I see in your code you have initialized the slick carousel here:

$('.main-carousel').slick({
    dots: false,
    arrows: true,
    appendArrows: '.button-container',
    infinite: false,
    fade: true,
    speed: 500,
    autoplay:false,
    draggable: false,
    swipeToSlide: false,
    touchMove: false,
    swipe: false,
  });

So you could try adding the beforeChange handler like this just after your initialization code:

jQuery('.main-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  jQuery('audio').each(function(){
    this.pause(); // Stop playing
}); 
});

[darmaJ-2]

Hi Chris thank you so much this is working perfectly like I want to!