如何使自定义音频播放器适用于多种音频？

Question

我的页面上有多个HTML音频，并希望将此自定义音频播放器应用于它们。问题是，这仅适用于第一个音频，不适用于第二个，第三个和第四个音频。有什么办法可以解决这个问题？

我的JavaScript代码：

        const audio = document.getElementById('audio');
        const playPauseButton = document.querySelector('.play-button');
        const progressBar = document.querySelector('.progress-bar');
        const progress = document.querySelector('.progress-controls');
        const playButton = document.querySelector('.playing');
        const pauseButton = document.querySelector('.paused');
        
        const playPause = () => {
            if(audio.paused){
                audio.play()
                playButton.style.display = 'none';
                pauseButton.style.display = '';
            }
            else{
                audio.pause()
                playButton.style.display = '';
                pauseButton.style.display = 'none';
            }
        }
        function pause(){
            pauseButton.style.display = 'none'
        }
        window.addEventListener('load', pause);
        
        playPauseButton.addEventListener('click', playPause);
        
        audio.addEventListener('timeupdate', function(){
            var progress = audio.currentTime / audio.duration;
            progressBar.style.width = progress * 100 + "%";
        });
        
        document.addEventListener('keyup', (event) => {
            if (event.code === 'Space') {
                playPause(); 
            }
            if (event.code === 'KeyP') {
                playPause(); 
            }
        });