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

How to change video tag's forwarding time

I have video tag on my website and when i click right arrow, it forwards with about 1 minute and i want to reduce this time to 10 seconds.
<video src="SOURCE" controls="true" id="video" style="height: 477px; width: 980px"></video>

You can attach an eventlistener directly to the video instead of the site.
var video = document.getElementById("video");
var timer = 10;
video.addEventListener('keydown', (e) => {
event.preventDefault();
switch (event.keyCode) {
case 37:
var currentTime = video.currentTime;
video.currentTime = currentTime - timer;
break;
case 39:
var currentTime = video.currentTime;
video.currentTime = currentTime + timer;
break;
}
});
<video controls="true" id="video" style="height: 477px; width: 480px">
<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

you can attach an event handler on this arrow key and then change the currentTime property. But prevent the default behaviour before.
const $video = document.querySelector('video');
const handleKeyDown = (event) => {
e.preventDefault();
if (e.keyCode === 39) {
const seconds = $video.currentTime;
$video.currentTime = seconds + 10;
}
}
$video.addEventListener('keydown', handleKeyDown);
<video width="320" height="200">
<source src="your/file.mp4" type="video/mp4">
</video>
<p>Hello</p>

This may help you.
https://www.codespeedy.com/forward-and-backward-html5-video-player-javascript/
You can use event.preventDefault() to prevent default forwarding and set manual forward by adding currentTime + 10 seconds.

Stop audio after 60 seconds without loop - Javascript

so I have a audio of 10 seconds but I want to stop the option replay after 60 seconds inside the page and I don't want the audio to loop. But the audio keeps looping to 5.
var iterations = 1;
document.getElementById('iteration').innerText = iterations;
if (iterations < 5) {
this.currentTime = 0;
this.play();
iterations ++;
document.getElementById('iteration').innerText = iterations;
}
}, false);

You could try setTimeout() for stopping the audio after a certain amount of seconds. Here is an example that starts playing an audio file and stops it after 6 seconds.
document.getElementById('audioSample').play();
setTimeout(function() {
document.getElementById('audioSample').pause();
}, 6 * 1000); // Stops the audio player after 6 seconds
<audio controls id="audioSample">
<source src="http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
let countdown = 6;
document.getElementById("audioSample").play();
let interval = setInterval(function() {
countdown -= 1;
document.getElementById("count").innerHTML = countdown;
if (countdown <= 0) {
document.getElementById("audioSample").pause();
clearInterval(interval);
}
}, 1000);
<audio controls id="audioSample">
<source src="http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div>Time left:</div>
<div id="count"></div>

Fade out of a Mp3 song using javascript

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.

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