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)
Related
I'm coding a playlist.
I would like to create a button that would pause/play my audios. One button that would work for all my audios no matter which one is currently playing.
For now, I have a button that can pause the audio playing, but I can't manage to make a button that resumes the audio where it stopped.
On click on title, the audio starts playing.
On click on the button, I'd like to pause or resume the audio playing, and to change the text from Pause to Play and vis-versa.
If you click on a title again, I'd like the audio to play from beginnig.
Here is the html :
<div class="audio" onclick=
"playAudio('algebrasuicide_fathersbythedoor.wav')">algebra suicide father by the door
</div>
<div class="audio"onclick=
"playAudio('algebrasuicide_inbedwithboys.wav')">
algebra suicide in bed with boys
</div>
<div class="audio"onclick=
"playAudio('aprilmagazine_parade.wav')">
april magazine parade
</div>
<button onclick="pauseAudio()">
pause
</button>
Here is the js :
let audio;
function stopAudio() {
if (audio && !audio.paused) {
audio.pause();
audio.currentTime = 0;
}
}
function playAudio(src) {
stopAudio();
audio = new Audio();
audio.src = src;
audio.play();
}
function pauseAudio(){
audio.pause();
}
From what I understand I may need to change the inner html or to add a player but I tried a lot of codes from SO and can't manage to find how to make it work.
I hope you can help me ! It's probably simple but I'm very novice.
Thank you :)
I was wondering if it's possible to play multiple audio files with just one button? From there, I want the user to be able to mute each audio file, so everything runs simultaneously.
I don't have much experience with backend web development, so a little push in the right direction would be greatly appreciated!
You can start playing of multiple audios on the click of a single button simply by calling the play function on each audio you want to start.
This snippet has a couple of audio elements. On button click they each have their play function called.
Note that each one has the controls attribute so the user can pause them individually. (It also has loop on each just for this demo as each audio is quite short).
function playAll() {
document.querySelector('.container').classList.add('playing');
const audios = document.querySelectorAll('audio');
audios.forEach(audio => {
audio.play();
});
}
.container {
display: none;
}
.container.playing {
display: block;
}
<button onclick="playAll();">Play them all</button>
<div class="container">
<h2>Horse
</h2> <audio src="https://www.w3schools.com/html/horse.mp3" controls loop></audio>
<h2>Placeholder</h2> <audio src="https://ia903002.us.archive.org/18/items/placeholder/placeholder.mp3" controls loop></audio>
</div>
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>
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);
}
using the mediaelement.js audio - Does anyone know how or if it's possible to have 1 track pause automatically when another is played when there are 2 or more audio tracks on the same page? (I guess like a play/pause toggle attribute)
there's an example of what I'm talking about here using a flash player: http://stockmusicboutique.com/background but was wondering if it would be possible with this html 5 player.
You could do something like this:
<audio src="track1.mp3" />
<audio src="track2.mp3" />
<script type="text/javascript">
// make an array for the mediaelement players
mediaElementPlayers = new Array();
// run mediaelement.js
$(document).ready(function(){
$('audio').mediaelementplayer({
success:function(mediaElement, domObject){
// add this mediaelement to the mediaElementPlayers array
mediaElementPlayers.push(mediaElement);
// bind the play event to the pauseAllPlayers function
mediaElement.addEventListener('play', function(e){
pauseAllPlayers(e.target); }
)
}
})
})
// iterate through the mediaElementPlayers array, pause all players except the one that triggered the event.
function pauseAllPlayers(currentPlayer){
for(i=0; i<mediaElementPlayers.length; i++){
if(mediaElementPlayers[i] != currentPlayer){
mediaElementPlayers[i].pause();
}
}
}
</script>