I have an audio on my website and I have a button to play/pause it. Everything is working fine at the moment but I just find the play and pause too abrupt. I would like to fade in and out the audio whenever play/pause button is pressed. How would I be able to do this?
Any help is appreciated, thanks in advance!
Please see my codepen here:https://codepen.io/cocotx/pen/rNLjbPK?editors=1010
<audio id="audio" loop>
<source src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/mpeg">
</audio>
<button id="play-pause">play/pause</button>
const song = document.querySelector("#audio");
let pPause = document.querySelector('#play-pause');
let playing = true;
function playPause() {
if (playing) {
const song = document.querySelector('#audio');
song.play();
playing = false;
} else {
song.pause();
playing = true;
}
}
$('#play-pause').click(function() {
playPause();
});
I ended up using jQuery to animate the audio volume and this worked really well for me:
let playing = true;
function playPause() {
if (playing) {
const song = document.querySelector('#audio');
//relevant part to fading in audio
song.volume = 0;
$('#audio').animate({volume: 1.0}, 1000);
song.play();
playing = false;
} else {
//relevant part to fading out audio
song.volume = 1;
$('#audio').animate({volume: 0}, 1000, function() {
song.pause();
});
playing = true;
}
}
I find this suits my need the most but still appreciates anyone who's tried to help!
If you have a variable set for audiolength and currenttime, and setfade to the length of the fade in and out you want, you could accomplish this quick and easy.
Moreoreless, the function would look like this. You're going to need to call this function when the page first loads, but it'll keep itself running.
volc = 1 / fade
function Fade() {
if (currenttime + fade >= audiolength) {
song.volume = song.volume - volc;
}
if (currenttime <= fade) {
song.volume = song.volume + volc
}
setTimeout(Fade, 50)
}
If you have any more questions, I'm happy to help!
You can simply achieve those fade in and fade out effect using CSS.
const song = document.querySelector("#audio");
let pPause = document.querySelector('#play-pause');
let playing = true;
function playPause() {
if (playing) {
const song = document.querySelector('#audio');
song.play();
playing = false;
} else {
song.pause();
playing = true;
}
}
$('#play-pause').click(function() {
playPause();
});
#play-pause {
opacity: 0.4;
transition: opacity 0.5s ease-out;
}
#play-pause:hover {
opacity: 1;
transition: opacity 0.5s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio" loop>
<source src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/mpeg">
</audio>
<button id="play-pause">play/pause</button>
I just use hover with transition property. If you want total fade out, you can change the opacity to 0, and of course, you can change the transition as you want. Hope this will help. Have a great day.
This has worked for me without needing jQuery and is very configurable. It also has a delay before the fade-in starts
function fadeIn(audioElement, maxVol, startDelay, fadeInTime, steps) {
let i = 0;
let interval = fadeInTime / steps;
setTimeout(function () {
let intervalId = setInterval(function() {
let volume = (maxVol / steps) * i;
audioElement.volume = volume;
if(++i >= steps)
clearInterval(intervalId);
}, interval);
}, startDelay);
}
Related
I need to Loop the video from 50 to 60 seconds, then on click should loop normally from 0 to the end.
I have a functionality fully working from 0 to 10 seconds but I need it to work from 50 to 60.
Any API help please, I tried loadedmetadata but didn't work.
Would be nice to understand what I'm missing in here
Like this works, but Not if I put 50 to 60
if (this.currentTime >= 10) {
this.currentTime = 0; // change time index here
}
var video = document.getElementById('videoElm');
const playShort = function() {
if (this.currentTime >= 60) {
this.currentTime = 50; // change time index here
}
};
const playFull = function() {
if (this.currentTime >= 24) {
this.currentTime = 0; // change time index here
}
};
function playShortVideo() {
video.removeEventListener("timeupdate", playFull, false)
video.addEventListener("timeupdate", playShort, false);
video.addEventListener("loadedmetadata", playShort, false);
video.load();
video.play();
}
function playFullVideo() {
video.removeEventListener("timeupdate", playShort, false)
video.addEventListener("timeupdate", playFull, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>
I want to be able to play a video when I click a button, then have a different video fade in while fading out the current video when clicking another button. This needs to be a dynamic transition with the user clicking randomly (ie, from 1 to 3 or vice versa). Here's my current code without any fading:
JS:
<script>
video = document.getElementById('video');
source = document.getElementById('source');
window.PlayVideo = function(srcVideo){
video.pause();
source.setAttribute('src', srcVideo);
video.load();
video.play();
}
</script>
HTML:
<a onclick="PlayVideo('fire.webm');"><button>Play Video 1</button></a>
<a onclick="PlayVideo('smoke.webm');"><button>Play Video 2</button></a>
<a onclick="PlayVideo('merged-rain.webm');"><button>Play Video 3</button></a>
<div id="xxxxxx">
<div>
<video id="video" width="520" height="360" loop muted controls><source id = "source"/></video>
</div>
</div>
Example link: http://nov-exl.dx.am/movie%20change.html
Any help would be appreciated, thanks.
How about something like this:
var video = document.getElementById('video');
var source = document.getElementById('source');
var timer = void 0;
window.PlayVideo = async function(srcVideo){
source.setAttribute('src', srcVideo);
fade('out');
try {
await video.pause();
await video.load();
await video.play();
fade('in');
} catch(err) {
console.log("Promise rejected");
}
}
function fade(opts){
if(typeof opacityTimer !== 'undefined') clearInterval(opacityTimer);
var opacity = opts === 'in' ? 0 : 1;
opacityTimer = setInterval(function() {
if ((opts === 'in' && opacity >= 1) ||(opts=== 'out' && opacity <=0) ){
clearInterval(timer);
}
opacity = opts === 'in' ? opacity+(opacity * 0.1 || 0.1) : opacity-(opacity * 0.1 || 0.1);
video.style.opacity = opacity;
video.style.filter = 'alpha(opacity=' + opacity * 100 + ")";
}, 25);
}
I'm trying to create a HTML file with some javascript embedded that allows me to press a button and begin to fade out of a song. I've managed to get it working so that it play the song (which is a start). but i've been playing around with a second function to try and get it to reduce the volume and setting a delay on that function can anyone help please ?!
<audio id="myAudio"
<source src="1.mp3"
type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
<script>
var vol = myAudio.volume;
var timer;
function aud_play() {
var myAudio = document.getElementById("myAudio");
myAudio.play();
}
function aud_fade(){
var myAudio = document.getElementById("myAudio");
if (vol > 0) {
vol = vol - 0.2 ;
}
timer = setTimeout(aud_fade,2);
}
</script>
try this:
function aud_fade() {
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0) {
myAudio.volume -= .2;
timer = setTimeout(aud_fade, 200);
}
}
A couple things seem to need addressing ;)
First off, in the example you provided, you have not closed the audio tag.
Second, you are only setting a global vol var and not the volume of the audio object itself.
What you could try is keeping things scoped to the function and use the actual audio object volume rather than a 'global' vol var:
<script>
function aud_play() {
var myAudio = document.getElementById("myAudio");
myAudio.play();
}
function aud_fade(){
var timer,
myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0) {
myAudio.volume -= 0.005;
timer = setTimeout(aud_fade,5);
}
}
</script>
<audio id="myAudio">
<source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
I have also adjusted the timeout and the volume amount to decrease, as volume is from 0 to 1. Reducing by 0.2 (20 percent) every 2 thousands of a second would 'fade out' in 0.1 of a second!
Here is the above in a Fiddle.
You may want to consider resetting the audio currentTime and volume when the fade completes or when you click play again (Note: There is no stop method, so pause and currentTime can achieve the same thing):
<script>
var fadeTimer = false;
var aud_play = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
myAudio.volume = 1;
myAudio.currentTime = 0;
myAudio.play();
}
var aud_fade = function() {
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0.005) {
myAudio.volume -= 0.005;
fadeTimer = setTimeout(aud_fade,5);
} else {
myAudio.volume = 0;
myAudio.pause();
myAudio.currentTime = 0;
}
}
</script>
<audio id="myAudio">
<source src="1.mp3" type='audio/mp4'>
</audio>
<button type="button" onclick="aud_play()">Play</button>
<button type="button" onclick="aud_fade()">Fade</button>
Here is the above example in another Fiddle.
Hope this helps!
EDIT:
Regarding Fade In, you could replicate the 'aud_fade' method but increase volume when less than 1 rather than decrease when greater than 0, than call the fade in method on the start method:
var aud_play = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
myAudio.volume = 0; // 0 not 1, so we can fade in
myAudio.currentTime = 0; // set mp3 play positon to the begining
myAudio.play(); // start mp3
aud_fade_in(); // call fade in method
};
var aud_fade_in = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
if (myAudio.volume < 9.995) {
myAudio.volume += 0.005;
fadeTimer = setTimeout(aud_fade_in,10);
} else {
myAudio.volume = 1;
}
};
var aud_fade_out = function() {
clearTimeout(fadeTimer);
var myAudio = document.getElementById("myAudio");
if (myAudio.volume > 0.005) {
myAudio.volume -= 0.005;
fadeTimer = setTimeout(aud_fade_out,5);
} else {
myAudio.volume = 0;
myAudio.pause();
myAudio.currentTime = 0;
}
};
Here is the above in a Fiddle.
I'm trying to have my HTML5 video element fade in when it loads, (I'm currently having it appear using Javascript canplaythrough as you can see in the code you see below, but it's a little harsh.) How can I get the HTML5 video element to fade in gently? I'm OK with JavaScript or jquery, but I don't know either one very well, so some complete code would be very helpful!
Here's the code: (if you run the code with the Run Code Snippet, it doesn't work well, so I highly suggest to go to my website, it's on is my video page here and works if you wait a 30 seconds/minute (until the video loads): jeffarries.com/videos.
<script>
var e = document.getElementById("myVideo");
e.style.display = 'none'
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
var e = document.getElementById("myVideo");
e.style.display = 'block'
};
</script>
<video style="display: block;" id="myVideo" width="320" height="176" controls>
<source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Thanks for you time and effort!
Here's how to fade in the video with javascript
var e = document.getElementById("myVideo");
e.style.opacity = 0;
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
setTimeout(function() {
var e = document.getElementById('myVideo');
fade(e);
}, 5000);
};
function fade(element) {
var op = 0;
var timer = setInterval(function() {
if (op >= 1) clearInterval(timer);
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1 || 0.1;
}, 50);
}
FIDDLE
I am having video clip which is due to play in Timer when Timer gets tick after few minutes.
What I want is whenever the video starts playing it should automatically go into FullScreen mode and when it stops it, however comes back to position because as soon as Video stops I have Timer Ticked.
I know this requestFullScreen() method but I don't know how to call it when video starts playing?
Any Help will be appreciated!!
Regards and Thanks!
var video = document.createElement('video');
video.src = 'urlToVideo.ogg';
video.style.width = window.innerWidth;
video.style.height = window.innerHeight;
video.autoPlay = true;
document.getElementById('video2').appendChild(video);
Are you looking for something like this?
video = document.getElementById('video');
function onTick(){
video.play();
}
video.onPlay = function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
};
video.onended = function(e) {
if(video.exitFullscreen) {
video.exitFullscreen();
} else if(video.mozCancelFullScreen) {
video.mozCancelFullScreen();
} else if(video.webkitExitFullscreen) {
video.webkitExitFullscreen();
}
};
Do something like this :
<script>
window.onload = function(){
var el = document.getElementById("OnTick");
el.addEventListener("click", function(){
el.style.display = 'none';
var videoContener = document.getElementById('video2');
var video = document.createElement('video');
videoContener.style.width = window.innerWidth;
videoContener.style.height = window.innerHeight;
video.src = 'http://techslides.com/demos/sample-videos/small.ogv';
video.style.width = "100%";
video.autoPlay = true;
video.controls = true;
videoContener.appendChild(video);
}, false);
}
</script>
<body style='margin:0px'>
<div id='video2' style='overflow: hidden;'></div>
<span id='OnTick' style='width:20px;height:20px;background-color:#323232;display:block'> </span>
</body>
autoplay doesn't work