如何使用javascript在动态内容中播放下一首音乐和暂停当前音乐？

Question

您好，javascript 中有没有办法播放下一首歌曲并暂停当前正在播放的歌曲，因为这是动态的，并且它们具有相同的 id 和 onClick 值。我们如何在 javascript 中处理动态内容？

index.ejs

<% music.forEach(function(muzic){ %>
<div class="col-lg-3 col-md-6 col-sm-6">
    <div class="card">
        <img class="featured-image" src="/uploads/featured-img/<%= muzic.featured_img %>" alt="">
        <div class="card-img-overlay" id="toggleIcon">
            <a onClick="togglePlay()" class="select-play">
                <img class="select-play-btn" src="/img/select-play.png" id="play-pause" width="80">
                <audio id="myAudio" src="/uploads/audio-file/<%= muzic.audio %>"></audio>
            </a>
        </div>
    </div>
</div>
<% }); %>

脚本

<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.ejs 中通过 forEach 之类的函数再传递一个参数index

<% music.forEach(function(muzic,index){ %>
<div class="col-lg-3 col-md-6 col-sm-6">
    <div class="card">
        <img class="featured-image" src="/uploads/featured-img/<%= muzic.featured_img %>" alt="">
        <div class="card-img-overlay" id="toggleIcon">
            <a onClick="togglePlay(<%= index %>)" class="select-play">
                <img class="select-play-btn" src="/img/select-play.png" id="play-pause" width="80">
                <audio id="myAudio" src="/uploads/audio-file/<%= muzic.audio %>"></audio>
            </a>
        </div>
    </div>
</div>
<% }); %>

使用 id 作为参数来识别音频并执行算法