We Keep Coding

allow one audio player to play at a time

I have multiple audio players, each with a play and stop button, on one page. The only issue I have is when you click one play button, and then another, they play on top of one another. Can someone help me with the code I would need to stop whatever song is playing when another play button is clicked. Here's are my code. Thank you
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
}
function change() {
var image = document.getElementById('image');
image.src = "https://lms.testing.com/je_audio/html/button2.png"
}
#btn1 {
border: none;
padding: 0;
background: none;
}
<audio id="player">
<source src="https://lms.testing.com/els_audio/PATAudios/Q1.mp3" type="audio/mpeg">
Your browser has not support the audio element.
</audio>
<div>
<button id="btn1" onclick="document.getElementById('player').play('play'); disableButton(this)"><img src="https://lms.testing.com/je_audio/html/button1.png" width="95" height="28" alt="button" id="image" onclick="change();"></button>
</div>

Listen for the play event on all the <audio> elements.
Whenever one audio element starts playing, pause all the other ones.
// Get all <audio> elements.
const audios = document.querySelectorAll('audio');
// Pause all <audio> elements except for the one that started playing.
function pauseOtherAudios({ target }) {
for (const audio of audios) {
if (audio !== target) {
audio.pause();
}
}
}
// Listen for the 'play' event on all the <audio> elements.
for (const audio of audios) {
audio.addEventListener('play', pauseOtherAudios);
}

What you have to do is for all the elements first to stop the audio that was previously running audio and then change their images back to play, and try to play the audio for the current media button you are using. Using Class to detect all the Elements using
document.querySelectorAll('.playerButton')
this will help you find all the player button and similarly give a class like AudioFile to that audio that you are using and use the stop() function to stop the audio and then start the audio for the current button clicked using this function.
I hope this will help you, in executing the functionality you are trying to achieve.
you can use the below-given function as an example on how to stop the audio
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
stopAudio(audio)

Stop audio play() when there is audio div in HTML

I have a <div onclick="startSound"> in HTML. When clicked, it triggers a sound. How can I make it stop the first sound and play another one when clicked again? Most solutions I found use the <audio> HTML tag, but since there is none, how to do it?
function startSound() {
var musicPlay=new Audio('sound.mp3');
musicPlay.play();
}

You should have a single audio element, every time you click on a certain element, instead of creating a new Audio component, change the src property of the existing Audio component.
To stop the existing Audio that is in playing state, sound.pause();sound.currentTime = 0; would help.
let myAudio = document.getElementById('myAudio');
function startSound() {
myAudio.pause();
myAudio.currentTime = 0;
myAudio.src = 'sound.mp3';
}
<audio controls id="myAudio">
<source src="anotherSound.mp3" type="audio/mpeg">
</audio>

How to code a HTML5 fullscreen video player with multiple videos in loop?

I want to code an HTML5 video player without any controls. Just autoplay and loop multiple videos from a directory "my website/media" fullscreen.
The tag including "autoplay loop" and some CSS to get the video fullscreen is working fine for me, but I can't play more than one video.
Is it possible to add more videos without using any controls or visible playlists? Just playing all videos from my directory automatically in the loop?
<div class="fullscreen-video-wrap">
<video src="media/firstvideo.mp4" autoplay loop></video>
</div>

There is an "ended" event you can listen for on a element. You can do something like this to replace the src with a new video after the first one ends.
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "http://mysite/myMovie2.m4v";
myVideo.load();
myVideo.play();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}

Making audio mute while other audio is playing

I have a client that would like background music to be playing while her students take a quiz. However, the quiz requires that certain audio files play through onclick effects. When a student clicks to play an audio file, my client would like the background music to mute, then resume playing once the onclick audio file is finished.
Is there any way to do this? Here is the code I'm using to fire the small, onclick audio effects:
var effect1 = document.createElement('audio');
effect1.setAttribute('src', 'audio.mp3');
$.get();
effect1.addEventListener("load", function() {
effect1.play();
}, true);
$('.effect1').click(function() {
effect1.play();
});
And here is my background music code:
<audio autoplay loop>
<source src="background.mp3">
</audio>
Any help is appreciated. Thanks!
Lauren

add an id to your audio tag
<audio id="bgplayer">
and then use jQuery to pause it before playing the click
$('#playeffect').click(function() {
$('#bgplayer').pause();
$('#effect1').play();
to resume it, you will need to add a listener to get fired at the end event of the clip
$('#effect1').on('ended', function() {
$('#bgplayer').play();
});

Make a HTML5 video player play a different file

While a video is playing I can't get the HTML5 player to play a different video, I tried changing the source.src but then it doesn't change the actual video to playing a different file.
How do I get the video to actually go to the next video?
This is the part of the code that's not working:
Javascript:
function change(s){
srs=document.getElementById('source');
srs.src="";
srs.src=s;
video.pause();
video.currentTime=0;
video.play();
}
HTML:
<video id='video'>
<source id='source' src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3" >
</video>
PS: This doesn't actually have to work online, i just want to make a video/audio player for myself

After you set the src property, call video.load().
Actually, if you're only going to have one single source (presumably, because you know you're going to be using a browser that will play mp3), then you can just simplify and set the src property on the video tag itself.
HTML:
<video id="video" src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3"></video>
Javascript:
var video = document.getElementById('video');
function change(s){
video.pause();
video.src = s;
video.load();
video.currentTime = 0;
video.play();
}