Question

我希望这不会被认为是重复的，因为我已经在我的问题中搜索了很多相关的问题。我仍然是javarscript和jquery中的完整菜鸟，所以请记住这一点。

我有以下代码，其中一切正常，但在音频文件完成后，图标不会更改为“播放”，文件不会重新加载。我试图添加引发的事件，但我不确定在哪里以及如何做到这一点。这将有助于我的项目的大时间，我将感谢任何帮助。谢谢！

Downloads/

Answer 1

JS

 $('.aud').bind("ended",function(){
  var btn_id = $(this).attr("id").replace(/sound/,'');
  btn_id = "btn" + btn_id;
  var play = '<div class="btn btn-xs"><i class="glyphicon glyphicon-play"></i></div>';
        var pause = '<div class="btn btn-xs"><i class="glyphicon glyphicon-pause"></i></div>';


  $("#"+btn_id).toggleClass('active');

  if(!$("#"+btn_id).hasClass('active')){
    $("#"+btn_id).html(play);
  }


  alert("finished");
});

$('.btn').click(function () {
        var $this = $(this);
        var id = $this.attr('id').replace(/btn/, '');
        var play = '<div class="btn btn-xs"><i class="glyphicon glyphicon-play"></i></div>';
        var pause = '<div class="btn btn-xs"><i class="glyphicon glyphicon-pause"></i></div>';
        $this.toggleClass('active');
        if ($this.hasClass('active')) {
            $this.html(pause);
            $('audio[id^="sound"]')[id - 1].play();
        } else {
            $this.html(play);
            $('audio[id^="sound"]')[id - 1].pause();
            $('audio[id^="sound"]')[id - 1].pause();
        }
    });

$('.aud').bind("ended",function(){
  var btn_id = $(this).attr("id").replace(/sound/,'');
  btn_id = "btn" + btn_id;
  var play = '<div class="btn btn-xs"><i class="glyphicon glyphicon-play"></i></div>';
        var pause = '<div class="btn btn-xs"><i class="glyphicon glyphicon-pause"></i></div>';
  
  
  $("#"+btn_id).toggleClass('active');
  
  if(!$("#"+btn_id).hasClass('active')){
    $("#"+btn_id).html(play);
  }
  
  
  alert("finished");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
<div class="btn btn-xs" id="btn1"><i class="glyphicon glyphicon-play"></i></div>

<div class="btn btn-xs" id="btn2"><i class="glyphicon glyphicon-play"></i></div>

<div class="btn btn-xs" id="btn3"><i class="glyphicon glyphicon-play"></i></div>


<!-- SOUNDS -->
<audio id="sound1" class="aud">
    <source src="http://www.internetdj.com/mp3/108215.mp3" type="audio/mpeg" />
</audio>

<audio id="sound2" class="aud">
    <source src="http://www.bigsoundbank.com/sounds/ogg/0580.ogg" type="audio/ogg" />
</audio>

<audio id="sound3" class="aud">
    <source src="http://www.bigsoundbank.com/sounds/ogg/0003.ogg" type="audio/ogg" />
</audio>
</body>

DEMO：http://jsbin.com/kirifu/edit?html,js,output

javascript在音频中添加onended事件

1 个答案: