We Keep Coding

How to fade in and out of audio?

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);
}

html5 Video should start from a certain time and loop

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>

How to make HTML5 video fade in when it has finished loading?

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

html5 video: play/pause custom button issue

I am using an HTML5 Video on my website, with certain other codes that basically makes usability more customized.
The video is intended to play when in view and pause when not in view. Additionally it also has a play and pause button that comes into view when the mouse hovers on the video.
At the end of the video it turns into an image because by default the html5 video would just turn to blank.
The problem is that the image turns up in the end, but the play/pause continue to appear on hover and function as play pause but only audio. You cannot see the video.
I originally wanted it to just show the picture. But would prefer to have the play pause turn into a restart button if the video ends.
I tried looking for something that would fit my existing setup, but I am not sure how to make it happen and which of these codes would I play with.
Here is a link for the site
http://minhasdistillery.com/blumersmoonshine/
<section id="feature">
<div id="trail">
<div id="videocontrol">
<a id="play-pause" class="play"><img src="images/pause.png"/></a>
</div>
<video id="video_background" preload="auto" volume="5"><!--or turn on loop="loop"-->
<source src="videos/video.webm" type="video/webm">
<source src="videos/video.mp4" type="video/mp4">
<source src="videos/video.ogv" type="video/ogg ogv">
</video>
<img id="image_background" src="images/blumer.jpg" width="100%" height="100%" />
</div><!--trail-->
</section><!--feature-->
Javascript that brings up play/pause button
<script>
window.onload = function() {
var video = document.getElementById("video_background");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function() {
if (video.paused == true) {
video.play();
playButton.innerHTML = "<img src='images/pause.png'/>";
} else {
video.pause();
playButton.innerHTML = "<img src='images/play.png'/>";
}
});
}
</script>
The code sets the video to play on when visible and pause otherwise
<script>
//play when video is visible
var videos = document.getElementsByTagName("video"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.offsetWidth,
h = video.offsetHeight,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + w;
b = y + h;
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
}
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
</script>
This one adds the photo in the end.
<script>
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
</script>
A JSBin of the same issue is here
JSBin For Issue
as you will see at the end of the video it will continue to show pause and play and will only play audio.
How do I get it to read that the video ended and switch the button to "replay"

Initially video display style is block and image display style is none.
Video ended event handler sets video display to none and image display to inline.
You can check video display style in button click event handler and toggle it:
playButton.addEventListener(
'click',
function(event) {
if (video.style.display === 'none') {
image.style.display = 'none';
video.style.display = 'block';
}
...
},
false
);
As an alternative add boolean flag which is intially set to false, on video ended event set it to true:
var needReplay = false;
video.addEventListener(
'ended',
function() {
...
needReplay = true;
},
false
);
playButton.addEventListener(
'click',
function(event) {
if (needReplay) {
image.style.display = 'none';
video.style.display = 'block';
needReplay = false;
}
...
},
false
);
Demo

Pausing video if currentTime >= 2

I'd like to pause a video when currentTime is >=2 but I have a problem.
When you click on white div, video changes and I want that video to pause at 2 sec. But as you can see on the fiddle, first video pauses at 2 seconds too and I don't want that. I want my eventhandler function to work only with the second video not the first one.
HTML
<video src="videos/loop.webm" id="video" width="100%" autoplay>
</video>
JS
//This code tracks currentTime
$("#video").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime);
});
});
function onTrackedVideoFrame(currentTime){
$("#current").text(currentTime);
}
video.addEventListener("timeupdate", function() {
if (this.currentTime >= 2.000 && this.currentTime <= 8.000) {
this.pause();
}
}, false);
//This code tracks currentTime
//this code changes video source
var videoSource = new Array();
videoSource[0]='videos/loop.webm';
videoSource[1]='videos/fullcut.webm';
var videoCount = videoSource.length;
function videoPlay(videoNum)
{
var video = document.getElementById('video');
video.setAttribute("src",videoSource[videoNum]);
video.load();
video.play();
}
//this code changes video source
Here's the fiddle : http://jsfiddle.net/fKfgp/22/
Thanks for reading!

One way would be to set the timeupdate listener to after you set the new source.
$("#video").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime);
});
function onTrackedVideoFrame(currentTime){
$("#current").text(currentTime);
}
var videoSource = new Array();
videoSource[0]='http://www.w3schools.com/html/mov_bbb.mp4';
videoSource[1]='http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4';
var videoCount = videoSource.length;
function videoPlay(videoNum)
{
var video = document.getElementById('video');
video.setAttribute("src",videoSource[videoNum]);
video.load();
video.play();
video.addEventListener("timeupdate", function() {
if (this.currentTime >= 2.000 && this.currentTime <= 8.000){
this.pause();
}
}, false);
}