javascript在音频中添加onended事件答案

【问题标题】：javascript adding onended event in audiojavascript在音频中添加onended事件
【发布时间】：2023-03-05 13:30:01
【问题描述】：

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>


</head>
<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">
    <source src="http://www.internetdj.com/mp3/108215.mp3" type="audio/mpeg" />
</audio>

<audio id="sound2">
    <source src="http://www.bigsoundbank.com/sounds/ogg/0580.ogg" type="audio/ogg" />
</audio>

<audio id="sound3">
    <source src="http://www.bigsoundbank.com/sounds/ogg/0003.ogg" type="audio/ogg" />
</audio>


</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
    $('.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();
        }
    });
</script>
</html>

【问题讨论】：

你想要这样的http://jsbin.com/kirifu/edit?html,js,output
@GarvitMangal 将来如果您要制作示例音频代码，请使用较短的声音！ 5分钟！真的吗？？？
@GarvitMangal 非常感谢，先生！这正是我想要的！真的很感谢！
@Vi0nik 欢迎好友，我正在更新它作为答案

标签： javascript jquery events audio

【解决方案1】：

 $('.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>

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

【讨论】：