If I add the songs for the first album at:
line 220const songs = [‘OldLocal’, ‘AllOverAgain’, ‘Causes of the Causes’, Good Lord Willin and the Creeks Don’t Rise];
it works fine for those songs but I can’t figure out how to pull the songs from the json for this. PLEASE HELP.
….
// JavaScript Document
var musData =[
{
"imageUrl": "genpx1.png",
"artist": "Artist1",
"name": "First Album",
"release":"2019",
"slist":[
{
"tnumbr": 1,
"stitle":"OldLocal1",
"slink":"OldLocal.mp3",
"duration": "2:47"
},
{
"tnumbr": 2,
"stitle":"AllOverAgain1",
"slink":"AllOverAgain.mp3",
"slyric":"",
"duration": "4:47"
},
{
"tnumbr": 3,
"stitle":"Causes of the Causes1",
"slink":"Causes of the Causes.mp3",
"slyric":"",
"duration": "2:47"
},
{
"tnumbr": 4,
"stitle":"Good Lord Willin and the Creeks Don’t Rise1",
"slink":"Good Lord Willin and the Creeks Don’t Rise.mp3",
"slyric":"",
"duration": "4:47"
},
]
},
{
"imageUrl": "genpx2.png",
"artist": "Artist2",
"name": "Second Album",
"release":"20xx",
"slist":[
{
"tnumbr": 1,
"stitle":"OldLocal2",
"slink":"OldLocal.mp3",
"duration": "2:47"
},
{
"tnumbr": 2,
"stitle":"AllOverAgain2",
"slink":"AllOverAgain.mp3",
"slyric":"",
"duration": "4:47"
},
{
"tnumbr": 3,
"stitle":"Causes of the Causes2",
"slink":"Causes of the Causes.mp3",
"slyric":"",
"duration": "2:47"
},
{
"tnumbr": 4,
"stitle":"Good Lord Willin and the Creeks Don’t Rise2",
"slink":"Good Lord Willin and the Creeks Don’t Rise.mp3",
"slyric":"",
"duration": "4:47"
},
]
}
]
var lgimg=$(` ${musData.map((cover) => {
return `<img class="lgimg" src="images/music_imgs/covers/${cover.imageUrl}">
`
}).join('')
}`)
var lgcv=$('#lgcv');
$( lgcv ).append( lgimg );
$( dots ).before( lgimg );
var info=$(` ${musData.map(( albuminfo ) =>{return `
<div id="info">
<span class="name">${albuminfo.name}</span>
<span class="artist">${albuminfo.artist}</span>
</div>
`
}).join('')
}`)
var albtitle=$('#albtitle');
$( albtitle ).append( info );
var smimg=$(` ${musData.map((cover) => {
return `<img class="smimg" id="cover" style="width:75px" src="images/music_imgs/covers/${cover.imageUrl}">
`
}).join('')
}`)
var smcv=$('#smcv');
$( smcv ).append( smimg );
var songt = $(`${musData.map(function(tsong) {
return `
<div class="songt">
${tsong.slist.map(function(items){
return`
<div id="title">${items.stitle}</div>
<audio id="audio" src="media/${items.slink}"</audio>
`
}).join('')}
</div>
`
}).join('')
}`);
var audioinfo=$('.audioinfo');
$( audioinfo ).append ( songt );
var albtunes = $(`${musData.map(function(tlist) {
return `
<div class="song-list">
${tlist.slist.map(function(item){
return`
<div id="albtunes" class="activemus"><li>
<span class="numbr">${item.tnumbr}. </span>
<span class="song">${item.stitle}
<audio src="media/${item.slink}" id="audio"></audio></span>
<span class="time">${item.duration}</span>
</li></div>
`
}).join('')}
</div>
`
}).join('')
}`);
var tunes=$('#tunes');
$( tunes ).append ( albtunes );
// <p class="footer">these ${musData.length} albums are previous releases. more releases to come. please check back soon for updates</p>
//albumsimgs, albumnames, tracks
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var lgcv = document.querySelectorAll('.lgimg');
var dots = document.getElementsByClassName("dot");
var smcv = document.querySelectorAll('.smimg');
var info = document.querySelectorAll('#info');
// var songt = document.querySelectorAll('.songt');
var tracks = document.querySelectorAll('.song-list');
if (n > lgcv.length) {slideIndex = 1}
if (n < 1) {slideIndex = lgcv.length}
for (i = 0; i < lgcv.length; i++) {
lgcv[i].style.display = "none";
};
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
};
if (n > smcv.length) {slideIndex = 1}
if (n < 1) {slideIndex = smcv.length}
for (i = 0; i < smcv.length; i++) {
smcv[i].style.display = "none";
};
if (n > info.length) {slideIndex = 1}
if (n < 1) {slideIndex = info.length}
for (i = 0; i < info.length; i++) {
info[i].style.display = "none";
};
// if (n > songt.length) {slideIndex = 1}
// if (n < 1) {slideIndex = songt.length}
// for (i = 0; i < songt.length; i++) {
// songt[i].style.display = "none";
// };
if (n > tracks.length) {slideIndex = 1}
if (n < 1) {slideIndex = tracks.length}
for (i = 0; i < tracks.length; i++) {
tracks[i].style.display = "none";
};
lgcv[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
smcv[slideIndex-1].style.display = "block";
info[slideIndex-1].style.display = "block";
//songt[slideIndex-1].style.display = "inline-block";
tracks[slideIndex-1].style.display = "block";
};
//Hide Pause
$('#pause').hide();
const controls = document.getElementById('controls');
const tune = document.getElementById('tunes');
const activemus = document.getElementsByClassName('activemus');
const playBtn = document.getElementById('play');
const pauseBtn = document.getElementById('pause');
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');
// Song titles
const songs = title
// Keep track of song
let songIndex = 0;
// Initially load song details into DOM
loadSong(songs[songIndex]);
// Update song details
function loadSong(song) {
title.innerText = song;
audio.src = `media/${song}.mp3`;
// tune.src = `media/${song}.mp3`;
// cover.src = `images/music_imgs/covers/${song}.png`;
}
// Play song
function playSong() {
controls.classList.add('play');
// activemus.classList.add('tune');
playBtn.classList.remove('play');
playBtn.classList.add('pause');
audio.play();
}
// Pause song
function pauseSong() {
controls.classList.remove('play');
// activemus.classList.remove('tune');
playBtn.classList.add('play');
playBtn.classList.remove('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 = controls.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);