如何在 HTML5 音频中捕捉“停止”事件然后做点什么？答案

【问题标题】：How to catch 'stop' event in HTML5 audio and then do something?如何在 HTML5 音频中捕捉“停止”事件然后做点什么？
【发布时间】：2016-05-11 13:53:21
【问题描述】：

我是 HTML5 的初学者，甚至不是 JS 的中级，但我正在尝试弄清楚如何正确使用 <audio> 等等……所以我有这个问题……我的 html：

<i class='some_icon' onclick='play();'>
  <audio src='some_mp3.mp3' id='player'></audio>
</i>

现在，当我单击该图标时，我想要播放一些 mp3 文件，它可以工作，因为我写了这个 js：

function play() {
    var my = document.getElementById('player');
    if (my.paused) {
      my.play();
    } else {
      my.pause();
      my.currentTime = 0
    }
  }

但是，除此之外，我想在 mp3 文件结束时更改我的图标...我该怎么做？任何帮助将不胜感激:)

【问题讨论】：

停止，你的意思是结束？
@Mike 是的，原因已经结束，对不起我的英语
HTML5 audio element with dynamic source的可能重复

标签： javascript html audio

【解决方案1】：

这是在您的音频（或视频）结束时触发某些代码的代码：

var my = document.getElementById('player');

my.addEventListener("ended", function(e){
  // here goes your code to change the icon
}, false);

【讨论】：

【解决方案2】：

我知道昨天已经回答/接受了这个问题，但我只是想我会分享一个完整的工作代码，以使未来的用户受益。（声音片段只有 4 秒长）

 function play() {
   var my = document.getElementById('player');
   my.currentTime = 0;
   /**this one loops***/
   if ($('.btn').find('span i').hasClass('fa-stop')) {
     $('.btn').find('span i').removeClass('fa-stop').addClass('fa-play-circle');
     $('.texto').text("Play");
   }
   if (my.paused) {
     my.play();
   } else {
     my.pause();
     my.currentTime = 0;
   }
   my.addEventListener("ended", function(e) {
     $('.btn').find('span i').removeClass('fa-play-circle').addClass('fa-stop');
     $('.texto').text("Stop");
   });
 }

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Audio Icon Toggle</title>
</head>

<body>
  <div id="music">
    <h2>Audio Icon Toggle</h2>
    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#player" onclick="play();"><span><i class="fa fa-play-circle" aria-hidden="true"></i>&nbsp;&nbsp;<span class="texto">Play</span></span>
      <audio src="http://www.rachelgallen.com/monkey.mp3" id="player" class="collapse"></audio>
    </button>
  </div>
</body>
</html>

【讨论】：