HTML 自定义音频播放器 - 同时停止多个 MP3 播放

Question

所以我使用 document.createElement('audio') 创建音频元素。

我在一个循环中使用它，实际上创建了大约 20 个音频文件。

我遇到的问题是，当我离开音频文件播放并单击任何其他文件播放时，它们同时播放。

如何防止音频文件同时播放？

注意：播放时所有文件都可以正常工作，问题是文件会同时播放，除非您暂停前一个...

这是我的 JavaScript 代码：

// MP3 Player   

$('.player').each(function(index) {

    const formatTime = time => {
        const hours = Math.floor(time / 3600);
        const remainder = time % 3600;
        const minutes = Math.floor(remainder / 60);
        const seconds = Math.floor(remainder % 60);

        const hh = hours.toString().padStart(2, '0');
        const mm = minutes.toString().padStart(2, '0');

        const ss = seconds.toString().padStart(2, '0');


        return `${hh}:${mm}:${ss}`;
    }

    function updateTime() {
        var duration = this.duration;
        var currentTime = this.currentTime;
        var percentage = (currentTime / duration) * 100;
        playhead.style.width = percentage + '%';
        $('.player__duration-'+index).text(formatTime(duration));
      $('.player__currentTime-'+index).text(formatTime(currentTime) + ' / ');
    }         

    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', $('.active-song-'+index).attr('data-src'));   
    audioElement.setAttribute("class", 'audio-player-'+index);  

    var tl = new TimelineMax();
    tl.to('.player__albumImg-'+index, 3, {
        rotation: '360deg',
        repeat: -1,
        ease: Power0.easeNone
    }, '-=0.2');
    tl.pause();

    $('.player__play-'+index).click(function () {

        $('#prev').val($('#current').val());
        $('#current').val(index); 

        var to_pause = $('#current').val();  
        console.log(audioElement);

        if ($('.player-'+index).hasClass('play')) {
            $('.player-'+index).removeClass('play');
            audioElement.pause();
            TweenMax.to('.player__albumImg-'+index, 0.2, {
                scale: 1,
                ease: Power0.easeNone
            })
            tl.pause();
        } else {
            $('.player-'+index).addClass('play');
            audioElement.play();
            TweenMax.to('.player__albumImg-'+index, 0.2, {
                scale: 1.1,
                ease: Power0.easeNone
            })
            tl.resume();
        }  

    });


  var playhead = document.getElementById("playhead-"+index);
  audioElement.addEventListener("timeupdate", updateTime);   

    function updateInfo() {
        $('.player__author').text($('.active-song').attr('data-author'));
        $('.player__song').text($('.active-song').attr('data-song'));
    }
    updateInfo();

    $('.player__timelineBar-'+index).click(function (ev) {
        var $div = $(ev.target);
        var $display = $div.find('.playhead-'+index);

        var offset = $div.offset();
        var x = ev.clientX - offset.left;

        var ratio = x / $(this).width();
        var duration = audioElement.duration;

        var newCurrentTime = ratio * duration;
        audioElement.currentTime = newCurrentTime;

        audioElement.addEventListener("timeupdate", updateTime);

    });   

});