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>
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 have an audio file with a button when I click on it the audio play and when I click again the audio pause I also want when the page is load the audio play directly without clicking on the button
I tried autoplay in the html but it didn't work
I tried allow="autoplay" also it didn't work
I tried window.addEventListener('load') also it didn't work
I read that I should use muted but also it didn't work
I'm using chrome and firefox
How can I make this audio work on refresh or on load for the page and when i click in the button the audio will be pause it and when I click again the audio will be played
I searched on stack overflow but nothing solve my problem
let audio = document.querySelector('.music audio');
let audioBtn = document.querySelector('.music .musicBtn i');
audio.volume = 0.2;
window.addEventListener("load", () => {
audio.play();
});
audioBtn.addEventListener("click", () => {
if (audio.paused) {
audio.play();
audioBtn.classList.add('fa-volume-up');
audioBtn.classList.remove('fa-volume-mute');
} else {
audio.pause();
audioBtn.classList.add('fa-volume-mute');
audioBtn.classList.remove('fa-volume-up');
}
});
.musicBtn {
background: transparent;
padding: 1.5rem 2rem;
font-size: 3rem;
border: none;
cursor: pointer;
}
<div class="music">
<audio id="audio" style="display:none;" src="music/music.mp3" allow="autoplay" controls autoplay loop></audio>
<button class="musicBtn"><i class="fas "></i></button>
</div>
<script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script>
You can not, as browsers only allow playing sounds as a consequence of user-interaction. You could try to hijack any click or mouse movement to enable the plaining of sound, but there is no way to really do it on load alone.
https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
You can try manual interaction by clicking on the play button on DOM load so that the audio plays,
if (document.readyState === 'complete') {
document.getElementById('#playButton').click();
}
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)
I would like to create 2 different audio players, 1 large and 1 small. I would like to be able to set which one to display directly in the HTML by setting a class.
The large one should have a play/pause button icon and progress bar that will take up it's own line on a webpage. The small one only a play button icon (using SVG) that toggles based on the current state (playing or paused) that can be displayed inline on a webpage.
This is the HTML I would ideally like to be able to use:
<audio class="small">
<source src="mysound.ogg" type="audio/ogg">
<source src="mysound.mp3" type="audio/mpeg">
</audio>
I have been playing around with it, this is the closest I have been able to get:
<div class="audio">
<audio id="player" src="mysound.mp3"></audio>
<a id="button" title="button">Play</a>
</div>
<script>
$(document).ready(function() {
var playing = false;
$('a#button').click(function() {
$(this).toggleClass("down");
if (playing == false) {
document.getElementById('player').play();
playing = true;
$(this).text("Pause");
} else {
document.getElementById('player').pause();
playing = false;
$(this).text("Play");
}
});
});
</script>
There are several issues with the above code:
Once the audio finishes playing "Pause" does not toggle back to
display "Play".
If there are multiple players on the page it doesn't
target this.
It's clunky and requires the person writing the page
to add lots of code. I would like to move most of this to JS and
CSS.
I feel that I'm on entirely the wrong track, but I can't find good documentation for making this simpler.
SAME ISSUE! As we all know firefox and audio is a problem because of patents and such. I found this little code on the internet to play my sounfile.
I would like to play multiple files instead of just one while having the display bar not show up in the browser
you can change the player width to 0 but than the user can not click the play button :P
Is there a way of possibly having the sound play on click of a link or button.
Please note. Do not give me codes that have no compatibility outside chrome and ie.
HTML
<audio id="audioplayer" preload controls loop style="width:400px;">
<source src="sounds/sound1.mp3">
<source src="sounds/sound1.caf">
</audio>
Javascript
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "sounds/sound1.mp3"});
}
</script>
RECAP:
Have the sound play on a button or link click.
Have multiple sounds available to play (not just one)
Compatibility with firefox
non visible soundbar.
Still learning myself. But this is a button, with a script to play an audio file. (part of my own solution) Plays only 1 sound at a time, but doesn't show anything about it.
You could also make a funtion like this, without setting the src, using the pause() command.
currenttime is used to change the part where the audio file was.
Sound play button<br>
<script>
sound = new Audio();
function playSnd(soundSrc) {
sound.src = soundSrc;
sound.play();
}
</script>