如何在 HTML5 音频中捕捉“停止”事件然后做点啥？
Posted
技术标签:
【中文标题】如何在 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的可能重复 【参考方案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> <span class="texto">Play</span></span>
<audio src="http://www.rachelgallen.com/monkey.mp3" id="player" class="collapse"></audio>
</button>
</div>
</body>
</html>【讨论】：
以上是关于如何在 HTML5 音频中捕捉“停止”事件然后做点啥？的主要内容，如果未能解决你的问题，请参考以下文章
在 UIPageviewcontroller 中停止 HTML5 音频