Как воспроизвести следующую музыку c и приостановить текущую музыку c в содержимом Dynami c, используя javascript?

Question

Привет, есть ли в javascript способ воспроизвести следующую песню и приостановить воспроизведение текущей песни, так как это динамический c, и они имеют одинаковый идентификатор и значение onClick. Как мы можем обрабатывать содержимое Dynami c в javascript?

index.ejs

<% music.forEach(function(muzic){ %>
      <%}); %> 

скрипт

<script>
var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
    isPlaying ? myAudio.pause() : myAudio.play();

    var img = document.getElementById('play-pause').src;
    if (img.indexOf('select-play.png')!=-1) {
        document.getElementById('play-pause').src  = '/img/pause-outline.png';
    }
    else {
    document.getElementById('play-pause').src = '/img/select-play.png';
    }

    var element = document.getElementById("toggleIcon");
    element.classList.toggle("pause-style");
};

myAudio.onplaying = function() {
    isPlaying = true;
};
myAudio.onpause = function() {
    isPlaying = false;
};
</script>

Answer 1

вам нужно сначала собрать все музыкальные файлы в массиве музыкальных файлов, а затем начать управлять всеми ними

пример:

   // array who has all musics as playlist
    var Musics = [] ;
    // for target current played music in playlist Musics 
    var currentMusicPlayed = 0;
    
    // 3 paths of music
    let arrayOfPaths = ["./Music1.mp3" , "./Music2.mp3" , "./Music3.mp3"];
    
    // loop for making audio objects and push all of them in Musics Playlist array
    for(let i = 0 ; i < arrayOfPaths.length ; i += 1){
    
        let music = new Audio();
            music.src = arrayOfPaths[i];
    
        Musics.push(music);
    
    }
    
    // music player
    function MusicListPlayer(){
        // play current music who has 
        Musics[currentMusicPlayed].play();
    
        // and stop any music
        for(let i = 0 ; i < Musics.length ; i += 1){
            if(i != currentMusicPlayed){
                Musics[currentMusicPlayed].pause();
            }
        }
    
        // if current music index >= must be start from 0 again
        if(currentMusicPlayed >= i ) currentMusicPlayed = 0;
        // else increment for next click 
        else currentMusicPlayed += 1;
    }
    
    // just a random element for example
    const buttonGetNextMusic = document.querySelector("any");
    
    // here in click MusicListPlayer must be called and make next music in Array work
    buttonGetNextMusic.addEventListener("click" , MusicListPlayer);

Надеюсь, этот пример поможет вам понять идею

Answer 2

вы можете передавать значения внутри togglePlay(1) и добавить оператор условия if else внутри кода.

function togglePlay(n){
    if(n==1){
       //do this
           }
   else   {
       //do that
          }
}

в index.e js передать еще один параметр index через функцию forEach, например

">

использовать идентификатор в качестве параметра для идентификации звука и выполнения алгоритма