Воспроизвести более одного HTML 5 аудио - PullRequest
2 голосов
/ 09 февраля 2020

По какой-то причине я не могу воспроизвести более одной аудиозаписи на своей странице. До этого у него был идентификатор, а затем я где-то прочитал в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...