Good Morning,
I’m creating a music player for a website that will contain 14 playlists by default, but in the process of writing the site I’ve come across one problem – the selected playlist is only triggered by odd clicks on the page, any even clicks cause problems.
In a nutshell:
- I click on playlist A with a single click – it works perfectly
- Then I select playlist B with a single click – it does not work
- Single click back to playlist A – works fine
- Then I select playlist B with a double click – it works flawlessly
So every click #1, #3, #5, #7 etc works flawlessly, however clicks #2, #4, #6, #8 don’t work, they don’t play music and there is no way to pause or unpause the playlist either.
Code:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>RADIO</title>
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
</head>
<body>
<div id="menu">
<div id="buttons">
<div class="button-L" onclick="document.body.style.backgroundImage = 'url(img/1.jpg)';"><button value="W" onclick="gra(this)">Playlista 1</button></div>
<div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/2.jpg)';"><button value="W1" onclick="gra(this)">Playlista 2</button></div>
<div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/3.jpg)';"><button value="W2" onclick="gra(this)">Playlista 3</button></div>
<div class="button-S" onclick="document.body.style.backgroundImage = 'url(img/4.jpg)';"><button value="W3" onclick="gra(this)">Playlista 4</button></div>
</div>
</div>
<div class="music-container" id="music-container">
<div class="music-info">
<h4 id="title"></h4>
<div class="progress-container" id="progress-container">
<div class="progress" id="progress"></div>
</div>
</div>
<audio src="music/sport.mp3" id="audio"></audio>
<div class="img-container">
<img src="img/cd-w3.jpg" alt="music-cover" id="cover">
</div>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="fas fa-backward"></i>
</button>
<button id="play" class="action-btn action-btn-big">
<i class="fas fa-play"></i>
</button>
<button id="next" class="action-btn">
<i class="fas fa-forward"></i>
</button>
</div>
</div>
<script type="text/javascript">
function gra(tytul) {
var tytulGry = tytul.value;
var songs = [];
// Song titles
if(tytulGry === "W") songs = ['The Trail', 'Kaer Morhen'];
else if(tytulGry === "W1") songs = ['After The Storm', 'Spikeroog'];
else if(tytulGry === "W2") songs = ['Trauma', 'Foxkids'];
else if(tytulGry === "W3") songs = ['Myspace', 'Sport'];
const musicContainer = document.getElementById('music-container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');
const currTime = document.querySelector('#currTime');
const durTime = document.querySelector('#durTime')
// Keep track of song
let songIndex = 1;
// Initially load song details into DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src = `music/`+song+`.mp3`;
cover.src = `img/`+tytulGry+`.jpg`;
}
// Play song
function playSong() {
musicContainer.classList.add('play');
playBtn.querySelector('i.fas').classList.remove('fa-play');
playBtn.querySelector('i.fas').classList.add('fa-pause');
audio.play();
}
// Pause song
function pauseSong() {
musicContainer.classList.remove('play');
playBtn.querySelector('i.fas').classList.add('fa-play');
playBtn.querySelector('i.fas').classList.remove('fa-pause');
audio.pause();
}
// Previous song
function prevSong() {
songIndex--;
if (songIndex < 0) {
songIndex = songs.length - 1;
}
loadSong(songs[songIndex]);
playSong();
}
// Next song
function nextSong() {
songIndex++;
if (songIndex > songs.length - 1) {
songIndex = 0;
}
loadSong(songs[songIndex]);
playSong();
}
// Update progress bar
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
}
// Set progress bar
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
//get duration & currentTime for Time of song
function DurTime (e) {
const {duration,currentTime} = e.srcElement;
var sec;
var sec_d;
// define minutes currentTime
let min = (currentTime==null)? 0:
Math.floor(currentTime/60);
min = min <10 ? '0'+min:min;
// define seconds currentTime
function get_sec (x) {
if(Math.floor(x) >= 60){
for (var i = 1; i<=60; i++){
if(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) {
sec = Math.floor(x) - (60*i);
sec = sec <10 ? '0'+sec:sec;
}
}
}else{
sec = Math.floor(x);
sec = sec <10 ? '0'+sec:sec;
}
}
get_sec (currentTime,sec);
// change currentTime DOM
currTime.innerHTML = min +':'+ sec;
// define minutes duration
let min_d = (isNaN(duration) === true)? '0':
Math.floor(duration/60);
min_d = min_d <10 ? '0'+min_d:min_d;
function get_sec_d (x) {
if(Math.floor(x) >= 60){
for (var i = 1; i<=60; i++){
if(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) {
sec_d = Math.floor(x) - (60*i);
sec_d = sec_d <10 ? '0'+sec_d:sec_d;
}
}
}else{
sec_d = (isNaN(duration) === true)? '0':
Math.floor(x);
sec_d = sec_d <10 ? '0'+sec_d:sec_d;
}
}
// define seconds duration
get_sec_d (duration);
// change duration DOM
durTime.innerHTML = min_d +':'+ sec_d;
};
// Event listeners
playBtn.addEventListener('click', () => {
const isPlaying = musicContainer.classList.contains('play');
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
// Change song
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
// Time/song update
audio.addEventListener('timeupdate', updateProgress);
// Click on progress bar
progressContainer.addEventListener('click', setProgress);
// Song ends
audio.addEventListener('ended', nextSong);
// Time of song
audio.addEventListener('timeupdate',DurTime);
}
</script>
</body>
</html>The songs are .mp3 files whose names are stored in the variable songs[]; Where is the source of the problem? I am kindly asking for an answer.
Regards.