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();
Related
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();
}
}
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();
}
});
I made this 2 functions based on different sessions, which displays/hides diffrent HTML code according to the session. Any idea on how this could could be simplified? If it possible at all to write it with less and better code?
// HTML / user interface for ADMIN view
function showAdminInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
btnCreateProduct.style.display = "flex";
btnCreateUser.style.display = "flex";
pageViewProducts.style.display ="flex";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
btnSubscribeNav.style.display = "none";
}
/************************************************************************/
/************************************************************************/
/************************************************************************/
// HTML / user interface for USER view
function showUserInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
pageViewProducts.style.display ="flex";
btnEditUsersNav.style.display = "none";
btnEditProductsNav.style.display = "none";
btnViewSubscribersNav.style.display = "none";
btnCreateProduct.style.display = "none";
btnCreateUser.style.display = "none";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
}
You can separate the shared style changes like this:
function initInterface() {
lblDropdown.style.display = "flex";
lblDropdownforMobileOnly.style.display ="none";
pageViewProducts.style.display ="flex";
btnSignupNav.style.display = "none";
btnLoginNav.style.display = "none";
}
function showAdminInterface() {
initInterface();
btnCreateProduct.style.display = "flex";
btnCreateUser.style.display = "flex";
btnSubscribeNav.style.display = "none";
}
function showUserInterface() {
initInterface();
btnEditUsersNav.style.display = "none";
btnEditProductsNav.style.display = "none";
btnViewSubscribersNav.style.display = "none";
btnCreateProduct.style.display = "none";
btnCreateUser.style.display = "none";
}
and you can create helper function for show and hide:
function hide(el) {
el.style.display = "none"; // you can do the same with show and flex
}
function showUserInterface() {
initInterface();
hide(btnEditUsersNav);
hide(btnEditProductsNav);
hide(btnViewSubscribersNav);
hide(btnCreateProduct);
hide(btnCreateUser);
}
or
function showUserInterface() {
initInterface();
[
btnEditUsersNav,
btnEditProductsNav,
btnViewSubscribersNav,
btnCreateProduct,
btnCreateUser
].forEach(hide);
}
Just for the example, but you get the idea.
function showInterface(isAdmin = false) {
lblDropdown.style.display = isAdmin ? "flex" : "none";
... // the rest
}
I am trying to make a button which when clicked will stop the execution of the automatic slideshow.
The clearTimeout() function isn't working for some strange reason. can someone please tell me how to make it work?
var button = document.getElementById("button");
button.addEventListener("click",stop);
function stop(){
**clearTimeout(t);**
}
window.addEventListener("load",finalResult);
**var t = setTimeout(function(){finalResult()},0);**
function finalResult(){
getFirstImage();
function getFirstImage(){
img1.style.display = "block";
setTimeout(getSecondImage,3000);
}
function getSecondImage(){
img1.style.display = "none";
img2.style.display = "block";
setTimeout(getThirdImage,3000);
}
function getThirdImage(){
img3.style.display = "block";
img2.style.display = "none";
setTimeout(getFourthImage,3000);
}
function getFourthImage(){
img4.style.display = "block";
img3.style.display = "none";
setTimeout(loopAgain,3000);
}
function loopAgain(){
img4.style.display = "none";
setTimeout(getFirstImage,0);
}
}
You have to clear all the timeouts present in the page.
Something like this:
var button = document.getElementById("button");
button.addEventListener("click", stop);
function stop() {
clearTimeout(t);
clearTimeout(a);
clearTimeout(b);
clearTimeout(c);
clearTimeout(d);
clearTimeout(e);
}
window.addEventListener("load", finalResult);
var t = setTimeout(function() {
finalResult()
}, 100);
var a, b, c, d, e;
function finalResult() {
getFirstImage();
function getFirstImage() {
img1.style.display = "block";
a = setTimeout(getSecondImage, 3000);
}
function getSecondImage() {
img1.style.display = "none";
img2.style.display = "block";
b = setTimeout(getThirdImage, 3000);
}
function getThirdImage() {
img3.style.display = "block";
img2.style.display = "none";
c = setTimeout(getFourthImage, 3000);
}
function getFourthImage() {
img4.style.display = "block";
img3.style.display = "none";
d = setTimeout(loopAgain, 3000);
}
function loopAgain() {
img4.style.display = "none";
e = setTimeout(getFirstImage, 0);
}
}
im just a beginner in javascript and im stuck at a problem.
when i click play with function play()
it shows if its <= 2.5 but not when its > 2.5 .(I displayed the 'reddot' in html as display hidden).
function play() {
var audio = document.getElementById("audio");
audio.play();
if (audio.currentTime <= 2.5) {
document.getElementById('reddot').style.display = 'block';
}
if (audio.currentTime > 2.5) {
document.getElementById('reddot').style.display = 'none';
document.getElementById('reddot2').style.display = 'block';
}
}
function () {
}
function pause(){
var audio = document.getElementById("audio");
audio.pause();
}
function load(){
var audio = document.getElementById("audio");
audio.pause();
audio.currentTime = 0;
}
function rewind() {
var audio = document.getElementById("audio");
audio.play();
audio.currentTime = (audio.currentTime-6);
}