I'm trying to create a music player and this is part of the code.
// Function to play the previous song
function prevSong() {
console.log("playing");
if (songs[songs.indexOf(song) - 1] != null) {
console.log("loop");
song = songs[songs.indexOf(song) - 1];
current.src = `src/Testing/${folder}/${song}`;
pausePlay();
}
}
// Function to play the next song
function nxtSong() {
console.log("playing");
if (songs[songs.indexOf(song) + 1] != null) {
console.log("condition");
song = songs[songs.indexOf(song) + 1];
current.src = `src/Testing/${folder}/${song}`;
pausePlay();
}
}
function pausePlay() {
// Play and Pause Music as well as set the title.
let img = document.querySelector(".play");
let title = document.querySelector(".title2");
if (current.paused == true) {
current.play();
img.src = "./src/images/pause.svg";
title.innerHTML = song.slice(0, -4);
} else {
current.pause();
img.src = "./src/images/play.svg";
}
// Configuring Next and Previous button
let next = document.querySelector(".next");
let previous = document.querySelector(".previous");
next.addEventListener("click", () => {
console.log(song);
nxtSong();
});
previous.addEventListener("click", () => {
console.log(song);
prevSong();
});
}
As you can see the functions to play the previous and next songs are separate and called when needed. The code worked perfectly when they were part of the pausePlay() function but as I need them to play the next song when the current one is finished I put them into separate functions. Now I keep getting the Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://developer.chrome.com/blog/play-request-was-interrupted error on my console after a few clicks of the next button. And when I try to play the previous song it jumps to the very first song in the playlist. Here's look of the console:
DNB_PAD_65.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_66.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_67.wav
script.js:22 playing
script.js:24 condition
script.js:26 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://developer.chrome.com/blog/play-request-was-interrupted
nxtSong @ script.js:26
(anonymous) @ script.js:78
script.js:77 DNB_PAD_68.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_69.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_70.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_71.wav
script.js:22 playing
script.js:24 condition
3script.js:26 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://developer.chrome.com/blog/play-request-was-interrupted
nxtSong @ script.js:26
(anonymous) @ script.js:78
script.js:77 DNB_PAD_72.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_73.wav
script.js:22 playing
script.js:24 condition
script.js:77 DNB_PAD_74.wav
script.js:22 playing
script.js:77 DNB_PAD_74.wav
script.js:22 playing
script.js:77 DNB_PAD_74.wav
script.js:22 playing
script.js:77 DNB_PAD_74.wav
script.js:22 playing
script.js:77 DNB_PAD_74.wav
script.js:22 playing
script.js:77 DNB_PAD_74.wav
script.js:22 playing
script.js:26 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://developer.chrome.com/blog/play-request-was-interrupted
nxtSong @ script.js:26
(anonymous) @ script.js:78
script.js:81 DNB_PAD_74.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_73.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_72.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_71.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_70.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_69.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_68.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_67.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_66.wav
script.js:11 playing
script.js:13 condition
script.js:81 DNB_PAD_65.wav
script.js:11 playing
8script.js:15 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://developer.chrome.com/blog/play-request-was-interrupted
prevSong @ script.js:15
(anonymous) @ script.js:82
I logged 'condition' and 'loop' to see up till where the code was being executed. After I play 65 and hit next it jumps to 66, 68, 72 and then 74 and when i press previous it jumps straight back to 65 skipping the rest.
P.S: I know its a really long post. Thanks in advance.