Создать деку с разными аудиозаписями (более 1)

Question

Привет, я хочу создать деку, но я не знаю, как разместить больше аудиос самого начала (смотрите сценарий).

Я не знаю, как я могу добавить больше аудио и использовать тот же сценарий.(Я создаю новое аудио, я изменяю идентификатор, но в скрипте идентификатор остается audio1, поэтому он не работает).

Спасибо

<audio id="audio1" src="myaudio.mp3"></audio>
<button onClick="play()">Play</button>

<script type="text/javascript">
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
    audio.play();
}else{
    audio.pause();
    audio.currentTime = 0
}
}
</script>`

Answer 1

Чтобы использовать несколько аудио: Вы можете передать значение функции, чтобы определить, какой аудио вы хотите воспроизвести.

<audio id="audio1" src="myaudio1.mp3"></audio>
<audio id="audio2" src="myaudio2.mp3"></audio>
<audio id="audio3" src="myaudio3.mp3"></audio>
<button onClick="play(1)">Play 1</button>
<button onClick="play(2)">Play 2</button>
<button onClick="play(3)">Play 3</button>

<script type="text/javascript">
function play(e) {
var audio = document.getElementById('audio'+e);

var sounds = document.getElementsByTagName('audio');
for(i=0; i<sounds.length; i++) sounds[i].pause();

audio.currentTime = 0;
audio.play();
}
</script>`

---

РЕДАКТИРОВАТЬ:

function play(e) {
    var audio = document.getElementById('audio'+e);

    var sounds = document.getElementsByTagName('audio');
    var shouldPlay = true;
    for(i=0; i<sounds.length; i++) {
        if(sounds[i].currentTime > 0 && !sounds[i].paused && !sounds[i].ended) {
            sounds[i].pause();
            sounds[i].currentTime = 0;

            if(audio == sounds[i]) shouldPlay = false;
        }
    }


    if(shouldPlay) {
        audio.play();
    }
}