Javascript: проблема с аудиоплеером, воспроизводит все аудио одновременно - PullRequest
0 голосов
/ 02 ноября 2018

Я пытаюсь заставить этот аудиоплеер работать. Проблема заключается в том, что когда я нажимаю кнопку воспроизведения для определенного 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>
                    <% } %>

Я не совсем уверен, что я делаю неправильно. Если у кого-то есть какие-либо советы или предложения, я буду очень признателен!

1 Ответ

0 голосов
/ 05 ноября 2018

Может быть создать и аудио элемент и стиль элементов управления с помощью CSS. (Если вы хотите дополнительно настроить элементы управления, удалите атрибут control и добавьте свои собственные элементы управления 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);
  });
});
...