Я пытаюсь заставить этот аудиоплеер работать. Проблема заключается в том, что когда я нажимаю кнопку воспроизведения для определенного 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..
Мой подход с этим js-скриптом для каждого объекта с классом player (div = "player"), я объявлю каждую песню из массива как звуковую дорожку. Странной вещью является каждый скрипт, который под каждым из этих объектов имеет свои отдельные звуковые дорожки. Но когда я нажимаю кнопку воспроизведения на любом из проигрывателей, он воспроизводит все файлы одновременно.
<% 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>
<% } %>
Я не совсем уверен, что я делаю неправильно. Если у кого-то есть какие-либо советы или предложения, я буду очень признателен!