Общая функция для воспроизведения / приостановки всех аудио ссылок - PullRequest
0 голосов
/ 06 июня 2019

У меня есть HTML с кучей аудио-ссылок. Я пытаюсь заставить все мои звуковые ссылки воспроизводиться / приостанавливаться при нажатии, и я попробовал решение здесь . Это именно то, что мне нужно, за исключением того, что я застрял, модифицируя эту функцию, чтобы она применялась ко всем звуковым ссылкам в моем коде (поскольку я не могу определить одну функцию для каждой ссылки). Идеи о том, как это сделать?

Пример:

<script type="text/javascript">
function loadAudio(source) {
currentSource = source;
audioSource.src = source;
audio.load();
}

var audio = document.getElementById('audio');
var audioSource = document.getElementById('audioSource');
var currentSource;

document.querySelectorAll('.play-audio').forEach(function(link) {
link.addEventListener('click', function() {
var linkSource = this.dataset.audio;

if (currentSource === linkSource) {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
} else {
  loadAudio(linkSource);
  audio.play();
}
});
});
</script>

<audio id="audio">
<source id="audioSource" src=""></source>
Your browser does not support the audio format.
</audio>

<table>
<tr>
<td><a href="#" class="play-audio" data-audio="https://...1">Play 1</a></td>
</tr>
<tr>
<td><a href="#" class="play-audio" data-audio="https://...2">Play 2</a></td>
</tr>
</table>

Ответы [ 2 ]

1 голос
/ 06 июня 2019

Если вы хотите воспроизводить аудио по одному. Вы можете воспроизвести их через один и тот же аудиоэлемент, изменив источник в зависимости от того, какая ссылка была нажата:

function loadAudio(source) {
  currentSource = source;
  audioSource.src = source;
  audio.load();
}

var audio = document.getElementById('audio');
var audioSource = document.getElementById('audioSource');
var currentSource;

document.querySelectorAll('.play-audio').forEach(function(link) {
  link.addEventListener('click', function() {
    var linkSource = this.dataset.audio;

    if (currentSource === linkSource) {
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
    } else {
      loadAudio(linkSource);
      audio.play();
    }
  });
});
<audio id="audio">
  <source id="audioSource" src=""></source>
  Your browser does not support the audio format.
</audio>

<a href="#" class="play-audio" data-audio="sound1.mp3">Click here to hear 1.</a>
<a href="#" class="play-audio" data-audio="sound2.mp3">Click here to hear 2.</a>
<a href="#" class="play-audio" data-audio="sound3.mp3">Click here to hear 3.</a>
0 голосов
/ 06 июня 2019

Вы можете использовать селектор, чтобы найти и приостановить / воспроизвести ваш плеер.

Допустим, у вас есть 4 <audio> тега

<div class='audio-container'>
    <audio id="audio1" src="/Demo1.mp3"></audio>
    <a class='audio-play'>Click here to hear 1.</a>
</div>

<div class='audio-container'>
    <audio id="audio2" src="/Demo2.mp3"></audio>
    <a class='audio-play'>Click here to hear 2.</a>
</div>

<div class='audio-container'>
    <audio id="audio3" src="/Demo3.mp3"></audio>
    <a class='audio-play'>Click here to hear 3.</a>
</div>

<div class='audio-container'>
    <audio id="audio4" src="/Demo4.mp3"></audio>
    <a class='audio-play'>Click here to hear 4.</a>
</div>

Использование JQuery:

$(".audio-container .audio-play").off("click").on("click", function() {
    // $(this) -> ref to the currently clicked <a/>
    //get the [0] element of the FIND query, because a TAG selector returns an array of found elements
    var audio = $(this).parent().find("audio")[0];

    var hasNotStarted = audio.paused && audio.currentTime == 0 && !audio.ended;
    var hasEnded = audio.paused && audio.currentTime > 0 && audio.ended;
    var isPaused = audio.paused && audio.currentTime > 0 && !audio.ended;

    if(hasNotStarted || hasEnded || isPaused)
        audio.play()
    else 
        audio.pause();
});

Обычный JS

//in plain JS, you will have to add a click event listener, on each element

var audioElems = document.querySelectorAll(".audio-container .audio-play");

for (var i = 0; i < audioElems.length; i++) {
    audioElems[i].addEventListener("click", function() {
        var audio = this.parentNode.children[0]

        var hasNotStarted = audio.paused && audio.currentTime == 0 && !audio.ended;
        var hasEnded = audio.paused && audio.currentTime > 0 && audio.ended;
        var isPaused = audio.paused && audio.currentTime > 0 && !audio.ended;

        if(hasNotStarted || hasEnded || isPaused)
            audio.play()
        else 
            audio.pause();
    });
}   
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...