getting the audio tag and src of it using Jq then playin it by clickin on the btn

Question

 $('a.song-covers').click(function(){
     var audioElement = $(this).find('audio').attr('src');
     var audio = audioElement;   
     var tmpVinlyState2 = true;
    $('.play-btn-vinly').click(function() {
      if (tmpVinlyState2) {
        audio.play();
        tmpVinlyState2 = false;
      }
      else
      {
        audio.pause();
        tmpVinlyState2 = true;
      }

    });
 });

Hi everyone , i used the code above to get audio and src of it and save it in audioElement , i used alert(audioElement); and it gave me the right src for every audio i have in my html the problem is when play-btn-vinly is clicked it wont play the audio it should be playing here is the html code

<div class="song-archive-container">
    <div class="play-btn-vinly-container">
        <img class="play-btn-vinly" id="play-btn" src="media/play.png" />
    </div>
  <div class="song-archive-inner">
      <div class="song-archive-items">
        <a href="#" class="song-covers">
            <div class="first-item-back covers">

            </div>
            <img src="media/vd.png" id="vdSlide" class="vd" />


                <audio id="audio1" src="media/1.mp3" />
        </a>
      </div>
      <div class="song-archive-items">
        <a href="#" class="song-covers">
            <div class="sec-item-back covers">

            </div>
            <img src="media/vd.png" id="vdSlide2" class="vd"/>


                <audio id="audio1" src="media/2.mp3" />
        </a>
      </div>
      <div class="song-archive-items">

        <a href="#" class="song-covers">
        <div class="third-item-back covers">

        </div>
            <img src="media/vd.png" id="vdSlide3" class="vd"/>

                <audio id="audio1" src="media/3.mp3" />
        </a>
      </div>
      <div class="song-archive-items">

        <a href="#" class="song-covers">
        <div class="forth-item-back covers">

        </div>
            <img src="media/vd.png" id="vdSlide4" class="vd"/>

            <audio id="audio1" src="media/4.mp3" />
        </a>
      </div>
  </div>
</div>



<div class="vinly-container">
        <div class="vinly-circle">

    </div>
<div class="vinly1 vinlys-main">

</div>

</div>

Thx for advanced , and its my first Question in stackoverflow

Uncaught ReferenceError: audio.play is not a function,, that's what i get when i play the audio

well ive seen that question , the main problem dosent seem to be solved there too ,we have multiple <audio> and we cant access them by id , i get the src of the audio files correct using alert(audio) but when i want to play one of the audios it dosent work @JeroenHeier thank you — Farzam Bb

Farzam Bb Farzam Bb · Accepted Answer · 2018-11-09T08:28:24

kinda solved it , i set different IDs for my audio tags and stored them in audioId:

  var audioId = $(this).find('audio').attr('id');

after i tried to get the id of audio that has been clicked on and store it in audio :

  var audio =document.getElementById(audioId);

here's the jq:

$('a.song-covers').on('click' , function(){

 var audioId = $(this).find('audio').attr('id');
 var audio =document.getElementById(audioId);

 var tmpVinlyState2 = true;
$('.play-btn-vinly').click(function() {
  if (tmpVinlyState2) {
    audio.play();
    tmpVinlyState2 = false;
  }
  else
  {
    audio.pause();
    tmpVinlyState2 = true;
  }

});

});

getting the audio tag and src of it using Jq then playin it by clickin on the btn

1 Answers