Как сделать несколько кнопок воспроизведения и паузы музыки, которые воспроизводят разные аудиозаписи?
Я пытаюсь добавить на свой веб-сайт несколько кнопок воспроизведения и паузы, которые воспроизводят разные звуки. Хотя мне удалось создать одну пару воспроизведения и паузы, каждый раз, когда я пытаюсь создать другую, она будет воспроизводить тот же звук, что и предыдущая кнопка, несмотря на то, что я изменил звук. Как будто один из источников звука (обычно первый) подключен. Я могу нажать одну кнопку воспроизведения, а затем другие кнопки приостанавливаются, и это сработает. Я пробовал перекодировать, удалять мой css, используя один и тот же класс, используя разные классы, изменяя щелчок, переключая аудио, удаляя элементы из функции, изменяя имя класса на кнопку button1 и кнопку button2 соответственно или что-то случайное, изменяя class к идентификатору, используя тег вместо . при использовании css и т. д. Но независимо от того, сколько кнопок я делаю, они продолжают воспроизводить один и тот же звук, даже если все они разные. Кто-нибудь может мне помочь? Ваша помощь будет очень признательна!
My current attempt at making the audio button pairs play different songs to no avail. First segment is song 1 and the other is song 2.
У вас есть несколько элементов с одинаковым идентификатором. getElementById захватывает первый на странице, а не ближайший к тегу скрипта
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
function playAudio(id) {
var x = document.getElementById(id);
x.play();
}
function pauseAudio(id) {
var x = document.getElementById(id);
x.pause();
}<style>
}
.button {
padding: 20px;
display: inline-block;
width: 100px;
background-image: url('https://media.discordapp.net/attachments/468801481429090344/1072573795275128935/1133px-Th06backcover.jpg?width=755&height=600');
border: 1px solid #8b00c9;
color: #da3a0e;
border-radius: 10px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
font-family: 'arcadeclassic'
}<audio id = "audio1">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type = "audio/ogg">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type = "audio/mpeg">
</audio>
<button onclick = "playAudio('audio1')" class = "button"><bold>PLAY!</bold></button>
<button onclick = "pauseAudio('audio1')" class = "button"><bold>NOPE!</bold></button>
<audio id = "audio2">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type = "audio/ogg">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type = "audio/mpeg">
</audio>
<button onclick = "playAudio('audio2')" class = "button"><bold>PLAY!</bold></button>
<button onclick = "pauseAudio('audio2')" class = "button"><bold>NOPE!</bold></button>Это проблема с именем переменной, проверьте этот код. Он должен работать:
.button {
padding: 20px;
display: inline-block;
width:100px;
background-image:url('https://media.discordapp.net/attachments/468801481429090344/1072573795275128935/1133px-Th06backcover.jpg?width=755&height=600');
border: 1px solid #8b00c9;
color: #da3a0e;
border-radius: 10px;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
font-family: 'arcadeclassic'
}<audio id = "myAudio">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type = "audio/ogg">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072576368279289887/ytmp3free.cc_touhou-145-ulil-ps4-ost-reisens-theme-lunatic-eyes-invisible-full-moon-youtubemp3free.org.mp3" type = "audio/mpeg">
</audio>
<button onclick = "playAudio()" class = "button"><bold>PLAY!</bold></button>
<button onclick = "pauseAudio()" class = "button"><bold>NOPE!</bold></button>
<script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</script>
<audio id = "myAudio2">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type = "audio/ogg">
<source src = "https://cdn.discordapp.com/attachments/468801481429090344/1072585621090095235/ytmp3free.cc_unl-cirnos-theme-beloved-tomboyish-girl-youtubemp3free.org1.mp3" type = "audio/mpeg">
</audio>
<button onclick = "playAudio2()" class = "button"><bold>PLAY!</bold></button>
<button onclick = "pauseAudio2()" class = "button"><bold>NOPE!</bold></button>
<script>
var y = document.getElementById("myAudio2");
function playAudio2() {
y.play();
}
function pauseAudio2() {
y.pause();
}
</script>Не дублируйте имена переменных/функций, если у вас нет хорошего контроля над областью действия.
Ждать! Это работает с номерами 2+? Я сделал это, и после № 2 звук продолжал сочетаться с другими. (pastebin) pastebin.com/8bmpCxLx
@mrsmiler вы снова назвали переменные таким же образом. Не используйте var y = ... несколько раз, используйте разные имена. Вам также следует избегать использования var (вместо этого проверьте const и let)
Пожалуйста, вставьте код сюда, он не такой длинный