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>
Related
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();
}
Im trying to make a music player where, when the user click on the button, the overlayed image, will change the image to stop.png and play the song. When the user click it again it will change the image to play.png and stop playing song.
<audio id="myAudio">
<source src="http://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/jsref/hors.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
function plaYer() {
var image = document.getElementById('myImage');
var x = document.getElementById("myAudio");
if (image.src.match("play")) {
image.src = "stop.png";
x.play();
} else {
image.src = "play.png";
x.pause();
}
}
</script>
<button id="song"
style="color: white; background-image: url('cover100.jpg'); border: none; outline: none; display:block;
width:100px;
height:100px;">
<img id="myImage" onclick="plaYer()" src="play.png" width="100" height="100">
</button>
My problem is, when I try to create 2 music player the other music player doesnt work. Can someone help me ?
IDs have to be unique. If you want to reuse your function, you cannot hardcode the IDs in it. Since you use inline event handlers, you already have access to the image element. Pass that information, plus the ID of the corresponding <audio> element to your function:
function plaYer(image, audioID) {
var x = document.getElementById(audioID);
// rest of your code ...
}
// HTML
<img id="myImage" onclick="plaYer(this, 'myAudio')" ... />
I recommend to read the excellent articles on quirksmode.org to learn more about event handling.
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.
How can i play audio on my web (even for mobile) by Java script but just put Js code one times in .tpl file. I use NukeViet CMS, if i use the code below for each audio my web will hardly load.
var audioTagged = document.getElementById('audioID');
audioTagged.src = 'http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3';
audioTagged.load();
<p onclick="triggerAudio()"><img src="http://caicay.vn/uploads/news/loa.gif" /></p>
I want to put js code one times in header tag and for each audio i just insert code like this <span class="uba_audioButton" media-url="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3"></span> in editor.
I want to play audio code like http://www.tienganh123.com/tieng-anh-pho-thong-lop-8-bai-1/2604-vocabulary.html , the image hasn't to change when clicking on the bottom, just simply click-play then click-pause.
Use Audio class of JavaScript.
Check out this fiddle.
Here is the snippet.
function triggerAudio() {
var file = new Audio('http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/straight.mp3');
file.play();
}
<p onclick="triggerAudio()">
<img src="http://caicay.vn/uploads/news/loa.gif" />
</p>
According to the requirement mentioned in the comments by the OP, this might solve the problem.
Check out this updated fiddle.
Here is the snippet.
function triggerAudio(abc) {
var playid = abc.id.substring(4);
document.getElementById("audio" + playid).play();
}
audio {
display: none;
}
<p id="play1" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />AFFECT</p>
<p id="play2" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />ANNOY</p>
<p id="play3" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BALD</p>
<p id="play4" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />BLOND</p>
<p id="play5" onclick="triggerAudio(this)">
<img src="http://caicay.vn/uploads/news/loa.gif" />CHARACTER</p>
<audio id="audio1">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/affect.mp3" type="audio/mp3" />
</audio>
<audio id="audio2">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/annoy.mp3" type="audio/mp3" />
</audio>
<audio id="audio3">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/bald.mp3" type="audio/mp3" />
</audio>
<audio id="audio4">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/blond.mp3" type="audio/mp3" />
</audio>
<audio id="audio5">
<source src="http://tienganhphothong.tienganh123.com/file/phothong/lop8/bai1/vocabulary/character.mp3" type="audio/mp3" />
</audio>
This solution contains very little Javascript which you don't need to write separately for every audio you want to play.
Add as much <audio> you need in the HTML part and this will still work for you.
If the CMS you are using do not allow onclick trigger, then you can register event listeners using javascript.
var elements = document.getElementsByTagName("p");
for(i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
triggerAudio(this);
});
}
Here is the fiddle with event listeners registered using javascript.
I am trying to create a toggle switch for the audio that replaces the icon dependent on the state. Here is my code (that is not working):
<div id="bgAudioControls">
<a href="#" onclick="muteSound()">
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>
<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<script language="javascript">
function muteSound() {
if (document.getElementById("mute").src == "img/sound-off.svg")
{
document.getElementById("unmute").src = "img/sound-on.svg";
document.getElementById('bgAudio').muted = true;
}
else
{
document.getElementById("mute").src = "img/sound-off.svg";
document.getElementById('bgAudio').muted = false;
}
}
</script>
I am positive I am overlooking something SUPER simple.. Any help appreciated.
A live view of the whole code in action can be seen at http://arc.adamroper.com
The below code works - albeit as two buttons, not a toggle.
Mute
Unmute
UPDATE : working FIDDLE
What says #Stasik is :
You have to remove id="mute" from the <a> tag and put it in the <img> tag
Like this:
<img id="mute" src="img/sound-off.svg" />
UPDATE
to play/pause try this found here
COMPLETE CODE
HTML
<div id="bgAudioControls">
<a href="#" >
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>
<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
JAVASCRIPT
$(function() {
$("#mute").click(function(e) {
e.preventDefault();
var song = $('audio')[0]
if (song.paused){
song.play();
document.getElementById("mute").src = "img/sound-on.svg";
}else{
song.pause();
document.getElementById("mute").src = "img/sound-off.svg";
}
});
});
Accessing ".src" of the mute element is not correct, since src is the attribute of the child of the mute element. Assign id="mute" to the element directly for a quick fix.