We Keep Coding

Progress bar for multiple audio player

I am working on creating a player in a page. In the page there will be multiple players. So progress bar needs to be shown for the current player that is being played. But the issue is when i play the player the progress bar is rendered in some other place because of multiple id's of the progress bar div. How can i target the progress div of the current player that is being played.
I am using javascript to render the progress bar.
Below is the HTML code: There will be multiple html blocks like below in different tabs of the page.
<div class="prabhata-play audio-playlist ">
<div class="d-flex justify-content-between">
<ul class="d-flex list-inline">
<li>
<button class="togglePlay" onclick="togglePlay('1445')" id="toogle1445">
<img src="./play-round.svg" alt="play" class="play-img" id="playImage">
</button>
</li>
<li>
<p class="title">Contentment in professional life</p>
<p class="auth-title">Swami Bhoomananda Tirtha</p>
</li>
</ul>
<div class="d-inline text-end">
<ul class="list-inline d-flex icons-sec">
<li><img src="./video-list.svg" alt="video-list"></li>
<li><img src="./heart.svg" alt="heart"></li>
<li><img src="./download-icon.svg" alt="download"></li>
</ul>
<span class="time-duration">0:39</span>
</div>
</div>
<div class="progress" id="progress1445"></div>
<audio id="audio1445" class="audio-link" src="./AkashavallepaVidooragoham.mp3"></audio>
Javascript Code :
function togglePlay (count, e) {
e = e || window.event;
var btn = e.target;
var timer;
var percent = 0;
var audio1 = document.getElementById("audio"+count);
audio1.addEventListener("playing", function(_event) {
var duration = _event.target.duration;
advance(duration, audio1);
});
audio1.addEventListener("pause", function(_event) {
clearTimeout(timer);
});
var advance = function(duration, element) {
var progress = document.getElementById("progress"+count);
increment = 10/duration
percent = Math.min(increment * element.currentTime * 10, 100);
progress.style.width = percent+'%'
startTimer(duration, element);
}
var startTimer = function(duration, element){
if(percent < 100) {
timer = setTimeout(function (){advance(duration, element)}, 100);
}
}
if (!audio1.paused) {
btn.classList.remove('active');
audio1.pause();
isPlaying = false;
} else {
btn.classList.add('active');
audio1.play();
isPlaying = true;
}
}

Your question is a bit confusing, but I'm assuming the issue is from there being multiple divs with the same id on the page. To fix this, try using document.querySelector() Documentation Here
For example, each player could be like this:
Html:
<div class="prabhata-play audio-playlist " id="player1">
<div class="progress" id="progress1445"></div>
<audio id="audio1445" class="audio-link" src="http://nat.verifinow.in/wp-content/uploads/2021/06/AkashavallepaVidooragoham.mp3"></audio>
</div>
Then in the JS, you could access the progress div using:
document.querySelector("div#player1 > div#progress1445");

How can I call JavaScript function after the whole web page loaded?

I have JavaScript function , I want to run this function when webpage is completely loaded, But it's not working.
here is my code
window.onload = function() {
var btn = document.getElementsByClassName('title');
for (var i = 0; i < btn.length; i++) {
btn[i].insertAdjacentHTML('afterend', `
<div> <button class= "btn">
<img src="logo.png" height="20px" width="70px">
</button>
</div>
`);
}
}

How to close modal when click outside Javascript

I am trying to close the modal when it's clicked outside. I have tried to loop through modals but can't get them to set its display to none.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my code to open modals.
const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
for (var i = 0; i < coffeeGrounds.length; i++) {
coffeeGrounds[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
var a = document.getElementById(x);
a.setAttribute('style','display:block');
});
}
Here is my code, when clicked outside to close the modal:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Over here by setting the modal display to none. It's holding back to display the modal also.
Please any help would be appreciated.
Codepen: https://codepen.io/zaidik/pen/bGwpzbE

When you click outside of the modal window you should not have the modal window in you event propagation array
In other words take advantage of event.path property
Working example (based on the provided fiddle)
window.addEventListener('click', function(e) {
const allModals = document.querySelectorAll('.project-card');
if (!e.path.some(x => x.className && x.className.includes('project-card'))) {
allModals.forEach(x => x.style.display = 'none');
}
}, true)
Working fiddle example: https://jsfiddle.net/7pzs1042/

Javascript function not reachable after settimeout

I have designed following code snippet:
<div id="content">
<h3>Select Images Below</h3>
<ul id="imagegallery">
<li>
<a class='a' href="./img/team/t1.jpg" title="The crowd goes wild" onclick="">
<img src="./img/team/t1.jpg" height="50px" width="50px" alt="the band in concert" />
</a>
</li>
<li>
<a class='a' href="./img/team/t2.jpg" title="An atmospheric moment">
<img src="./img/team/t2.jpg" height="50px" width="50px" alt="the bassist" />
</a>
</li>
<li>
<a class='a' href="./img/team/t3.jpg" title="Rocking out">
<img id='image' src="./img/team/t3.jpg" height="50px" width="50px" alt="the guitarist" />
</a>
</li>
<li>
<a class='a'href="./img/team/t4.jpg" title="Encore! Encore!">
<img id='image' src="./img/team/t4.jpg" height="50px" width="50px" alt="the audience" />
</a>
</li>
</ul>
<div>
<img id='placeholder', src="./img/resources/neutral_1.jpg", height="450px" width="550px" alt="Image gooes here", style="margin-bottom: 50px;padding: 10px;">
</div>
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
<div id="show">
<h1 id ='h'>It works</h1>
</div>
</div>
and the JS for this code is something like this
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(showpic(this), 2000);
e.preventDefault();
});
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}
};
I am trying to show the clicked image in the placeholder below,reading the source from href of a tags and assigning it to src of placeholder, but the problem I am facing is that showpic is never called/reached. how should i modify my code to resolve this problem. I click the image, loader appears and then image loads in browser window

This is not correct
setTimeout(showpic(this), 2000);
You should pass a function to setTimeout but you are calling it and actually passing some result of one's execution. You should do like this, for example
setTimeout(() => showpic(this), 2000);
You have a typo. You declare your function as showPic but call it as showpic

Correct showpic(this) to () => showpic(this).Your call to the showPic function is misspelled. Also your showPicfunction does not need to be wrapped inside of your window.onload function. Your JS should look like this and it should work:
window.onload = function() {
var links = document.getElementsByClassName('a');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
// Hide results
document.getElementById('placeholder').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(() => showPic(this), 2000);
e.preventDefault();
});
}
}
function showPic(whichpic) {
document.getElementById('placeholder').style.display = 'block';
var source = whichpic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.setAttribute('src', source);
return false;
}

JavaScript Function Switch Function Not Working

I recently posted a question and suggested this as an answer but it is not working. Why ?
<div class="text-center">
<embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>
<div class="button">
<button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>
<script>
function switchPdf() {
var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
elem = document.getElementById('thePdf');
elem.src = elem.src == fileA ? fileB : fileA;
}
</script>
Basically there is a default PDF which loads on page open, and once I click the button I want the pdf to change to the other pdf. But it is not working

changes to src attribute on <embed>, <object>, etc...
do not take affect
have to replace with a new element
function switchPdf() {
var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
container = document.getElementById('thePdfContainer'),
elem = document.getElementById('thePdf');
var newFile = (elem.src === fileA) ? fileB : fileA;
container.innerHTML = '<embed src="' + newFile + '" width="300" height="300" type="application/pdf" id="thePdf">';
console.log(container.innerHTML);
}
<div id="thePdfContainer" class="text-center">
<embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>
<div class="button">
<button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>