Fire an event when HTMLAudioElement passed a specific timestamp
up vote
-1
down vote
favorite
Is it possible to fire an event when HTMLAudioElement passed a specific timestamp?
For example, I have an HTMLAudioElement playing and I want to run my function when the audio passes x% of the whole duration (for example 50%).
Here is how I can do that right now.
html
<body>
<h1>Audio Test</h1>
<p>Simple example</p>
<div>
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>
</div>
</body>
js
var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var playSound = function() {
audio.play();
};
playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function() {
audio.pause()
}, false);
const runAfterHalfOfSoundIsDone = function() {
alert("Half was done");
}
let interval;
interval = setInterval(function() {
if (audio.currentTime > 0.5 * audio.duration) {
clearInterval(interval);
runAfterHalfOfSoundIsDone();
}
}, 10);
jsfiddle
Are there any better ways?
javascript html5
asked Nov 7 at 15:25
Yaroslav Trofimov
568
add a comment |
up vote
-1
down vote
favorite
Is it possible to fire an event when HTMLAudioElement passed a specific timestamp?
For example, I have an HTMLAudioElement playing and I want to run my function when the audio passes x% of the whole duration (for example 50%).
Here is how I can do that right now.
html
<body>
<h1>Audio Test</h1>
<p>Simple example</p>
<div>
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>
</div>
</body>
js
var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var playSound = function() {
audio.play();
};
playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function() {
audio.pause()
}, false);
const runAfterHalfOfSoundIsDone = function() {
alert("Half was done");
}
let interval;
interval = setInterval(function() {
if (audio.currentTime > 0.5 * audio.duration) {
clearInterval(interval);
runAfterHalfOfSoundIsDone();
}
}, 10);
jsfiddle
Are there any better ways?
javascript html5
asked Nov 7 at 15:25
Yaroslav Trofimov
568
Can you add an example of the code you have tried to accomplish this. We cannot help you if we cannot see any effort has been made on your part.
– Daniel Gonzalez
Nov 7 at 16:32
@DanielGonzalez, I read this and not sure what I can try here.
– Yaroslav Trofimov
Nov 7 at 16:47
Hm. Actually from the performance point of view the solution is not so bad if I will run the interval each second... But still it would be nice to have a different, cleaner approach. Thank you.
– Yaroslav Trofimov
Nov 7 at 19:26
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
Is it possible to fire an event when HTMLAudioElement passed a specific timestamp?
For example, I have an HTMLAudioElement playing and I want to run my function when the audio passes x% of the whole duration (for example 50%).
Here is how I can do that right now.
html
<body>
<h1>Audio Test</h1>
<p>Simple example</p>
<div>
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>
</div>
</body>
js
var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var playSound = function() {
audio.play();
};
playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function() {
audio.pause()
}, false);
const runAfterHalfOfSoundIsDone = function() {
alert("Half was done");
}
let interval;
interval = setInterval(function() {
if (audio.currentTime > 0.5 * audio.duration) {
clearInterval(interval);
runAfterHalfOfSoundIsDone();
}
}, 10);
jsfiddle
Are there any better ways?
javascript html5
asked Nov 7 at 15:25
Yaroslav Trofimov
568
Is it possible to fire an event when HTMLAudioElement passed a specific timestamp?
For example, I have an HTMLAudioElement playing and I want to run my function when the audio passes x% of the whole duration (for example 50%).
Here is how I can do that right now.
html
<body>
<h1>Audio Test</h1>
<p>Simple example</p>
<div>
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>
<button id="play">Play</button>
<button id="stop">Stop</button>
</div>
</body>
js
var playBtn = document.getElementById('play');
var stopBtn = document.getElementById('stop');
var playSound = function() {
audio.play();
};
playBtn.addEventListener('click', playSound, false);
stopBtn.addEventListener('click', function() {
audio.pause()
}, false);
const runAfterHalfOfSoundIsDone = function() {
alert("Half was done");
}
let interval;
interval = setInterval(function() {
if (audio.currentTime > 0.5 * audio.duration) {
clearInterval(interval);
runAfterHalfOfSoundIsDone();
}
}, 10);
jsfiddle
Are there any better ways?
javascript html5
javascript html5
asked Nov 7 at 15:25
Yaroslav Trofimov
568
asked Nov 7 at 15:25
Yaroslav Trofimov
568
edited Nov 7 at 17:30
asked Nov 7 at 15:25
Yaroslav Trofimov
568
asked Nov 7 at 15:25
Yaroslav Trofimov
568
asked Nov 7 at 15:25
Yaroslav Trofimov
568
568
Can you add an example of the code you have tried to accomplish this. We cannot help you if we cannot see any effort has been made on your part.
– Daniel Gonzalez
Nov 7 at 16:32
@DanielGonzalez, I read this and not sure what I can try here.
– Yaroslav Trofimov
Nov 7 at 16:47
Hm. Actually from the performance point of view the solution is not so bad if I will run the interval each second... But still it would be nice to have a different, cleaner approach. Thank you.
– Yaroslav Trofimov
Nov 7 at 19:26
add a comment |
Can you add an example of the code you have tried to accomplish this. We cannot help you if we cannot see any effort has been made on your part.
– Daniel Gonzalez
Nov 7 at 16:32
@DanielGonzalez, I read this and not sure what I can try here.
– Yaroslav Trofimov
Nov 7 at 16:47
Hm. Actually from the performance point of view the solution is not so bad if I will run the interval each second... But still it would be nice to have a different, cleaner approach. Thank you.
– Yaroslav Trofimov
Nov 7 at 19:26
Can you add an example of the code you have tried to accomplish this. We cannot help you if we cannot see any effort has been made on your part.
– Daniel Gonzalez
Nov 7 at 16:32
Can you add an example of the code you have tried to accomplish this. We cannot help you if we cannot see any effort has been made on your part.
– Daniel Gonzalez
Nov 7 at 16:32
@DanielGonzalez, I read this and not sure what I can try here.
– Yaroslav Trofimov
Nov 7 at 16:47
@DanielGonzalez, I read this and not sure what I can try here.
– Yaroslav Trofimov
Nov 7 at 16:47
Hm. Actually from the performance point of view the solution is not so bad if I will run the interval each second... But still it would be nice to have a different, cleaner approach. Thank you.
– Yaroslav Trofimov
Nov 7 at 19:26
Hm. Actually from the performance point of view the solution is not so bad if I will run the interval each second... But still it would be nice to have a different, cleaner approach. Thank you.
– Yaroslav Trofimov
Nov 7 at 19:26
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53192511%2ffire-an-event-when-htmlaudioelement-passed-a-specific-timestamp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you add an example of the code you have tried to accomplish this. We cannot help you if we cannot see any effort has been made on your part.
– Daniel Gonzalez
Nov 7 at 16:32
@DanielGonzalez, I read this and not sure what I can try here.
– Yaroslav Trofimov
Nov 7 at 16:47
Hm. Actually from the performance point of view the solution is not so bad if I will run the interval each second... But still it would be nice to have a different, cleaner approach. Thank you.
– Yaroslav Trofimov
Nov 7 at 19:26