Different audio on each slide of the bootstrap carousel

Question

I’m developing an application with bootstrap and I’m using its carousel, but this carousel has text and will have different audio on each slide, but I don’t want to click on each indicator and recognize when the active class is on a particular slide, follow the example the code I made.

<ol class="carousel-indicators">
   <li data-target="#carouselExampleIndicators3" data-slide-to="0" class="desbloquear active somslide1"></li>
   <li data-target="#carouselExampleIndicators3" data-slide-to="1" class="desbloquear somslide2"></li>
    <li data-target="#carouselExampleIndicators3" data-slide-to="2" class="desbloquear somslide3"></li>
    <li data-target="#carouselExampleIndicators3" data-slide-to="3" class="desbloquear somslide4"></li>
    <li data-target="#carouselExampleIndicators3" data-slide-to="4" class="desbloquear somslide5"></li>
</ol>

<div class="carousel-inner">
   <div class="carousel-item active">
      <p>texto</p>
      <div class="audio2"></div>
   </div>
</div>

<script>
  $('.somslide2').on('click',function(){
    $('.audio2').html('<audio id="som1" autoplay><source src="audio/CIPA.wav" type="audio/mpeg"></audio>');
  });
</script>

Answer 1

The Bootstrap carousel class exposes two events to connect to the carousel functionality. Both events have the following additional properties:

• Direction: The direction in which the carousel is sliding ("left" or "right").
• relatedTarget: The DOM element being slid into place as the active item.
• from: The current item index.
• to: The next item index.

One of the events is slide.bs.Carousel which is triggered immediately when the slide instance method is called. That is, every time the "slip" happens that event will be triggered.

So, all you have to do is take this event and treat which sound should be triggered according to the from parameter:

$('#myCarousel').on('slide.bs.carousel', function (props) {
  // props.relatedTarget é a .carousel-item ativa  naquele momento.

  $('audio', props.relatedTarget).play(); // ou algo assim...
  // na linha acima estamos acessando a tag audio que está dentro da .carousel-item ativa naquele momento.

});

I hope I’ve helped.