Добавить аудио в очередь, созданную из идентификатора элемента

Question

У меня есть кнопки, которые воспроизводят звук при нажатии.Идентификатор этого - то, что устанавливает источник звука.У меня есть кнопка, которая будет переключаться между режимами очереди (вкл. Или выкл.). Я хочу сделать так, чтобы я мог воспроизводить звук после первого и продолжать добавлять звуки в очередь.Вот мой js для кнопки audio:

var audios = Array.prototype.map.call(document.getElementsByClassName("myButton")
    , function (el) {
        var audio = new Audio();
        var src = "mp3/" + el.id + ".mp3";
        el.onclick = function () {
            audios.forEach(audio => audio.pause());               /*comment these three lines out to disable stopping previously played audio*/
            audios.forEach(audio => audio.currentTime = 0.0); /*this too*/
            audios.forEach(audio => audio.src = ""); /*this too*/
            audio.src = src;
            audio.play();
            console.log("Now Playing " + el.id);
            console.log(decodeURI(src));
        };
        return audio;
    });

И мой HTML для кнопок:

<!-- Toggle Queue mode-->
<div id="qbutton">
            <span>
                <a href="#">
<!--- Change button image to off when mode is off-->
                    <img class="qb" src="icons/buttons/qbuttonon.png" title="Stop Sound" />
                </a>
            </span>
        </div>

<div class="container" id="buttons">
<div id="container">
<div id="musicmemes" class="music_container">
<span><a href="#" class="myButton" id="sound1">Sound 1</a></span>
<span><a href="#" class="myButton" id="sound2">Sound 2</a></span>
<span><a href="#" class="myButton" id="sound3">Sound 3</a></span>
</div>
</div>
</div>

Я не уверен, как заставить его добавить еще один звук для воспроизведения следующим