CODEWITHSUNDEEP
javascriptjquery
exclude1987
exclude1987

Reputation: 37

javascript / jquery noob. Many instances of audio player

Just started learning javascript and jquery. I have made simple audio player that plays short audio clip. The problem is that once i click the play button on selected clip, every other clips show stop button, instead of showing the stop button only on clip that is playing.

How do i make that stop button shows only on the clip that is selected?

This is how it works by now: www.licktrade.com

Audio file locations will be fetched from mysql database, by now i just made them in html.

The code:

echo "<div id='player-grid'>";

echo "<div class='player-wrapper' style='background-image:url(uploads/images/profile_pictures/1.jpg);background-size:100px 100px;'>";
echo "<div class='player'>";
echo "<audio class='audio'><source src='uploads/audio/lick1.mp3'></audio>";
echo "<div class='play'></div>";
echo "<div class='stop'></div>";
echo "</div></div>";

echo "<div class='player-wrapper' style='background-image:url(uploads/images/profile_pictures/1.jpg);background-size:100px 100px;'>";
echo "<div class='player'>";
echo "<audio class='audio'><source src='uploads/audio/lick1.mp3'></audio>";
echo "<div class='play'></div>";
echo "<div class='stop'></div>";
echo "</div></div>";

echo "</div>";

?>

<script type="text/javascript" src="jquery-3.1.1.js"></script>

<script>
  $('.stop').hide(); 

    $('.play').click(function() {

      $(this).siblings('.audio').get(0).play();
      $('.play').hide();
      $('.stop').show();
    });

    $('.stop').click(function() {
      $(this).siblings(".audio").get(0).pause();
      $(this).siblings(".audio").get(0).currentTime = 0;
      $('.play').show();
      $('.stop').hide();

    });

</script>

Upvotes: 1

Views: 102

Answers (3)

nimaek
nimaek

Reputation: 214

You're selecting all instances of .play and .stop, you just need to select relative to the clicked element. Something like... 

$('.play').click(function() {
  $(this).siblings('.audio').get(0).play();
  $(this).hide();
  $(this).siblings('.stop').show();
});

$('.stop').click(function() {
  $(this).siblings(".audio").get(0).pause();
  $(this).siblings(".audio").get(0).currentTime = 0;
  $(this).siblings('.play').show();
  $(this).hide();
});

Also, you could use jQuery chaining to reduce the amount of times you select $(this) - take a look at https://api.jquery.com/end/.

Upvotes: 0

Just a student
Just a student

Reputation: 11050

$('.play') selects all elements with class="play" on the entire page. When handling a click on a specific play element, you want to hide it and show the stop element next to it. The clicked play element can be accessed via this, which you already use to call the play() function. Accessing the stop element can be done via next(), for example.

$('.play').hide();
$('.stop').show();

becomes

$(this).hide();
$(this).next('.stop').show();

And similar in the handling of clicks on the stop button.

Upvotes: 1

Muhammad Ahsan Ayaz
Muhammad Ahsan Ayaz

Reputation: 1947

Modify your code a bit to only hide & show sibling buttons as you've done for playing the audio. That should do the trick.

$('.stop').hide(); 

$('.play').click(function() {

  $(this).siblings('.audio').get(0).play();
  $(this).hide(); //no need to use siblings
  $(this).siblings('.stop').show();
});

$('.stop').click(function() {
  $(this).siblings(".audio").get(0).pause();
  $(this).siblings(".audio").get(0).currentTime = 0;
  $(this).siblings('.play').show();
  $(this).hide(); //no need to use siblings

});

Upvotes: 1

Related Questions