时间戳

首页 > 解决方案 > Javascript：音频播放器出现问题，同时播放所有音频

javascript - Javascript：音频播放器出现问题，同时播放所有音频

问题描述

我正在尝试让这个定制的音频播放器工作。问题是当我按下某个 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 脚本对每个具有类播放器 (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>
                    <% } %>

我不确定我做错了什么。如果有人有任何提示或建议，我将不胜感激！

标签： javascriptaudioejs

解决方案

可以使用 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);
  });
});

推荐阅读