I want to play only one audio at a time in response to some mouse event. The situation is onmouse over event on different HTML element plays audio. It becomes noisy when a user moves the mouse fast from one element to another and both the element plays audio. I want to check whether any audio is being played before playing a new audio. I used following code:
var $audioAnno=0;
function audioAnnotation(y){
var audio;
if ($audioAnno==0){
$audioAnno=1;
audio = new Audio(y);
audio.play();
$audioAnno=0;
}
}
It does not stop the 2nd audio to play.
this is how, I would do it, maintain a flag canPlay and on mouse event, if true, then play
canPlay = true;
var es = document.getElementsByTagName('audio'), audios=[];
for(var i=0;i<es.length;i++) audios.push(es[i]);
audios.forEach(function(e){
e.addEventListener('play', function(){
canPlay= false;
});
e.addEventListener('ended', function(){
canPlay= true;
});
});
// later on some mouseEvent based on some condition
function onMouseEvent(audioElement){
if(canPlay){
audioElement.play();
}
};
Edit: fiddle demo.
Edit2:
same thing with just audio object:
var audio = new Audio(), canPlay = true;
audio.src = 'http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg';
audio.addEventListener('play', function(){
console.log('playing');
canPlay = false;
});
audio.addEventListener('ended', function(){
console.log('stopped');
canPlay = true;
});
audio.play();
//similar mouse event listener changes to
function onMouseEvent(){
if(canPlay){
//audio.src ='...'; // providing new source
audio.play();
}
};
Thanks all.
I could solve the problem. I used following code:
var $audioAnno=0;
function audioAnnotation(x, y){
var audio = new Audio(y);
if ($audioAnno==0){
$audioAnno = 1;
audio.play();
audio.addEventListener("ended", function(){ $audioAnno = 0; });
}
}
Related
I tried to play sound when the page is loaded, but it's not working never but when I click on button the sound is working.
JavaScript
<script>
$( document ).ready(function() {
let audio = new Audio('sounds/sound.mp3');
let is_play = true;
let btn = document.getElementById("sound_btn");
audio.play();
$("#" + btn.getAttribute("id")).click(function () {
if (is_play) {
btn.innerText = "Play Sound";
is_play = false
audio.pause();
} else {
btn.innerText = "Pause Sound";
is_play = true;
audio.play();
}
});
});
</script>
You’re probably using Google chrome which prevents playing audio files upon loading, you can check your log for such an error.
Audio files has to has to be played after a user’s event (as clicking).
I'm building audio player with jQuery. And I managed to do almost everything that I wanted, but I can not make song to repeat when I click on repeat button. It should repeat if I click on repeat button and if it is enabled, when I click again to disable it.
I init audio with
music = new Audio()
I tried to use some thing like:
$('.rep').on('click', function(){
music.prop('loop');
})
but I can not get it work.
any advice, comment or tutorial would be helpful because I am looking to learn, not to copy/paste.
Thanks
U can add eventListener like this.. :
$('.rep').click(function(){
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
});
or just edit an attr loop like this CodePen :
myAudio = document.getElementById("myAudio");
$('.rep').click(function(){
if(myAudio.loop != true){
myAudio.loop = true;
myAudio.play();
} else {
myAudio.loop = false;
myAudio.currentTime = 0;
myAudio.pause();
}
});
Hope it helps.
I have two files one is video file with no volume and the other one is audio. So I'm running these two files in <audio> and <video> tags. I want that when both file are ready to play then the video play otherwise wait until both are not able to play. So, what I used for this.
canPlay is not working well for me because it can check only one of them at a time.
Thanks
UPDATE
audio.addEventListener('canplay',function(){
audio.play();
video.play();
});
video.addEventListener('canplay',function(){
audio.play();
video.play();
});
I try this but this is not working because whenever one of them is running it play both without care about other one, Because there is play() for both of them.
Listen for canplaythrough event of both the elements and if both can, trigger .play() on both the elements.
The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
Try this:
var audioCan = false,
videoCan = false;
audio.addEventListener('canplaythrough', function() {
audioCan = true;
playAll();
});
video.addEventListener('canplaythrough', function() {
videoCan = true;
playAll();
});
function playAll() {
if (audioCan && videoCan) {
audio.play();
video.play();
}
}
Edit: You can achieve the same using promise.
Try this:
var audioLoaded = new Promise(function(resolve) {
audio.addEventListener('canplaythrough', function() {
resolve();
});
});
var videoLoaded = new Promise(function(resolve, reject) {
video.addEventListener('canplaythrough', function() {
resolve();
});
});
function playAll() {
audio.play();
video.play();
}
Promise.all([audioLoaded, videoLoaded]).then(playAll);
This is the code to recognize speech, it stops recording in a few seconds. The mic icon from the Title Bar vanishes.
var streaming = new webkitSpeechRecognition();
streaming.lang = 'en-IN';
streaming.continuous = true;
streaming.interimResults = true;
streaming.onresult = function(event) {
l_pos = event.results.length - 1 ;
console.log(event.results[l_pos][0].transcript);
}
streaming.onend = function(event) {
console.log("1")
streaming.start();
console.log("2")
}
streaming.start();
How do I make it record continuously?
if you want to record continuously then you can do one thing. There is an onstop or onend event. in that event you can start it again..
I want the user to have the option to skip the preroll ad after a specified time (say 5 secs into the ad). Then the normal video would play. How can I achieve this? Currently I have something inline of this:
var adManager = function () {
var adSrc = url,
src = "http://media.w3.org/2010/05/sintel/trailer.mp4";
var adEnded = function () {
videoPlayer.removeEventListener("ended", adEnded, false);
videoPlayer.removeEventListener("playing", adPlaying, false);
$("#companionad").hide();
videoPlayer.src = src;
videoPlayer.load();
videoPlayer.play();
console.log(videoPlayer.currentTime);
};
var adPlaying = function () {
var companionad = $(responseXML).find("HTMLResource").text();
$("#companionad").html(companionad);
console.log(videoPlayer.currentTime);
}
return {
init: function () {
videoPlayer.src = adSrc;
videoPlayer.load();
videoPlayer.addEventListener("ended", adEnded, false);
videoPlayer.addEventListener("playing", adPlaying, false);
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
console.log(videoPlayer.currentTime);
}
};
}();
adManager.init();
What I am trying to do is:
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
show the skip button and continue to normal video. Is there any event that is continually fired as the video play progresses?
Do your check against the media.currentTime property in a handler for the timeupdate event. See documentation:
The timeupdate event is fired when the time indicated by the
currentTime attribute has been updated.
Just as an aside, this HTML5 video demo page is a really handy reference for playing around with the various properties and events available to you.