javascript - Javascript:音频播放器出现问题，同时播放所有音频

Question

我正在尝试使此定制音频播放器正常工作。问题是，当我按下某个mp3播放器的播放按钮时(应该从阵列中播放单个mp3文件)，它会同时播放阵列中的所有歌曲。所有其他迷你mp3播放器都会发生这种情况。
下面是.ejs文件，其中我为数组中的每首歌曲制作了一个mp3对象

  <div class="container" id="mainBody">
   <div class="row text-center" style="display:flex; flex-wrap:wrap;">
    <% songs.forEach(function(song){%>
        <div class="col-md-4 col-sm-6">
            <div class="thumbnail">
                <div class="player">
                    <!--<div class="pl"></div>-->
                    <!--<div class="title"></div>-->
                    <div class="cover"></div>
                    <div class="bottom_section">
                        <div class= "controls">
                            ...play buttons go here...

                            ..js mp3 js file goes here right after..

我使用带有类播放器(div =“player”)的每个对象的js脚本的方法，将数组中的每一首歌曲声明为一个音轨。奇怪的是，每个脚本在这些对象下都有各自独立的音轨。但是，当我单击任一播放器上的“播放”时，它将立即播放所有文件。

                 <% if(song) { %>
                        <script type="text/javascript">

                            $(document).ready(function(){
                                $(".player").each(function(index){
                                    var track = new Audio();
                                    track.src="<%=song%>";

                                    $(".mainB").click(function(){
                                        if(track.paused){
                                            track.play();
                                            $(this).toggleClass('fa fa-play fa fa-pause');
                                        }
                                        else{
                                            track.pause();
                                            $(this).toggleClass('fa fa-pause fa fa-play');
                                        }
                                    });
                                });
                            });

                        </script>
                    <% } %>

我不太确定自己在做什么错。如果有人有任何提示或建议，我将不胜感激!

Answer 1

可以使用CSS创建音频元素并设置控件样式。 (如果要进一步自定义控件，请删除控件属性并添加自己的html控件，然后使用JS对其进行控制)

$(document).ready(function() {
  $(".player").each(function(i, el) {
    var track = document.createElement('audio');
    track.id = 'audio-player';
    track.controls = 'controls';
    track.src = '<%=song%>';
    track.type = 'audio/mpeg';
    el.appendChild(track);
  });
});