Проблема со скриптом js для функционала mp3

1

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

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

В основном приложении я передаю массив URL-адресов песен в файл.ejs, который отображает аудиоплееры.
"песни" - это массив 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-плеер, который работает, воспроизводит последний звук в массиве. Я пытаюсь все, и я не очень далеко. Может кто-то, пожалуйста, помогите мне с этим?

Теги:
audio
express
ejs

1 ответ

0

Я могу заметить две проблемы:

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

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

document.getElementById("switchId")

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

Почему этот игрок играет последнюю песню?

Проблема в:

window.onload = initAudioPlayer;

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

  • 0
    спасибо за вклад. Вы правы насчет первого пункта, я не заметил, что я назначил несколько идентификаторов. Что касается второго пункта, я собираюсь провести некоторое исследование о том, как обойти это до нашей эры, я понятия не имею о подходе. Я ценю вашу помощь, хотя

Ещё вопросы

Сообщество Overcoder
Наверх
Меню