Develop Reference

How to toggle multiple play/pause buttons with different srcs

I'm facing some issues with my play/pause buttons. In ym HTMl I have multiple buttons with different sources:
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button">Play</button>
</div>
<audio id="player">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
This is my Javascript:
var buttons = document.getElementById("button");
var music = document.getElementById("player");
for (const buttons of button) {
buttons.addEventListener("click", function(){
if(music.paused){
music.play();
buttons.innerHTML = "Pause";
} else {
music.pause();
buttons.innerHTML = "Play";
}
});
}
But when I play music from the first button and then pause it, go over to the next button and toggle the button, the sound keeps playing from that point where I stopped it instead of playing the sound from the written source.
Anyone here that could help me?

Id attributes in HTML should be unique. The document.getElementById returns a single element (if found).
One solution to fixing your problem is to give each pair of button/audio elements different ids, for example:
<div>
<button class="button-53" id="button1">Play</button>
</div>
<audio id="player1">
<source src='audio/mixdown.mp3' type='audio/mpeg'/>
</audio>
<div>
<button class="button-53" id="button2">Play</button>
</div>
<audio id="player2">
<source src='audio/mixdown2.mp3' type='audio/mpeg'/>
</audio>
and then add event listeners for each pair:
function addListeners(buttonElement, audioElement) {
// ...add implementation
}
addListeners(
document.getElementById("button1"),
document.getElementById("player1")
);
addListeners(
document.getElementById("button2"),
document.getElementById("player2")
);

Only second audio plays JavaScript onclick event

I'm trying to add sound effects to my website, a positive one when they click on the correct image and a negative one when they click on the wrong image. At the moment only the negative sound gets played for both clicks, or depending on what order i put the sounds in, the positive one gets played.
This is my html:
<audio controls autoplay hidden id="correct">
<source src="positive.mp3" type="audio/mpeg">
</audio>
<audio controls autoplay hidden id="wrong">
<source src="negative.mp3" type="audio/mpeg">
</audio>
<div class="popup" onclick="myFunction(); playPositive()"> <img src="true.png">
<span class="popuptext" id="myPopup">CORRECT</span>
</div>
<div class="popup" onclick="myFunction(); playNegative()"> <img src="false.png"
<span class="popuptext" id="myPopup">INCORRECT</span>
</div>
And this is my Javascript:
var myMusic= document.getElementById("correct");
function playPositive() {
myMusic.play();
}
var myMusic= document.getElementById("wrong");
function playNegative() {
myMusic.play();
}
Why does it only use the second sound for both function, even when I click on right image and wrong image?

that is because you are using the same variable name for both audio elements:
fix it like this:
var myCorrectMusic= document.getElementById("correct");
function playPositive() {
myCorrectMusic.play();
}
var myWrongMusic= document.getElementById("wrong");
function playNegative() {
myWrongMusic.play();
}

Json if else remove or hide class and add class [duplicate]

I'm having trouble adding in jQuery's toggleClass function into the rest of my code. The page has several HTML5 audio tags on it which are controlled via jQuery. I attempted to add the toggle function to my jQuery audio control function, but it's not adding the class and subsequently the audio control doesn't work.. so I suppose it's some weird syntax error.
What do you guys recommend? Below is a jsFiddle and a my (unfortunately) weak attempt :)
http://jsfiddle.net/danielredwood/FTfSq/10/
HTML:
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="http://www.lucisz.com/imgs/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript:
var curPlaying;
$(function() {
$(".playback").click(function(e){
e.preventDefault();
var song = $(this).next('audio')[0];
song.toggleClass("playing");
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});
//the function below works, but doesn't have the add/remove class functions
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
song.play();
if (curPlaying) $("audio", "#" + curPlaying)[0].pause();
} else {
song.pause();
}
curPlaying = $(this).parent()[0].id;
});
});

$('thumbnail').toggleClass('pausing playing');
ToggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.

I would use .addClass() and .removeClass(), as it'll clean up your code quite a bit and allow you to use CSS to perform all that layout work:
$('thumbnail').toggle(function(){
$('.play', this).removeClass('pausing');
$('.play', this).addClass('playing');
}, function(){
$('.play', this).addClass('pausing');
$('.play', this).removeClass('playing');
});

How to make dogs bark with javascript

I am trying to make it so when you hover over a dog's photo, you can hear his bark. I figured out how to do it manually, but now I am trying to automate it in a loop so the code stays clean.
I am giving the image and sound corresponding ids so that I can create a loop that adds a number to the end of 'image' and 'sound'. That way I can say on #image1.mouseenter play #sound1, and on #image2.mouseenter play #sound2. If that makes sesne
here is the jsfiddle I created.
and here is the script i wrote:
var i;
for (i = 1; i<=3; i++){
var barking = $("#sound"+i)[0];
$("#image"+i).mouseenter(function(){
barking.play();});
$("#image"+i).mouseleave(function(){
barking.pause();});
}

A better way to do this would be to have data attributes on your tags, specifying what sound to play. Then, have a single simple handler.
In your HTML:
<div class="dogs">
<img src="dog.jpg" data-hover-sound="dog.mp3" />
</div>
Then, in your JavaScript:
$('.dogs').on('mouseenter', '[data-hover-sound]', function () {
var audio = new Audio($(this).attr('data-hover-sound'));
audio.play();
});
Untested, but something like that should work. Basically, you add a single handler on the container of .dogs, and filter for only tags that have a hover sound.
Alternatively, you could just use $('[data-hover-sound]'), but if you have a lot of these, this will create a lot of events to watch for. It's a tradeoff either way, because having an event handler on the parent element means that it's going to fire needlessly if there are a lot of other elements that don't have sounds.
Also, when you have this working, look into throttle and/or debounce.

You need a closure so the i variable have the correct value when passed to the event handler
Below is one way, and here is a few more: JavaScript closure inside loops
for (var i = 1; i <= 3; i++) {
(function(j) {
$("#image" + j).mouseenter(function() {
$("#sound" + j)[0].play();
});
$("#image" + j).mouseleave(function() {
$("#sound" + j)[0].pause();
});
})(i);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image1" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/DSC_0718.png" width="400px">
<img id="image2" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/lightening.jpg" width="400px">
<img id="image3" src="https://www.rocketdogrescue.org/wp-content/uploads/2013/09/pet-food-express.jpg" width="400px">
<audio id="sound1" preload="auto" loop="loop">
<source src="http://soundbible.com/mp3/Dogs Barking-SoundBible.com-625577590.mp3">
</audio>
<audio id="sound2" preload="auto" loop="loop">
<source src="http://soundbible.com/mp3/Dog Woof-SoundBible.com-457935112.mp3">
</audio>
<audio id="sound3" preload="auto" loop="loop">
<source src="http://soundbible.com/mp3/dog-howling-yapping-daniel_simon.mp3">
</audio>

Play video while hover to highlighted words

Im trying to create a function with video play while mouseover the highlighted words and pause when mouse leave. But currently i only know how to auto play while mouseover the video not the highlighted words.
Wish any could help me on this.
Thanks
<a href="https://www.google.com" target="_blank"><video width="250px" height="250px" controls preload onmouseover="this.play()" onmouseout="this.pause()" >
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" >
Not Supporting
</video></a>
<br/><br/>
<a href="#" >Play&Pause</a>

One way you can achieve this without jQuery (as you don't appear to be using it in your snippet) is to assign an id to the video then add onmouseover and onmouseout events to the a tag which targets the element with that id.
Add id="video" to the video tag
Add onmouseover="document.getElementById('video').play()" and onmouseout="document.getElementById('video').pause()" to the a tag containing the "Play&Pause" text
<a href="https://www.google.com" target="_blank">
<video width="250px" height="250px" controls preload onmouseover="this.play()" onmouseout="this.pause()" id="video">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
Not Supporting
</video>
</a>
<br/>
<br/>
Play&Pause
To tidy up your code you can centralise this functionality and remove the inline JavaScript.
Add class="trigger" to elements that will trigger the play and pause events
In JavaScript loop through the elements with the trigger class and attach the mouseover and mouseout events
var triggers = document.getElementsByClassName('trigger');
var video = document.getElementById("video");
for (var i = 0; i < triggers.length; i++) {
triggers[i].addEventListener("mouseover", function(event) {
video.play()
}, false);
triggers[i].addEventListener("mouseout", function(event) {
video.pause()
}, false);
}
<a href="https://www.google.com" target="_blank">
<video class="trigger" width="250px" height="250px" controls preload id="video">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
Not Supporting
</video>
</a>
<br/>
<br/>
<a class="trigger" href="#">Play&Pause</a>

By using jQuery alone, and targeting the elements rather than using inline scripting:
var $myVideo = $( "#myVideo" ),
$myBtn = $( "#play_btn" );
$myBtn.hover(function() {
$myVideo[0].play();
}, function() {
$myVideo[0].pause();
});
Example: jsfiddle
Hope it helps.

Very simple. Add a <span id="text"></span> around your highlighted Text
$( '#text' ).hover(
function() {
$( 'video' ).play();
}, function() {
$( 'video' ).pause();
}
);

Here it is ! https://jsfiddle.net/Alteyss/vsvzh3m2/
Using simple jQuery, simulating the mouse.
$("#btn").mouseover(function() {
$("video").mouseover();
});
$("#btn").mouseout(function() {
$("video").mouseout();
});
Hope I helped.