We Keep Coding

Make stop audio button

So I have code that looks like this. I press the button and an mp3 plays. But I can't seem to find a way to make a stop button for this and was hoping y'all could help me.
Name of Song 1
Name of Song 2
var audios =
Array.prototype.map.call(document.getElementsByClassName("buttons")
, function (el) {
var audio = new Audio();
var src = el.id + ".mp3";
el.onclick = function () {
audio.src = src;
audio.play();
};
return audio;
});
I tried
function stopmusic() {
audio.pause();
}
document.getElementById('stopbuttons').addEventListener('click', stopmusic);
and
function stopmusic() {
audios.forEach(audio=>audio.pause());
audios.forEach(audio=>audio.currentTime = 0.0);
audios.forEach(audio=>audio.src = "");
}
document.getElementById('stopbutton').addEventListener('click', stopmusic);
but couldnt get it to work

use audio.pause(); to stop the audio

How to make multiple mp3 files play one after another on the click of a button using javascript or jquery?

I have the following html and script to play/pause an audio by clicking a button.
<audio id="testAudio" hidden src="sample.mp3" type="audio/mpeg">
</audio>
<button id="playAudio">Play</button>
<script>
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
</script>
I need to edit it in such a way as to play multiple mp3 files one by one in a defined order and stop only when the last audio has played.
I just don't know how to make that work. Can anyone help?

You can register an event handler for the audio tag, that first when the current file has finished;
document.getElementById("testAudio").addEventListener("ended",function(e) {
// Play next track
});
If you have a list of tracks to play in an array, then simply play the next one after the current track has finished. Using the setTimeout function you can put in a delay between the tracks. A simple example is as follows;
<script>
var playlist= [
'https://api.twilio.com/cowbell.mp3',
'https://demo.twilio.com/hellomonkey/monkey.mp3'
];
var currentTrackIndex = 0;
var delayBetweenTracks = 2000;
document.getElementById("playAudio").addEventListener("click", function(){
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing'){
this.className = "";
this.innerHTML = "Play"
audio.pause();
}else{
this.className = "is-playing";
this.innerHTML = "Pause";
audio.play();
}
});
document.getElementById("testAudio").addEventListener("ended",function(e) {
var audio = document.getElementById('testAudio');
setTimeout(function() {
currentTrackIndex++;
if (currentTrackIndex < playlist.length) {
audio.src = playlist[currentTrackIndex];
audio.play();
}
}, delayBetweenTracks);
});
</script>
Note that cowbell track is 52 seconds long, so if your testing the above (for your own sanity) set the controls property to the audio tag so you can skip through most of it.

Play and Pause with onclick on the same Img

The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">

You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}

Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});

How to create html button that runs two functions?

Hello I'm trying to create a play and pause button for a little web application I'm creating. I've already made a button that plays and another button that pauses but but now I need a button that'll run the play function when clicked and go back to the pause button when clicked.
var audio = new Audio("audio.mp3");
$(".play").click(function () {
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).toggleClass(".play");
});
And here's the buttons
<div class="play"><img src="../images/play.gif"></img></div>
<div class="pause"><img src="../images/pause.gif"></img></div>
I know there could be and easy way to make a div change classes every time its clicked.

I would set up the <html> like this:
<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->
Then I would just use a boolean to switch back and forth in the script.
var toggleIt = false;
$("#play").click(function(){
if (!toggleIt){
audio.play();
toggleIt = true;
$("#play").find("img").attr("src", "file url here");
}
else{
audio.pause();
toggleIt = false;
$("#play").find("img").attr("src", "file url here");
}
})
edit: and here is a fiddle using wonderful place holder kittens. Yes, you should be grateful for my exquisite taste in placeholder pictures.

var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});
this is the simplest way. it would probably be better to do it with css psuedo classes, but i leave this pleasure to you if you care enough

You can create 2 diferents button and change de visibility
var audio = new Audio("audio.mp3");
$("#play").click(function () {
audio.play();
$("#play").hide();
$("#pause").show();
})
$("#pause").click(function () {
$("#pause").hide();
$("#play").show();
});

Set a variable then use a conditional to see if you should either play or pause the audio:
<div class="button"><img src="../images/play.gif"></img></div>
var play = true;
$(".button").click(function(){
if (play){
// Play
audio.play();
$(".button img").attr("src", "../images/pause.gif");
play = false;
} else {
// Pause
audio.pause();
$(".button img").attr("src", "../images/play.gif");
play = true;
}
});
Example

var audio = new Audio("audio.mp3");
$(".play").click(function () {
$(this).hide();
$(".pause").show();
audio.play();
})
$(".pause").click(function () {
audio.pause();
$(this).hide();
$(".play").show();
$(this).toggleClass(".play");
});

Play audio and restart it onclick

I'm looking to restart an audio file in a HTML5 audio player. I have defined a audio file and a play button.
<audio id="audio1" src="01.wav"></audio>
<button onClick="play()">Play</button>
When I click the play button the audio file starts playing, but when I click the button again the audio file doesn't stop and will not play again until it reaches the end of the file.
function play() {
document.getElementById('audio1').play();
}
Is there a method that would allow me to restart the audio file when I click the button using onclick rather than waiting for the song to stop?

To just restart the song, you'd do:
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.currentTime = 0
}
}
FIDDLE
To toggle it, as in the audio stops when clicking again, and when click another time it restarts from the beginning, you'd do something more like :
function play() {
var audio = document.getElementById('audio1');
if (audio.paused) {
audio.play();
}else{
audio.pause();
audio.currentTime = 0
}
}
FIDDLE

soundManager.setup({
preferFlash: false,
//, url: "swf/"
onready: function () {
soundManager.createSound({
url: [
"http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3", "http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
],
id: "music"
});
soundManager.createSound({
url: [
"http://www.w3schools.com/html/horse.mp3",
],
id: "horse"
});
soundManager.play("music");
}
}).beginDelayedInit();
And to start horse and pause all other sounds currently playing in a click event:
$("#horse").click(function () {
soundManager.stopAll();
soundManager.play("horse");
});

function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
//this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function () {
this.sound.play();
}
this.stop = function () {
this.sound.pause();
this.sound.currentTime = 0
}
}
you can use the /above function to play sound
let mysound1 = new sound('xyz.mp3')
mysound1.play()