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

Question

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

索引.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>

标签： javascriptnode.jsejs

Answer 1

您可以在代码中传递值togglePlay(1)并在代码中添加 if else 条件语句。

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

在 index.ejs 中，index通过 forEach 函数再传递一个参数，例如

<% 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 作为参数来识别音频并执行算法