Fatal编程技术网
  • javascript/
  • Javascript 多个音频播放器仅播放第一个音频样本？

Javascript 多个音频播放器仅播放第一个音频样本？

javascript html jquery

Javascript 多个音频播放器仅播放第一个音频样本？,javascript,html,jquery,html5-audio,Javascript,Html,Jquery,Html5 Audio,我已经创建了一个音频播放器循环，我希望他们都能播放各自的音频文件。出于某种原因，他们只玩第一个。有人能帮我吗？我不知道为什么它不起作用。我相信这很简单，但我已经看遍了 我已经提出了这一点，这表明了这个问题 Javascript: var audio_player = $("#audio-player"); var play_button = $('.play'); var progress_bar = $("#progressbar"); var time

我已经创建了一个音频播放器循环，我希望他们都能播放各自的音频文件。出于某种原因，他们只玩第一个。有人能帮我吗？我不知道为什么它不起作用。我相信这很简单，但我已经看遍了

我已经提出了这一点，这表明了这个问题

Javascript:

var audio_player = $("#audio-player");
var play_button = $('.play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;

player.onloadedmetadata = function() {
  duration = player.duration;
  progress_bar.progressbar("option", {
    'max': duration
  });
};

player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
  progress_bar.progressbar('value', player.currentTime);
  time.text(getTime(player.currentTime));
}, false);

function getTime(t) {
  var m = ~~(t / 60),
    s = ~~(t % 60);
  return (m < 10 ? "0" + m : m) + ':' + (s < 10 ? "0" + s : s);
}

function getProgressBarClickInfo(progress_bar, e) {
  var offset = progress_bar.position();
  var x = e.pageX - offset.left; // or e.offsetX (less support, though)
  var y = e.pageY - offset.top; // or e.offsetY
  var max = progress_bar.progressbar("option", "max");
  var value = x * max / progress_bar.width();

  return {
    x: x,
    y: y,
    max: max,
    value: value
  };
}

volume_bar.progressbar({
  value: player.volume * 100,
});

volume_bar.click(function(e) {
  var info = getProgressBarClickInfo($(this), e);
  volume_bar.progressbar('value', info.value);
  player.volume = info.value / info.max;
});

progress_bar.progressbar({
  value: player.currentTime,
});

progress_bar.click(function(e) {
  var info = getProgressBarClickInfo($(this), e);
  player.currentTime = player.duration / info.max * info.value;
});

play_button.click(function() {
    player[player.paused ? 'play' : 'pause']();
    $(this).closest('.audio-box')
           .find('.play')
           .toggleClass("fa-pause", !player.paused)
           .toggleClass("fa-play", player.paused);
});
mute_button.click(function() {
  if (player.volume == 0) {
    player.volume = volume;
  } else {
    volume = player.volume;
    player.volume = 0;
  }

  volume_bar.progressbar('value', player.volume * 100);

  $(this).toggleClass("fa-volume-up", player.volume != 0);
  $(this).toggleClass("fa-volume-off", player.volume == 0);
});

more_info.click(function() {
  audio_player.animate({
    height: (audio_player.height() == 50) ? 100 : 50
  }, 1000);
});

var audio_player=$（“#audio player”）；
变量play_按钮=$（'.play'）；
var progressbar=$（“#progressbar”）；
变量时间=$（“#时间”）；
var mute_按钮=$（“#mute”）；
var volume_bar=$（“#volume”）；
var more_info=$（“#more info box”）；
变量信息托盘=$（“#信息托盘”）；
var player=document.getElementById（'player'）；
var持续时间=0；
var体积=0.75；
player.onloadedmetadata=函数（）{
持续时间=player.duration；
进度条。进度条（“选项”{
“最大”：持续时间
});
};
player.load（）；
player.volume=0.75；
player.addEventListener（“时间更新”，函数（）{
进度条。进度条（'value'，player.currentTime）；
text（getTime（player.currentTime））；
}，假）；
函数getTime（t）{
var m=~（t/60），
s=~（t%60）；
返回（m<10？+0？+m:m）+'：'+（s<10？+0？+s:s）；
}
函数getProgressBarClickInfo（进度条，e）{
var offset=进度条位置（）；
var x=e.pageX-offset.left；//或e.offsetX（但支持较少）
var y=e.pageY-offset.top；//或e.offsetY
var max=进度条（“选项”、“最大值”）；
var值=x*最大值/进度条宽度（）；
返回{
x:x，
y:y，
马克斯：马克斯，
价值：价值
};
}
音量（巴）({
值：player.volume*100，
});
音量栏。单击（功能（e）{
var info=getProgressBarClickInfo（$（this），e）；
卷进度条（“值”，信息值）；
player.volume=info.value/info.max；
});
进度条({
值：player.currentTime，
});
进度条。单击（功能（e）{
var info=getProgressBarClickInfo（$（this），e）；
player.currentTime=player.duration/info.max*info.value；
});
播放按钮。单击（函数（）{
player[player.paused'play'：'pause']（）；
$（此）
.find（“.play”）
.toggleClass（“fa暂停”！player.paused）
.toggleClass（“fa播放”，玩家暂停）；
});
静音按钮。单击（函数（）{
如果（player.volume==0）{
player.volume=音量；
}否则{
音量=player.volume；
player.volume=0；
}
音量_bar.progressbar（'value'，player.volume*100）；
$（this.toggleClass（“fa volume up”，player.volume！=0）；
$（this.toggleClass（“fa音量关闭”，player.volume==0）；
});
更多信息。单击（函数（）{
音频播放器({
高度：（音频播放器高度（）=50）？100:50
}, 1000);
});
HTML:


音频1
一些文本

00:23
音频2
一些文本

00:00
音频3
一些文本

00:00
ID意味着每个文档都是唯一的。你复制了它们。例如，
id=“player
在您的文档和许多其他文档中出现了3次。请以html中唯一的方式重命名它们，或者使用类名 
<div class="grid" style="position: relative; height: 290px;">


    

    <div class="audio-box  uncategorised  " >

        <div class="audio-btn">
            
        </div>
        <div class="audio-content">
            
            <h2>Audio 1</h2>
            <p>some text</p>
        </div>
        <div style="clear:both;"></div>
        <div class="play-wrap">
            <audio id="player" class="music">
                <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
            </audio>

            <div id="audio-player">
                <div id="controls">
                    <i id="play" class="play fa fa-play" aria-hidden="true"></i>
                    <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="183.719184" aria-valuenow="23.713634"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: block; width: 15%;"></div></div>
                    <span id="time" class="time">00:23</span>
                    <i id="mute" class="fa fa-volume-up" aria-hidden="true"></i>
                    <div id="volume" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 77%;"></div></div>
                </div>

            </div>
            <i class="play fa fa-play" aria-hidden="true"></i>

        </div>





    </div>


    

    <div class="audio-box  category-2  uncategorised  " >

        <div class="audio-btn">
            
        </div>
        <div class="audio-content">
            
            <h2>Audio 2</h2>
            <p>Some Text</p>
        </div>
        <div style="clear:both;"></div>
        <div class="play-wrap">
            <audio id="player" class="music">
                <source src="http://ccmixter.org/content/djlang59/djlang59_-_Erase_Racism.mp3" type="audio/mpeg">
            </audio>

            <div id="audio-player">
                <div id="controls">
                    <i id="play" class="play fa fa-play" aria-hidden="true"></i>
                    <div id="progressbar"></div>
                    <span id="time" class="time">00:00</span>
                    <i id="mute" class="fa fa-volume-up" aria-hidden="true"></i>
                    <div id="volume"></div>
                </div>

            </div>
            <i class="play fa fa-play" aria-hidden="true"></i>

        </div>





    </div>


    

    <div class="audio-box  category-2  uncategorised  " >

        <div class="audio-btn">
            
        </div>
        <div class="audio-content">
            
            <h2>Audio 3</h2>
            <p>Some Text</p>
        </div>
        <div style="clear:both;"></div>
        <div class="play-wrap">
            <audio id="player" class="music">
                <source src="http://ccmixter.org/content/djlang59/djlang59_-_Breathe_-_BLM_Mix.mp3" type="audio/mpeg">
            </audio>

            <div id="audio-player">
                <div id="controls">
                    <i id="play" class="play fa fa-play" aria-hidden="true"></i>
                    <div id="progressbar"></div>
                    <span id="time" class="time">00:00</span>
                    <i id="mute" class="fa fa-volume-up" aria-hidden="true"></i>
                    <div id="volume"></div>
                </div>

            </div>
            <i class="play fa fa-play" aria-hidden="true"></i>

        </div>





    </div>
    

</div>