По какой-то причине я не могу воспроизвести более одной аудиозаписи на своей странице. До этого у него был идентификатор, а затем я где-то прочитал в Stackoverflow, что идентификатор является уникальным, поэтому я изменил его на класс, и теперь он вообще не воспроизводится. Но когда это был getElementbyId, проигрывался только один звук, а не все. Я добавил неправильный код? Пожалуйста, помогите
У меня есть этот код здесь:
Это то, что было раньше
<audio id="nyan" src="https://elysian.dijestdesigns.com/wp-content/uploads/2020/02/Jessica_Roberts_Afrikaans_Corporate_SouthAfrican-sassa.mp3" preload="metadata" type="audio/mpeg">
Your browser does not support the audio element. </audio>
<a class="btn" id="nyan-btn"></a>
Затем я изменил его на этот
<audio class="nyan" src="https://elysian.dijestdesigns.com/wp-content/uploads/2020/02/Jessica_Roberts_Afrikaans_Corporate_SouthAfrican-sassa.mp3" preload="metadata" type="audio/mpeg">
Your browser does not support the audio element. </audio>
<a class="btn" class="nyan-btn"></a>
<audio class="nyan" src="https://elysian.dijestdesigns.com/wp-content/uploads/2020/02/Jessica_Roberts_Afrikaans_Corporate_SouthAfrican-sassa.mp3" preload="metadata" type="audio/mpeg">
Your browser does not support the audio element. </audio>
<a class="btn" class="nyan-btn"></a>
и Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<script>
/*it was getElementById*/
var nyan = document.getElementByClass("nyan");
var nyanBtn = document.getElementByClass("nyan-btn");
function playPause(song) {
if (song.paused && song.currentTime >= 0 && !song.ended) {
song.play();
} else {
song.pause();
}
}
function reset(btn, song) {
if (btn.classList.contains("playing")) {
btn.classList.toggle("playing");
}
song.pause();
song.currentTime = 0;
}
function progress(btn, song) {
console.log("PROGRESS");
setTimeout(function () {
var end = song.duration;
var current = song.currentTime;
var percent = current / (end / 100);
//check if song is at the end
if (current == end) {
reset(btn, song);
}
//set inset box shadow
btn.style.boxShadow =
"inset " +
btn.offsetWidth * (percent / 100) +
"px 0px 0px 0px rgba(0,0,0,0)";
//call function again
progress(btn, song);
}, 1000);
}
nyanBtn.addEventListener("click", function () {
nyanBtn.classList.toggle("playing");
playPause(nyan);
progress(nyanBtn, nyan);
});
</script>