Как использовать одну и ту же функцию Javascript для разных идентификаторов

#javascript #html

Вопрос:

 function togglePlay() {
  var myAudio = document.getElementById("myAudio");
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};
 
 <audio id="myAudio1" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>

<input type="button" value="sound" onclick="togglePlay()" />

<audio id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>

<input type="button" value="sound" onclick="togglePlay()" />'
 

Я хочу использовать эту функцию tooglePlay() для разных идентификаторов, чтобы я мог приостанавливать и воспроизводить независимо для каждой песни. Как я могу передать разные идентификаторы аудио в одну и ту же функцию?

Комментарии:

1. Что такое аргументы функции?

Ответ №1:

Вы можете заставить функцию принимать идентификатор в качестве параметра:

 function togglePlay(id) {
  var myAudio = document.getElementById(id);
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};
 

Затем в вашем HTML-файле передайте идентификатор соответствующего audio тега при вызове togglePlay :

 <audio id="myAudio1" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>

<input type="button" value="sound" onclick="togglePlay('myAudio1')" />

<audio id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>

<input type="button" value="sound" onclick="togglePlay('myAudio')" />'
 

Комментарии:

1. Это решение сработало для меня, но песни воспроизводятся параллельно, когда я нажимаю на обе песни. Я хочу остановить текущую воспроизводимую песню при воспроизведении второй песни.