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 :)
Related
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 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'm trying to design my own audio player.
I made "play", "pause" and "stop" symbols (Png format) and I couldn't find a solution to actually ad play pause and stop functions when you click on them.
I figured out how to play sound when the word "play" is clicked (no button) but I'm lost when it comes to add "pause" or "stop".
I'm a rookie using html/css so please forgive me if I'm not very clear.
This is what I have so far:
<audio id="audio" src="sons/son.mp3" autostart="false" ></audio>
<a onclick="PlaySound()"> Play </a>
<script>
function PlaySound() {
var sound = document.getElementById("audio");
sound.play()
}
</script>
Thank you for your answers.
you were on the right way to achieve this !
At first you declare globally your variable sound to get it from your three functions. To pause your sound you use the .pause() method and to stop it you return to 0 second playback time with the .currentTime property.
The code:
<audio id="audio" src="sound.mp3" autostart="false" ></audio>
Play
Pause
Stop
<script>
const sound = document.getElementById("audio")
function PlaySound() {
sound.play()
}
function PauseSound(){
sound.pause()
}
function StopSound(){
sound.pause()
sound.currentTime = 0
}
</script>
Hope it helps you !
Problem
I have a click handler that is meant to remove the class of .fa-pause then add a class of .fa-play if the audio is paused (and vice-versa). However, it doesn't do this until the second time I click the play button.
scripts.js
var audio = document.getElementById("painter");
$(".audio__play").click(function(){
if (audio.paused == true) {
$(this).removeClass("fa-pause");
$(this).addClass("fa-play");
audio.play();
} else {
$(this).removeClass("fa-play");
$(this).addClass("fa-pause");
audio.pause();
}
});
I am just guessing this. You may be mixing up the icon you want to use with the audio playing state.
For example, when audio.paused === true you are playing the audio with audio.play(). Shouldn't your button icon change to a pause icon at this point? If yes, then you should be removing fa-play and adding fa-pause and vice-versa when you pause the audio.
Does this work for you?
var audio = document.getElementById("painter");
$(".audio__play").click(function(){
if (audio.paused == true) {
// Audio is going to play so we set the
// pause icon on the button.
$(this).removeClass("fa-play");
.addClass("fa-pause");
audio.play();
} else {
// Audio is going to pause so we set the
// play icon on the button.
$(this).removeClass("fa-pause");
.addClass("fa-play");
audio.pause();
}
});
Here's a really simplistic working version of what you're trying to do. http://jsfiddle.net/W4Km8/7234/
I think your problem is that you are selecting something by class ".audio__play", then changing the class on it. That seems a little fishy to me. I changed the selector to an ID selector "#audio__play" in my example.
If you can't get it working, you need to post more code from your page.
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();
});