Music in jquery slide

Asked

Viewed 103 times

0

I have a slideshow, I’m trying to get every div of id content to play the music in question within the div content. I was thinking of using an if ($("#Content1"). is(":Visible") {$('#1.mp3'). play();} But I searched on the net how to do this bad I found nothing similar :( Thank you very much staff. Stackoverflow SHOOWWW! : ) NOTE: Code below is playing the 2 songs together.

<div class="slide">
    <div class="content-switcher" id="Content1">
        <img src="imagem"/>
                <span class="pe-7s-volume">
                    <audio id="playTune" autoplay>
                        <source src="2.mp3">
                    </audio>
                </span>
        </div> 
    </div>

    <div class="content-switcher" id="Content2">
        <img src="img/2botao.jpg" style="height:100%;" />
                <span class="pe-7s-volume">
                    <audio id="playTune" autoplay>
                        <source src="1.mp3">
                    </audio>
                </span>           
    </div>
</div>

1 answer

1


Something like that solves your problem?

$(window).load(function() {
  $("#showContent1").click(function() {    
    showContent("Content1")
  })

  function showContent(id) {
    if (!$("#" + id).is(':visible')) {
      $("#Content1").show()
      $("#" + id + " audio")[0].play()
    } else {
      $("#" + id).hide()
      
    }
  }


})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="showContent1">show content1</button>
<div class="slide">
  <div class="content-switcher" style="display:none" id="Content1">
    <img src="imagem" />
    <span class="pe-7s-volume">
                                    <audio controls="">
  <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
                </span>
  </div>
</div>

<div class="content-switcher" id="Content2">
  <img src="img/2botao.jpg" style="height:100%;" />
  <span class="pe-7s-volume">
                  <audio controls="">
  <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
                </span> 
</div>
</div>

  • This excerpt of code saved the weekend I had a headache trying to find a solution. Thank you friend Marco. :)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.