Получение звукового тега и его src с помощью Jq, а затем воспроизведение его, щелкнув btn

 $('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;
      }

    });
 });

Привет всем, я использовал приведенный выше код, чтобы получить аудио и его src и сохранить его в audioElement, я использовал alert (audioElement); и он дал мне правильный src для каждого звука, который у меня есть в моем html, проблема в том, что когда нажимается play-btn-vinly, он не воспроизводит звук, который должен воспроизводиться, вот код html

<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>

Спасибо за продвинутый, и это мой первый вопрос в stackoverflow

Uncaught ReferenceError: audio.play не является функцией, это то, что я получаю, когда воспроизводю аудио

Есть ли ошибки в браузере (с помощью инструментов F12)?

— 08.11.2018 19:39

@JeroenHeier хорошо, я получаю audio. Play - это не функция

— 08.11.2018 20:27

Возможный дубликат вопроса SO это.

— 09.11.2018 06:40

Хорошо, я видел этот вопрос, основная проблема, похоже, там тоже решена, у нас есть несколько <audio>, и мы не можем получить к ним доступ по идентификатору, я получаю src аудиофайлов правильно с помощью alert (audio), но когда я хочу Включи одну из аудиозаписей, которые она не работает, @JeroenHeier, спасибо

— 09.11.2018 08:19

jquery html

08.11.2018 19:34

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 1

вроде как решил это, я установил разные идентификаторы для своих аудио тегов и сохранил их в audioId:

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

после того, как я попытался получить идентификатор звука, на который был щелкен, и сохранить его в аудио:

  var audio =document.getElementById(audioId);

вот 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;
  }

});

});

09.11.2018 09:28