Проблема со скриптом js для функционала mp3 - PullRequest
0 голосов
/ 28 октября 2018

Я новичок в этом сайте, и мне нужна помощь с моим проектом.Имейте в виду, что я не самый опытный программист, так что простите, если мой код кажется немного неаккуратным.

Я занимаюсь разработкой приложения, связанного с производством музыки, используя express.js.
На странице шоу я создаю мини-mp3-плеер для каждой песни в массиве, который вскоре станет базой данных.

В основном приложении я передаю массив URL-адресов песен в файл .ejs, который отображает аудиопроигрыватели.
"songs" - это массив URL-адресов mp3.

    app.get("/homepage", function(req, res){
    //rendering the homepage ejs
    res.render("show.ejs", {songs:songs});
    });

В файле .ejs я создаю mp3-плеер для каждой песни в массиве ...

    <% include partials/header %>

    <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">
             ....audio player display html....

Я написал функциональность для каждого mp3-плеера в js,под каждым объектом на этой странице.Я знаю, что это может показаться не самой идеальной вещью, но сейчас я просто пытаюсь сделать эту работу.

    ...after html for object...
    ...javascript for functionality....
    <% if(song) { %>
                        <script type="text/javascript">

                            window.onload = initAudioPlayer;
                            function initAudioPlayer(){
                                var track = new Audio();
                                track.src="<%=song%>";

                                //play/pause function
                                document.getElementById("switchId").addEventListener("click", function(){
                                    if(track.paused){
                                        track.play();
                                        $('#switchId .fa').toggleClass('fa fa-play fa fa-pause');
                                    }else{
                                        track.pause();
                                        $('#switchId .fa').toggleClass('fa fa-pause fa fa-play');
                                    }
                                });


                            }
                        </script>
                    <% } %>

Когда я запускаю этот код, он отображает нужное количество аудиоплееров (2 песни = 2 мини-mp3-плеера).Однако, когда функционал работает только на первом mp3-плеере.Когда я пытаюсь нажать кнопку воспроизведения на других, это не работает.Кроме того, работающий mp3-плеер воспроизводит последний звук в массиве.Я пытаюсь все, и я не очень далеко.Может кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 29 октября 2018

Есть две проблемы, которые я могу определить:

Почему работает только первый игрок?

Возможно, это зависит от браузера, но:

document.getElementById("switchId")

идентификаторы должны быть уникальными; если у вас есть более одного элемента с именем switchId, скорее всего, ваш браузер выбирает только первый.

Почему этот проигрыватель воспроизводит последнюю песню?

Проблема:

window.onload = initAudioPlayer;

Это выполняется один раз для каждого MP3-плеера на вашей странице, но функция onload только вызывается позже, когда окно полностью загружено. Таким образом, он запускает только последний из назначенных вами (так как тот перезаписал все предыдущие).

...