I have a really simple bit of javascript that starts audio playback on mouseover of an image, and stops audio playback on mouseout.
How can I change the second function so that it fades the sound out gradually, rather than stopping it abruptly?
I have looked at other similar questions but I'm unfortunately still stuck.
<img onmouseover="PlaySound('mySound')"
onmouseout="StopSound('mySound')"
src="tictactoe.png">
<audio id='mySound' src='audio.mp3'/>
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</script>
It works effectively as it is, but it would be nice to add the fade out element. I know it's about setting the volume to decrease over time but I'm unsure of the right way to do that.
did you try use setInterval() and decrement the thissound.volume to 0 and then pause() ?
also maybe an increase for the start of the sound would also be a nice thing to do
Related
I have an audio tag in my html, and which I have .wav inside it. With Javascript, I select audio tag and play the wav., which I trigger using a keyboard key. What I am trying to achieve is, for example, on press of each 'A' key, replay the .wav/play the sound from the beginning)
The playing of the audio works okay, and so does the pause too. However, I get a pop noise, while directly pausing the playing .wav.
var audio = document.getElementById(sound);
if (!isPlaying(audio)) {
audio.play(); // works
} else {
audio.pause(); // pops on this line; I checked with commenting below lines.
audio.currentTime = 0;
audio.play();
}
I found this answer, and as far as I understand, it's happening because I instantly set the volume to 0; but I couldn't figure it out for my case. I believe using a fader with setInterval is not a good approach
I also found audio.muted = true, and tried using it before pausing the volume (and used audio.muted = false just before playing the audio), but this also gives pop noise
Update:
I think I need to use fade out to work around this issue. Is there a way to fade out audio instantly?
Update:
I think I need to use fade out to work around this issue. Is there a
way to fade out audio instantly?
You can use .animate() to animate volume property from current value to 0
var audio = $("audio");
$("button").click(function() {
if (audio[0].volume > 0) {
audio.animate({volume:0});
// call `.pause()` here
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Micronesia_National_Anthem.ogg"></audio>
<button>fade out audio</button>
First off here is my javascript code:
$(function() {
stepFade('.fadable',700,1);
});
function stepFade(target, speed, opacity) {
var mysound = new Audio("./sounds/kick.mp3");
var $fade = $(target);
($fade).each( function( i ) {
$(this).delay(i*speed).fadeTo(speed, opacity);
mysound.play();
mysound.currentTime = 0;
});
}
My goal here is to play a sound in conjunction with the fade ins that are happening on the website with jquery. I'm having trouble looping the sound in a way so that they are in sync. I've tried resetting the currentTime and that doesn't seem to work for some reason.
Another method would be to use mysound.loop(); however this just plays the sound in a loop without any considerations in the timing of the sounds. Thus this becomes de-synchronized with the animations.
Anyone can first explain why setting the current time doesn't work and what possible solutions exists?
Thanks!
On a .js page in a Visual Studio express ASP.NET solution
why does
window.onload() {
document.getElementById('ambience').play();
}
work(and it does!), but why does
window.onload() {
document.getElementById('ambience').play();
document.getElementById('ambience').stop();
}
NOT stop the music? .pause(); doesn't pause the music either
I also tried:
It does play the music. And I have tried:
window.onload = function() {
var snd = document.getElementById('ambience').play();
var clickmeButton = document.getElementById('playJackpot');
clickmeButton.onclick = playSound;
}
function playSound() {
document.getElementById('ambience').stop();
}
what is the equivalent of .stop() or .pause() if those are not applicable? what set of commands
should I be working with in visual studio in order to get sound to play based on a conditional and then definitively shut off or stop after it has played once, and only once ? The background to this is that I have the play button in a timer control, so that it can operate other features, but each timer tick (and that needs to be set at a fraction of a second) kicks off the play again, so that the sound comes out staccato, because it is starting with every 'tick' of the timer. So, I need to play it, then immediately shut off the sound's ability to play, that is until somebody hits the play button again.
I need a sound on a mouse over event, I have this way but its problem comes from a delay between the mouse over and the sound playing, which is due (I supposed) the embed sound deal on the code. I would like to know if there is a better way using js/jquery). But not the new html5 audio tag which I don't want to implement in this particular case.
An ajax call loads the file, then I attached to the mouseOver a function named playSound()
function playSound()
{
$setSound = document.getElementById("soundWrapper").innerHTML="<embed id='sound' src='href' type=audio/mpeg hidden=false autostart=true volume=12>";
}
Then to the mouseOut event a function named stopSound()
function stopSound()
{
$stopSound = document.getElementById("soundWrapper").innerHTML="";
}
Nothing fancy but it does work. The problem as a said is the delay to playing the sound. Is there a way to play/stop the already embedded sound, not just embed a new one every time, or something alike?.
Thanks for your time and help.
Greetings.
If you have your AJAX load an audio tag (http://www.w3schools.com/tags/tag_audio.asp) into the desired place, you can play it using the .play() method in JS. Then it becomes really easy
$(YOURMOUSEOVERELEMENT).on('mouseover', function(){$('#sound').play()});
Then if you want to stop the audio when the mouse leaves:
$(YOURMOUSEOVERELEMENT).on('mouseout', function(){$('#sound').stop()});
I'm having trouble stoping a CSS animation on every iteration accurately.
I Have a CSS animation that i want to play when i call a function and play it backwards again when i call another. For that i'm setting an infinite animation in CSS/javascript like this:
function setup(container, element){
var elem = document.getElementById(container).getElementsByClassName(element)[0];
elem.style.webkitAnimationName=elemento+"_move";
elem.style.webkitAnimationDuration="350ms";
elem.style.webkitAnimationPlayState = "paused";
elem.style.webkitAnimationDirection="alternate";
elem.style.webkitAnimationIterationCount = "infinite";
elem.addEventListener("webkitAnimationIteration", pause, false);
}
Notice that i'm setting an eventListener in the last line so that the animation pauses at every iteration using the fallowing function:
function pause(event){
this.style.WebkitAnimationPlayState = "paused";
}
The function works fine when i play the animation forward, but when i use another function to set the 'WebkitAnimationPlayState' as 'running' and play is backwards it stops out of place. like one frame out of the place.
Here is the function i use to put it back in motion:
function run(container, element){
var elem = document.getElementById(container).getElementsByClassName(elemento)[0];
elem.style.WebkitAnimationPlayState = "running";
}
I don't know if it is one frame forward or backwards but avery time a try it the distance is different. I believe that the function pauses the animation a little before the real end of the iteration (Apple Documentations says it would be at the end).
Here is what i've done so far.
DEMO
You can notice that the right border of the frame don't come back to where is was before the animation.
Anyone have a clue?
Thanks