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!
Related
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
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>
I'm working on something where the user hovers over a video to trigger it playing. When they hover over a different video, this new video starts playing and stops the others.
I'm using Vimeo and their Froogaloop library ( not too relevant here, could also be video tags, mainly concerned with the caching of the selectors ).
This code works fine, but I know it's not as optimised as it should be, it uses multiple selectors each time the hover function is called which I don't want to do. Can I improve this code so that it doesn't do this? Or is it Ok to keep calling the jQuery selectors like this in modern browsers now?
Here is a simplified working demo
function hoverVid() {
var frame = $(this).find('iframe');
var player = $f(frame[0]);
player.api('play');
var vids = $('.vid-row iframe').not(frame);
vids.each(function(index) {
var frame = $(this);
var player = $f(frame[0]);
player.api('pause');
});
}
$('.vid-row').hover(hoverVid);
Cheers :]
I improved it a bit - As per #GerardCuadras comment, removed the need for using the .not() filter by simply pausing all the videos, then playing the desired one.
This allowed me to cache the list of iframes. I also optimised the selector to use an #id and .find().
JSBin
var vidz = $('#vidz').find('iframe');
function hoverVid(e){
vidz.each(function( index ){
var frame = $(this);
var player = $f(frame[0]);
player.api('pause');
});
var frame = $(this).find('iframe');
var player = $f(frame[0]);
player.api('play');
}
$('.vid-row').hover(hoverVid);
I'm trying to use this slider: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/ but want to play a different audio file, each time the slide loads.
The way I imagine it working, is for the user to click play on the first slide, the audio to finish playing, then for the slide to change and it automatically plays the next audio file and so it continues until all slides are played through.
I've gotten it to the point where the slider changes when the audio has stopped, but cannot figure out how to play the next audio file, one after the other.
I'm very new to jQuery and am struggling a lot. Any help would really be appreciated!
Here is my work in progress: http://dailycrow.me/actualsite/
Thank you.
What I would do is to handle the audio playing with an scripting language such as PHP and call the needed method with parameters with Javascript or JQuery.
You can embed HTML with PHP so the audio can be played. Something like this:
$audioFile = "wishedAudioFile.mp3";
echo '<embed src="'.$audioFile.'" hudden="true" autostart="true"></embed>';
you can maintain an array of sources, where each index refers to a slide index, and from looking at this doc, you can use the onAfterChange event, code would be something like:
var audio = new Audio(), audSrcList = [
'slide1.wav',
'slide2.wav',
'slide3.wav',
'slide4.wav'
...
];
function afterSlideChange(slide, index){
audio.src = audSrcList[index];
audio.play();
};
...
$.Slitslider.defaults = {
...
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : afterSlideChange //CHANGED here
};
I have two audio elements that play through a button's click event. I've successfully managed to pause one if another is selected but also need to set the paused element back to 0.0 seconds (i.e pause and reset).
I'm aware that Javascript currently doesn't have a stop() method which led assume that this would be done by setting its currentTime to 0. If so I just haven't been able to figure out the best way to incorporate this method in my code.
Right now I'm pausing all audio elements in the latter half of the conditional using $(".audio").trigger("pause"); which doesn't too efficient performance wise. What would be the best way to pause and reset only the previously played audio file and not every one on the page?
http://jsfiddle.net/txrcxfpy/
use below code . check DEMO
$(function() {
$('.track-button').click(function() {
var reSet = $('.track-button').not($(this)).siblings(".audio").get(0);
reSet.pause();
reSet.currentTime = 0;
var $this = $(this),
trackNum = $this.text(),
currentAudio = $this.siblings(".audio"),
audioIsPaused = currentAudio.get(0).paused;
if (audioIsPaused) {
currentAudio.get(0).play();
} else {
currentAudio.get(0).pause();
}
});
});