Question

我是该网站的新手，需要我的项目帮助。请记住，我不是最有经验的程序员，所以如果我的代码看起来有些草率，请原谅我。

我正在使用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....

我在此页面中的每个对象下为js中的每个mp3播放器编写了功能。我知道这似乎不是最理想的方法，但目前我只是想尝试一下。

    ...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播放器播放阵列中的最后一个音频。我正在尝试所有方法，但进展并不顺利。有人可以帮我这个忙吗？

Answer 1

我可以发现两个问题：

为什么只有第一个播放器起作用？

这可能与浏览器有关，但是：

document.getElementById("switchId")

ID应该是唯一的；如果您有多个名为switchId的元素，则可能是您的浏览器只选择了第一个。

为什么播放器播放 last 歌曲？

问题是：

window.onload = initAudioPlayer;

该操作对于页面上的每个MP3播放器都运行一次，但是onload函数仅在窗口完全加载后才会被调用。这样，它只会运行您分配的最后一个（因为一个覆盖了所有先前的覆盖）。

js脚本无法提供mp3功能

1 个答案:

为什么只有第一个播放器起作用？

为什么播放器播放 last 歌曲？