Having
var audio = new Audio("click.ogg")
I play the click sound when needed by
audio.play()
However, sometimes user is so fast that a browser does not play the audio at all (probably when still playing a previous play request). Is this issue related to preload?
How can I force a browser to stop playing and start over? There is no stop, just pause in HTML5 audio component, correct? What workaround can be used here?
Update - Additional note:
I have multiple checkbox-like div elements with a touchend event. When such event is triggered, the elements visually change, a sound is played and an internal variable is set accordingly. If user tap on these elements slowly, everything works nicely. If tap fast, the sound is often completely skipped...
The simplest solution is to just reset the audio currentTime and ensure it's playing using the play() method. Checking if the audio is playing is not necessary as subsequent play() invocations will not do anything.
audio.currentTime = 0;
audio.play();
This is the code I've been using and it's working for me:
if(audioSupport.duration > 0 && !audioSupport.paused){
//already playing
audioSupport.pause();
audioSupport.currentTime = 0;
audioSupport.play();
}else{
//not playing
audioSupport.play();
}
I noticed that on Firefox, playing a sound again and again really fast (like a short ticking sound) will skip beats often. The best solution I got was to simply call cloneNode and play each sound that way. Its not perfect (compared to Chrome where it sounds flawless):
var audio = document.getElementById('myaudio');
setInterval(function() {
audio.cloneNode().play();
}, 100);
The only way i found how to play a short sound very quickly (so quick that the 2nd sound starts before the first ends) is to actually load 5 or 10 and if you have to play again but are already playing, just go to the next, which is not playing:
var soundEls = [];//load 10 audios instead of 1
for(var i=0;i<10;i++){
var soundEl = document.createElement('audio');
soundEl.src = url;
soundEl.preload = 'auto';
$(this._soundEl).append(soundEl);
soundEls.push(soundEl);
}
var soundElIndex = 0;
return {play:function(){
var soundEl = soundEls[soundElIndex];
if(soundEl.duration > 0 && !soundEl.paused){
//already playing, switch to next soundEl
soundElIndex++;
if(!soundEls[soundElIndex]) soundElIndex=0;
soundEls[soundElIndex].play();
}else{
//not playing
soundEl.play();
}
}};
Result of this is you can actually play the same sound over itself.
Probably not the right way to do it though.
Related
How to add a listener on audio/video start?
I can do it like:
$audio.on("play", function() {
console.log("audio played");
});
where $audio is a jQuery object representing the single DOM audio element.
but it will also run when we resume the video. I want it to run on start only.
One way I can do it is:
$audio.on("play", function() {
if(this.currentTime === 0) {
console.log("audio started);
}
});
but this will run multiple times when we play/pause the audio on the start.
Is there any better way to do this? The listener should only work on audio start and audio replayed, not when the user manually drags the seek bar to the beginning of the source.
Store a flag into the data-* attribute of the targeted element:
const $audio = $('.audio');
$audio.on("play", function() {
if ($(this).data('once-played')) return; // Do nothing if data exists.
// Your code here
console.log("Audio started for the first time");
// Finally, add a flag.
$(this).data('once-played', true);
});
<audio class="audio" src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" autoplay controls loop></audio>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Actually, it might be sounding confusing because I was under the impression that there could be a possibility that currentTime could still return 0 if we do it in a fraction of seconds. But after reading #freedomn-m, #roko-c-buljan, #rory-mccrossan comments, I got it that it will never be possible that currentTime returns 0 when we play-pause-play the video immediately.
Now, let's say I want to track how many times a user has watched the video. The requirements might sound weird but by watched I only meant started/replayed. It doesn't count if the user manually drags the seek bar to the beginning of the source.
Here is how I implemented it finally using all your points:
const $audio = $('.audio');
$audio.on("play", function() {
if ($(this).data('once-played')) return; // Do nothing if data exists.
// Your code here
console.log("Audio started/replayed");
// Finally, add a flag.
$(this).data('once-played', true);
});
$audio.on("ended", function() {
$(this).data('once-played', false);
});
I would like use an HTML5 audio element such that it has multiple "channels." Normally, with a simple audio tag, if I press the play button once, it will play; however, if I press play again while the audio is still playing, it won't play the again. Essentially, I want the same sound to be able to be played again simultaneously unless all of the channels are playing.
To do this, I'm loading many audio tags. Here is my code to load the audio files:
function loadAllAudios(number) {
toLoad = number;
loaded = 0;
audios = [];
for (var i = 0; i < number; ++i) {
// Random test audio file here
loadAudio("http://www.w3schools.com/html/horse."); // Leave off extension
}
}
And the loadAudio function is as follows:
function loadAudio(source) {
var aud = document.createElement("audio");
aud.addEventListener("canplaythrough", function() {
++loaded;
});
aud.src = source + (aud.canPlayType("ogg") ? "ogg" : "mp3");
audios.push(aud);
};
To keep track of which audio element is playing, I have an array called audios. The elements at the beginning of the array have probably ended, while those at the end are probably still playing. When an audio element starts playing, it is moved from the beginning to the end.
This is the code that gets executed when you press play:
console.log(audios);
// Make sure everything is loaded, and that audios isn't an empty array
if (loaded === toLoad && audios && audios.length) {
var curAudio = audios[0];
curAudio.play();
// Move the first element to the end of the array
// so that we don't play it again while it is still playing
audios.push(audios.shift());
}
The jsfiddle is here: http://jsfiddle.net/prankol57/XgRH4/1/
My problem is that, for example, if I load three channels, after clicking play 4 times, the code stops working, even if all the audios have ended. I thought it might have been that the element isn't moved to the end correctly, but a console.log shows that all the audio elements are still there.
Edit: Of the browsers I tested in (Chrome, Firefox, and Internet Explorer 11), the code works only in Internet Explorer 11.
canplaythrough event will fire more than once for single file, causing unexpected ++loaded (even when the file was already loaded) and thus loaded === toLoad condition will return false.
I have a card matching game that I created here:
http://ewands.no-ip.biz/intern/guangjian/card/
The problem that I have is that I am unable to pause or mute the currently playing sound effect when a card is flipped, so if I immediately click the second card, no sound is heard. Using either pause and muted does not work. Any ideas?
//flipping_sound.pause(); does not work
//flipping_sound.muted; does not work
flipping_sound.play();
i'am using jquery and it's help for me:
flipping_sound.get(0).pause();
flipping_sound.get(0).currentTime = 0;
flipping_sound.get(0).play();
first you need to check if is playing with this:
function isPlaying(audioElement) { return audioElement.paused; }
and if the audio is playing you need change the position of the audio with this
function changeAudioPosition(audioElement) { audioElement.currentTime = 0; }
and if the audio is not playing just play again
Is it possible to seek to a particular point in html5 video displayed in a web page? I mean ,can I input a particular time value (say 01:20:30:045 ) and have the player control (slider) move to that point and play from that point onwards?
In older version of mozilla vlcplugin I think this is possible by seek(seconds,is_relative) method..but I would like to know if this is possible in html video.
Edit:
I created the page with video and added javascript as below.When I click on the link ,it displays the time of click..but it doesn't increment the play location..but continues to play normally.
Shouldn't the video play location get changed?
html
<video id="vid" width="640" height="360" controls>
<source src="/myvid/test.mp4" type="video/mp4" />
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span>
</p>
javascript
$(document).ready(function(){
var player = $('#vid').get(0);
$('#gettime').click(function(){
if(player){
current_time=player.currentTime;
$('#showtime').html(current_time+" seconds");
player.currentTime=current_time+10;
}
});
}
);
You can use v.currentTime = seconds; to seek to a given position.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
Unfortunately it seems with some movie elements it behaves differently than others. For instance with an amazon video_element, it seems you must call pause before you can seek anywhere, then call play. However, if you call play "too quickly" after setting the currentTime then it won't stick. Odd.
Here is my current work around:
function seekToTime(ts) {
// try and avoid pauses after seeking
video_element.pause();
video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
// however if it close enough, then we need to call play manually
// some shenanigans to try and work around this:
var timer = setInterval(function() {
if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
video_element.play();
clearInterval(timer);
}
}, 50);
}
Top answer is outdated.
You can still use:
this.video.currentTime = 10 // seconds
But now you also have:
this.video.faskSeek(10) // seconds
The docs provide the following warnings regarding the fastSeek method:
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The HTMLMediaElement.fastSeek() method quickly seeks the media to the new time with precision tradeoff.
If you need to seek with precision, you should set HTMLMediaElement.currentTime instead.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek
Based on the above I guess the following is best if cross browser compatibility and performance are your top priority:
const seek = secs => {
if (this.video.fastSeek) {
this.video.fastSeek(secs)
} else {
this.video.currentTime = secs
}
}
seek(10)
If you prefer accuracy over performance then stick with:
this.video.currentTime = secs
At the time of writing faskSeek is only rolled out to Safari and Firefox but expect this to change. Check the compatibility table at the above link for the latest info on browser compatibility.
Is there any way to pause and rewind to 0s a HTML5 video? Or just simply stop?
I got a jQuery popup, so when someone clicks on it, the popup shows up and the video plays, and when you hit the close button the video pauses. So what I'm trying to do is that if you click again the button to show the popup the video begins in the start position (0 secs).
Thanks.
You can get a reference to your jquery video element upon opening it (or closing the popup) and pause it using pause(), and then set the "currentTime" property to 0 to go back to the beginning.
Here's a reference to the documentation for currentTime.
here's a code sample:
var mediaElement = document.getElementById("video");
mediaElement.pause();
mediaElement.currentTime = 0;
To have a proper stop (pause & rewind) functionality you could do the following:
var video = document.getElementById('vidId');
// or video = $('.video-selector')[0];
video.pause();
video.currentTime = 0;
video.load();
Note: This is the only version that worked for me in chrome using nodejs (meteorjs) in the backend, serving webm & ogg files
Just call the pause() method of the video element. To reset the time, set currentTime to 0 (or any other value if needed, in seconds).
To reset a video to 0 seconds in jQuery:
$('#video')[0].currentTime = 0;
Or, in vanilla JS (Although this has been pointed out above):
var video = document.getElementById('video');
video.currentTime = 0;