javascript - 播放多个 HTML 5 音频

Question

出于某种原因，我无法在我的页面上播放多个音频。它之前确实有一个 ID，然后我在 Stackoverflow 上的某个地方读到一个 ID 是唯一的，所以我将它更改为有一个类，现在它根本不播放。但是当它是 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>

标签： javascripthtmlaudio