I am new to Jquery and Javascript. I want my code to play a sound when clicking anywhere in the document, and a different sound when double clicking on a .marker.
It works right now, but when I double click the marker it plays the .click function twice along with the double click function.
How do I prevent the .click from playing when I double click?
Here is my Jquery code:
$(document).ready(function () {
$(document).click(function () {
setTimeout(function () {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();
}, 700);
});
$('.marker').dblclick(function () {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
});
});
Just check whether clicked element is .marker :
$(document).click(function(event) {
if($(event.target).is(".marker")) return ;
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
Using event properties, you could achieve
$('marker').click(function(event) {
if(!event.detail || event.detail == 1){
// code here.
// It will execute only once on multiple clicks
}
});
The stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
$(document).click(function () {
setTimeout(function() {
let audio = document.createElement("audio");
audio.src = "audio/click-audio.wav";
audio.play();}, 700);
});
$('.marker').click(function (event) {
let audio = document.createElement("audio");
audio.src = "audio/page-audio.wav";
audio.play();
event.stopPropagation();
});
});
hope it will help you
Related
Can I stop an html audio manually in a way that it raises the "ended" event?
<script>
var audio = new Audio();
audio.src = "https://translate.google.com/translate_tts?&q=text&tl=en&client=a"
audio.play();
audio.addEventListener("ended", function() {
console.log("audio ended");
});
audio.addEventListener("play", function() {
window.setTimeout(function() {
audio.pause(); //stop audio half sec after it starts - this doesn't raise the "ended" event!
}, 500);
});
</script>
You can do that but its on timeupdate event folowing code with jQuery and JS respectively
<audio ontimeupdate="watchTime4Audio(this.currentTime,this.duration)" ... ></audio>
IN HTML
//jQuery
$('audio').on('timeupdate',function(){
if($(this).prop('currentTime')>=$(this).prop('duration')){
//the song has ended you can put your trigger here
}
});
//JS
audio.addEventListener('timeupdate', function() {
if(this.currentTime >= this.duration){
//the song has ended you can put your trigger here
}
});
Using Javascript/JQuery
The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">
You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}
Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});
Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).toggleClass(".play");
});
And here's the buttons
<div class="play"><img src="../images/play.gif"></img></div>
<div class="pause"><img src="../images/pause.gif"></img></div>
I know there could be and easy way to make a div change classes every time its clicked.
I would set up the <html> like this:
<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->
Then I would just use a boolean to switch back and forth in the script.
var toggleIt = false;
$("#play").click(function(){
if (!toggleIt){
audio.play();
toggleIt = true;
$("#play").find("img").attr("src", "file url here");
}
else{
audio.pause();
toggleIt = false;
$("#play").find("img").attr("src", "file url here");
}
})
edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough
You can create 2 diferents button and change de visibility
var audio = new Audio("audio.mp3");
$("#play").click(function () {
audio.play();
$("#play").hide();
$("#pause").show();
})
$("#pause").click(function () {
$("#pause").hide();
$("#play").show();
});
Set a variable then use a conditional to see if you should either play or pause the audio:
<div class="button"><img src="../images/play.gif"></img></div>
var play = true;
$(".button").click(function(){
if (play){
// Play
audio.play();
$(".button img").attr("src", "../images/pause.gif");
play = false;
} else {
// Pause
audio.pause();
$(".button img").attr("src", "../images/play.gif");
play = true;
}
});
Example
var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
This does not work:
document.getElementById("audio").onplay = function () {
alert("in");
};
Also tried to use "onPlay", same result.
However, this does work:
document.getElementById("audio").addEventListener("play", function () {
alert("in");
}, false);
Am I missing something here?
I think you have to switch between the "play and pause" states take a look here
http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
It should fire the first time you play when using onplay but it won't fire after that
therefore you should create a button that toggles both states
var playpause = document.getElementById('playpause');
video.onpause = function(e) {
playpause.value = 'Play';
playpause.onclick = function(e) { video.play(); }
}
video.onplay = function(e) {
playpause.value = 'Pause';
playpause.onclick = function(e) { video.pause(); }
}
I've got this JavaScript/jquery code:
$(document).ready(function() {
var audioElement = document.createElement('audio');
var secondtrack = 'hangover.ogg';
audioElement.setAttribute('src', 'hangover.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#play').click(function() {
audioElement.play();
});
$('#pause').click(function() {
audioElement.pause();
});
});
How could I get another song started after the first ended?
The AUDIO element should fire a "ended" event though I am not sure how well this is supported at the moment.
So you could try something like that:
audioElement.addEventListener('ended', function () {
// Play another song
});
See also:
http://dev.w3.org/html5/spec/Overview.html#event-media-ended