I have a page that has some animal images and when you click on them it plays the sound of the animal, but since its a kid's game I have a background music, but the sound is too loud. I want when the background music plays automatically, the volume changes to 0.5. How can I set a function that does that? I don't want a function based on click, I want it hidden and change the volume automatically.
The function (it's not working)
myAudio = document.getElementById("audio1");
function setHalfVolume() {
myAudio.volume = 0.4;
}
HTML
<audio id= "audio1" controls="controls" onload="setHalfVolume()">
<source src="Audio\Jaunty Gumption.mp3" type="audio/mp3">
</audio>
The event you need is called onloadeddata.
Also unless you need access to the myAudio variable from other functions or globally I would suggest moving it into the setHalfVolume function. Give this a try.
Change your HTML to:
<audio id= "audio1" controls="controls" onloadeddata="setHalfVolume()">
<source src="Audio\Jaunty Gumption.mp3" type="audio/mp3">
</audio>
Change your JavaScript to:
function setHalfVolume() {
var myAudio = document.getElementById("audio1");
myAudio.volume = 0.5; //Changed this to 0.5 or 50% volume since the function is called Set Half Volume ;)
}
Try adding an event for play on all of the audio elements of interest and calling setHalfVolume in there:
document.querySelector('#audio1').addEventListener('play', setHalfVolume);
You'll also probably want to reset the volume back to normal after
document.querySelector('#audio1').addEventListener('pause', resetVolume);
Where resetVolume and setHalfVolume are declared sort of like:
function setHalfVolume() {
document.getElementById("audio1").volume /= 2;
}
function resetVolume() {
document.getElementById("audio1").volume *= 2;
}
Related
I have a <div onclick="startSound"> in HTML. When clicked, it triggers a sound. How can I make it stop the first sound and play another one when clicked again? Most solutions I found use the <audio> HTML tag, but since there is none, how to do it?
function startSound() {
var musicPlay=new Audio('sound.mp3');
musicPlay.play();
}
You should have a single audio element, every time you click on a certain element, instead of creating a new Audio component, change the src property of the existing Audio component.
To stop the existing Audio that is in playing state, sound.pause();sound.currentTime = 0; would help.
let myAudio = document.getElementById('myAudio');
function startSound() {
myAudio.pause();
myAudio.currentTime = 0;
myAudio.src = 'sound.mp3';
}
<audio controls id="myAudio">
<source src="anotherSound.mp3" type="audio/mpeg">
</audio>
What I'm trying to do is simply to pick an audio file at random and play it. I'm trying to use the built-in .play() function.
I have four audio clips defined, sound0 - sound3, for example:
<audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
In JS I can store a pointer to that object like so:
$sound0 = $("#sound0")[0];
and I can play it directly with
$sound0.play();
However, if I try to do something like the following,
var pattern = [],
tone;
pattern.push(Math.floor(Math.random() * 4));
tone = "#sound" + pattern[0];
$(tone).play();
I get the error, Uncaught TypeError: $(...).play is not a function.
What is the best way to approach this? Thank you!
Unfortunately, I believe the .play() method is part of the DOM and not a jQuery function. You can accomplish it in couple of ways:
$(tone)[0].play(); -- as answered by jremi. The only caveat is that you must use index of zero. I don't this will work: $(tone)[1].play();
$(tone).get(0).play();
$(tone).trigger("play")
Try it here:
$( document ).ready(function() {
function playSound(){
var pattern = [],
tone;
pattern.push(Math.floor(Math.random() * 4));
tone = "#sound" + pattern[0];
//$(tone).trigger('play'); //uncomment to play
//$(tone).get(0).play(); //uncomment to play
$(tone)[0].play(); //comment to turn off
}
$("#button").click(playSound);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="sound1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="sound2" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="sound3" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<button id="button">Click To Play</button>
More info can be found here: Play/pause HTML 5 video using JQuery
I'm a bit late to the party but i've just tried this method now and it works fine for me, though it could get a little complicated if you have a lot of clips. I'm also not sure about browser compatability.
var c = document.getElementById('playSound');
c.onclick = function() {
var number = Math.floor(Math.random() * 2);
if (number == 0) {
var audio = new Audio("beep.mp3");
} else if (number = 1) {
var audio = new Audio("bloop.mp3");
}
audio.play();
}
Basically, it just generates a random number each time the button is clicked and each number has an audio clip attached to it. Then the clip is played that corresponds to that number. You can increase the amount of clips by increasing the number on line 3 and adding a new else if statement.
I have two video files in my design. The first one is logo reveal animation and the second one is logo animation. I want to load the first video only when the page loads every time. And i want to load the second video after the first video ends.
Here my target is: 1st video plays when the page loads(only one time - every page load). If the first video ends, the second video will plays in the loop. I don't want to show the logo reveal(1st) again and again. How to do this. Hope i'll be getting the solution.
Here are the code i have.
HTML :
<video width="400" controls id="myVideo" autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
JS
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$("#myVideo")[0].load();
}
Demo : https://jsfiddle.net/jLa1s62w/
You almost got it.
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler(e) {
alert();
var videoFile = 'https://static.videezy.com/system/resources/previews/000/002/165/original/Black-cat-in-green-grass.mp4';
$(' #myVideo source').attr('src', videoFile);
$('#myVideo').attr("loop", true); /* 1 */
$("#myVideo")[0].load();
document.getElementById('myVideo').removeEventListener('ended', myHandler, false) /* 2 */
}
1) Loop attribute so the second video loops.
2) Remove event listener so the video isn't replaced again.
https://jsfiddle.net/yuriy636/jLa1s62w/1/
Note: If you are using jQuery, you can also use jQuery's event method:
$('#myVideo').on('ended',myHandler) and $('#myVideo').off('ended',myHandler)
Thanks in advance for any help you're able to give. The issue I'm having is that the following code is in a javascript function when a button is clicked. The desired behavior is that on button click, a video fades in, plays for 10 seconds, and fades back out. Then when the button is clicked again, this behavior repeats.
Issue is, the second time the button is clicked, the video fades in but is already at the end of the video and then fades out after 10 seconds. Any idea why the vid.currentTime is not properly resetting the video?
var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();
vid.fadeToggle(1000);
setTimeout(function() {
vid.fadeToggle(1000);
}, 10000);
and this is where the video file is imported
<video id="video" width="100%" Style="Display:none">
<source id="src" src="src.webm" type="video/webm" />
</video>
Additional info has come to light. This only happens in Chrome, and doesn't happen even in Chrome when it's opened locally, only when the html page is served statically via express.
Try
vid.load(); instead of vid.currentTime = 0;
Maybe you can try to add autplay to the video attribute, but I think the video will start looping.
<video id="video" width="100%" Style="Display:none" autoplay>
OR you can add this function or javascript line to your button function.
vid.load();
source: http://www.w3schools.com/tags/av_met_load.asp
Figured out that this was only an issue in chrome and seems to have to do with this question:
can't seek html5 video or audio in chrome
I have to play a music file on HTML page which is running on android, also need to control the volume by javascript function. Can someone give me any idea?
If you are using the HTML5 <audio> element, you can control the volume using the .volume. attribute. Set it to 1.0 for max volume, and 0.0 to mute it.
For example, this script will begin playing a file, then reduce its volume to 25% after a few seconds.
<audio src="http://goo.gl/89jWZ" id="example"></audio>
<script>
var audioElement = document.getElementById("example");
audioElement.play();
setTimeout(function() {
audioElement.volume = 0.25;
}, 3000);
</script>