Develop Reference

JavaScript: how to stop an audio on autoplay by keyboard

I want to know how to stop an audio that is set to "autoplay" using the X key on the keyboard. I have tried in a couple of method but it doesn't work.
That's my code:
JavaScript:
var source = "audio/homepage_benvenuto.mp3";
var audio = document.createElement("audio");
audio.autoplay = true;
audio.load()
audio.addEventListener("load", function()
{
audio.play();
}, true);
audio.src = source;
window.addEventListener("keydown", checkKeyPressed, false);
function checkKeyPressed(e)
{
if (e.keyCode == "88") // 88 = X: interrompe audio in corso
{
player.pause();
player.currentTime = 0;
document.getElementById('audioA').pause();
}
}

How to make custom audio player applicable to multiple audio?

I have multiple HTML audio on my page, and want to apply this custom audio player to them. The thing is, this only works for the first audio, and not for the second, third and fourth. Is there any way where I can solve this problem?
My JavaScript code:
const audio = document.getElementById('audio');
const playPauseButton = document.querySelector('.play-button');
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress-controls');
const playButton = document.querySelector('.playing');
const pauseButton = document.querySelector('.paused');
const playPause = () => {
if(audio.paused){
audio.play()
playButton.style.display = 'none';
pauseButton.style.display = '';
}
else{
audio.pause()
playButton.style.display = '';
pauseButton.style.display = 'none';
}
}
function pause(){
pauseButton.style.display = 'none'
}
window.addEventListener('load', pause);
playPauseButton.addEventListener('click', playPause);
audio.addEventListener('timeupdate', function(){
var progress = audio.currentTime / audio.duration;
progressBar.style.width = progress * 100 + "%";
});
document.addEventListener('keyup', (event) => {
if (event.code === 'Space') {
playPause();
}
if (event.code === 'KeyP') {
playPause();
}
});

how to make play/pause button

I would like the pause button to resume the song from where it was paused instead of restarting the song.
with vanilla javascript only please,
Thank you !
var songs = [
"song1.mp3",
"song2.mp3",
"song3.mp3",
];
var song = new Audio();
var currentSong = 0;
var playButton = document.querySelector(".play");
var pauseButton = document.querySelector(".pause");
function playSong() {
song.src = songs[currentSong];
pauseButton.style.display = "block";
playButton.style.display = "none";
songTitle.textContent = sT[currentSong];
Artist.textContent = artistNames[currentSong];
songCover.src = songCovers[currentSong];
song.play();
}
playButton.addEventListener("click", function playSong() {
song.src = songs[currentSong];
pauseButton.style.display = "block";
playButton.style.display = "none";
songTitle.textContent = sT[currentSong];
Artist.textContent = artistNames[currentSong];
songCover.src = songCovers[currentSong];
song.play();
});
pauseButton.addEventListener("click", function pauseSong() {
song.pause();
pauseButton.style.display = "none";
playButton.style.display = "block";
});

The song resets because every time you click on the play button, the src of the song is being assigned again. And therefor the song will start over from the start.
So you'll need to change the part of your code where the song is selected. Do that outside of the play function so that clicking play will only play, and clicking pause will only pause.
function chooseSong() {
song.src = songs[currentSong];
songTitle.textContent = sT[currentSong];
Artist.textContent = artistNames[currentSong];
songCover.src = songCovers[currentSong];
}
function playSong() {
pauseButton.style.display = "block";
playButton.style.display = "none";
song.play();
}
function pauseSong() {
pauseButton.style.display = "none";
playButton.style.display = "block";
song.pause();
}
playButton.addEventListener('click', playSong);
pauseButton.addEventListener('click', pauseSong);
chooseSong();

Audio player only plays, doesn't stop

I'm trying to make a simple audio player but it's just not working fine!
Here's the JavaScript:
var audio = document.getElementById("audio");
var isPlaying = false;
function togglePlay(element) {
element.classList.toggle("playing");
if (isPlaying) {
document.getElementById("audio").pause();
document.getElementById("audio").currentTime = 0;
} else {
document.getElementById("audio").play();
}
}
document.getElementById("audio").onplaying = function() {
var isPlaying = true;
};
document.getElementById("audio").onpause = function() {
var isPlaying = false;
};
Please help me!

var audio = document.getElementById("audio");
// use .paused instead
// var isPlaying = false;
function togglePlay(element) {
var promise;
if (!audio.paused) { /* isPlaying */
audio.pause();
audio.currentTime = 0;
element.classList.remove("playing");
} else {
// play is not instant, it returns a promise
promise = audio.play();
if (promise.then !== undefined) {
promise.then(function () {
element.classList.add("playing");
});
} else { /* old API */
element.classList.add("playing");
}
}
}
audio.onplaying = function() {
;
};
audio.onpause = function() {
;
};
Make sure to put the <script> at the end of the <body>
<script>/* put script at the end of body */</script>
</body>
</html>
Make sure the audio source for <audio> is an actual audio file. (not an html file containing audio) Open console and look at network requests.

How can I display a clickable playlist in my object-oriented HTML5 JS audio player?

I have an operational audio player built in HTML5 and Javascript (with some basic CSS) but I'd like to add a clickable playlist, so the name of the audio track being played is displayed and songs can be clicked on and immediately start playing.
Here's my JS:
function Jukebox() {
this.playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3', 'song4.mp3']
this.currentIndex = 0
this.audio = $('#audioPlayer')[0]
this.audio.src = this.playlist[this.currentIndex]
// console.log(this.audio)
this.play = function(){
this.audio.play();
// console.log(this.currentIndex)
}
this.pause = function(){
this.audio.pause();
}
this.stop = function(){
this.audio.pause();
this.audio.currentTime = 0;
}
this.next = function(){
this.audio.pause();
this.currentIndex++;
if(this.currentIndex == this.playlist.length){
this.currentIndex = 0
};
this.audio.src = this.playlist[this.currentIndex];
this.play();
}
this.prev = function(){
this.audio.pause();
this.currentIndex--;
if(this.currentIndex <= 0){
this.currentIndex = this.playlist.length - 1
};
this.audio.src = this.playlist[this.currentIndex];
this.play();
}
}
var thisIsMyJukebox = new Jukebox()
//pass the play function by reference
$('#playBtn').click(function(){
thisIsMyJukebox.play()
})
$('#pauseBtn').click(function(){
thisIsMyJukebox.pause()
})
$('#stopBtn').click(function(){
thisIsMyJukebox.stop()
})
$('#prevBtn').click(function(){
thisIsMyJukebox.prev()
})
$('#nextBtn').click(function(){
thisIsMyJukebox.next()
})
});
The audio files are on my hard drive and the songs have proper names that I could write in, they're just named this way in the code folder because it's shorter.
Thanks for any help.

If you would like to use Boostrap, you can just add all the songs as a button list. http://getbootstrap.com/components/#list-group-buttons