admin管理员组文章数量:1426198
I'am beginner in HTML5 and not even middle in JS, but I'am trying to figure out how to correctly use <audio> and smth else... so i've got this question... my html:
<i class='some_icon' onclick='play();'>
<audio src='some_mp3.mp3' id='player'></audio>
</i>
Now when I click on the icon I want some mp3 file play and it works because I wrote this js:
function play() {
var my = document.getElementById('player');
if (my.paused) {
my.play();
} else {
my.pause();
my.currentTime = 0
}
}
BUT, besides, I want to change my icon WHEN that mp3 file ENDS... how can I do that? Any help will be greatly appreciated :)
I'am beginner in HTML5 and not even middle in JS, but I'am trying to figure out how to correctly use <audio> and smth else... so i've got this question... my html:
<i class='some_icon' onclick='play();'>
<audio src='some_mp3.mp3' id='player'></audio>
</i>
Now when I click on the icon I want some mp3 file play and it works because I wrote this js:
function play() {
var my = document.getElementById('player');
if (my.paused) {
my.play();
} else {
my.pause();
my.currentTime = 0
}
}
BUT, besides, I want to change my icon WHEN that mp3 file ENDS... how can I do that? Any help will be greatly appreciated :)
Share Improve this question edited May 11, 2016 at 14:23 impregnable fiend asked May 11, 2016 at 13:53 impregnable fiendimpregnable fiend 2891 gold badge5 silver badges16 bronze badges 3- by stopped, you mean ended? – Mohit Bhardwaj Commented May 11, 2016 at 14:17
- @Mike yeah, cause ended, sorry for my engl – impregnable fiend Commented May 11, 2016 at 14:18
- Possible duplicate of HTML5 audio element with dynamic source – Reinard Commented May 11, 2016 at 14:30
2 Answers
Reset to default 7Here is the code to trigger some code when your audio ( or video ) ends:
var my = document.getElementById('player');
my.addEventListener("ended", function(e){
// here goes your code to change the icon
}, false);
I know this was answered/accepted yesterday but i just thought I'd share a full working bit of code for future users benefit. (the sound clip is only 4 secs long)
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./bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn./font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery./jquery-1.11.3.js"></script>
<script src="http://maxcdn.bootstrapcdn./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./monkey.mp3" id="player" class="collapse"></audio>
</button>
</div>
</body>
</html>本文标签： javascriptHow to catch 39stop39 event in HTML5 audio and then do somethingStack Overflow
版权声明：本文标题：javascript - How to catch 'stop' event in HTML5 audio and then do something? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745472427a2659810.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论