Make stop audio button - javascript

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

Related

My audio does not play when I click on the play button

This is how my script looks like:
<script>
var obj = document.createElement("audio");
document.body.appendChild(obj);
obj.src = "http://example.com/audios/Kalimba.mp3";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;
$(".testspeech").click(function() {
obj.paused?obj.play():obj.pause()
});
</script>
Then in the HTML I have a button that is meant to play and/or pause the video.
However, when I load the page nothing happens when I click on the play button.
Anything I could have possibly done wrong here?
Here is the HTML:
<button class="testspeech">
play/pause
</button>
As far as I can tell the reason your sound isn't playing is that the src for the actual sound is not valid. I've created a JSFiddle (here) to test it out, and after replacing the sound clip link it works as expected.
$(document).ready(function() {
var obj = document.createElement("audio");
document.body.appendChild(obj);
obj.src = "https://www.kozco.com/tech/piano2.wav";
obj.load();
obj.volume = 0.3;
obj.preLoad = true;
obj.controls = true;
$(".testspeech").on('click', function() {
obj.paused ? obj.play() : obj.pause()
});
});

Make a stop button with Javascript

I thought this would be the easiest part but I guess I'm either having a brain fart or this is more difficult than I thought it'd be, but I can't seem to figure out how to make a stop button for this code. I've tried so many things that just don't seem to work. I want it so that when #stopbutton is pressed it stops audio. I've tried things like
function stopAudio() {
audio.forEach(audio=>audio.pause());
}
$('#stopbutton').click(stopAudio);
function stopAudio() {
audio.pause();
$('#stopbutton').click(stopAudio);
and someothers that didn't work
audio js
function playAudio(e)
{
let el = e.currentTarget;
var audio = new Audio();
var src = "mp3/" + el.id + ".mp3";
audio.src = src;
audio.play();
return audio;
}
html
<span>Sound1X</span>
Between span is all in localStorage btw
This javascript might also be relevant
function createListeners()
{
let names = document.getElementsByName("names2");
for (let i = 0; i < names.length; i++)
{
let name = names[i];
name.removeEventListener('click', playAudio);
name.addEventListener('click', playAudio);
}
}
window.addEventListener('load', function() { createListeners(); });
$(document).on('click', '[name="names2"]', playAudio);

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.

How to play audio from database with button in php and html?

i tried to built my website with audio player inside. But i have problem when i combined song that load from database with play button. I want to make my play button change when it clicked and load song from database. I have codes like these :
HTML and PHP
<div id="playbtn">
<button id="play_btn" onclick="playPause()"></button>
<?php
$song= "SELECT mp3Lagu FROM folksong WHERE songtitle = 'Apuse'";
$result = mysql_query($song);
while ($row = mysql_fetch_array($result)) {
echo'
<audio id="listenlagu">
<source src="data:audio/mp3;base64,'.base64_encode( $row['mp3Lagu'] ).'">
</audio>';
}
?></div>
I used javascript to change the display button like these :
JAVASCRIPT
<script>
var audio, playbtn;
function initAudioPlayer(){
audio = new Audio();
//audio = document.getElementById('listenlagu');
//audio.src = "audio/Apuse.mp3";
audio.src = document.getElementById('listenlagu');
audio.load();
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("play_btn");
// Add Event Handling
playbtn.addEventListener("click",playPause);
// Functions
function playPause(){
if(audio.paused){
audio.play();
playbtn.style.background = "url(images/pause70.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(images/play70.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
</script>
but it's not working when i combined with javascript -_____-"
Anyone know where the problems are ?
Can you help me to fix these ?
You should update the following (full code example below):
assign the src attribute to audio.src
move your playPause function outside of the initAudioPlayer function
make your playPause function accept 2 parameters 1 - "audio" (the new Audio object) and 2 - playbtn (the button element), and have it return a function so that it can be used as a callback in the addEventListenter method
Here is a working plunkr: https://plnkr.co/edit/bticzS?p=preview
initAudioPlayer();
function initAudioPlayer(){
var audio = new Audio();
var aContainer = document.getElementById('listenlagu');
// assign the audio src
audio.src = aContainer.querySelectorAll('source')[0].getAttribute('src');
audio.load();
audio.loop = true;
audio.play();
// Set object references
var playbtn = document.getElementById("play_btn");
// Add Event Handling
playbtn.addEventListener("click", playPause(audio, playbtn));
}
// Functions
function playPause(audio, playbtn){
return function () {
if(audio.paused){
audio.play();
playbtn.style.background = "url(images/pause70.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(images/play70.png) no-repeat";
}
}
}

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);
});

Categories