app.js

const image_input = document.querySelector("image_input");
var uploaded_image = ""
var audio, playbtn, mutebtn;



function initAudioPlayer(){
    audio = new Audio();
    audio.src = "songs/Guns N’ Roses - Sweet Child O’ Mine.mp3";
    audio.loop = true;
    audio.play();
    //set object reference
    playbtn = document.getElementById("playbtn");
    mutebtn = document.getElementById("mutebtn");
    //add event handling
    playbtn.addEventListener("click",playPause);
    mutebtn.addEventListener("click",mute);

    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.style.background = "url(pause50.png) no-repeat";
        } else { 
            audio.pause();
            playbtn.style.background = "url(play50.png) no-repeat";
        }
    }

    function mute(){
        if(audio.muted){
            audio.muted = false;
            mutebtn.style.background = "url(unmute.png) no-repeat";
        } else {
            audio.muted = true;
            mutebtn.style.background = "url(mute.png) no-repeat";
        }
    }
}

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

   
    burger.addEventListener('click',() => {
        // toggle nav
        nav.classList.toggle('nav-active');

        //animate links
        navLinks.forEach((link,index) => {
            if(link.style.animation){
                link.style.animation = '';
            } else{
                link.style.animation = 'navLinkFade 0.5s ease forwards ${ index / 7 + 1.25}s';
            }
        });
        //burger animation
        burger.classList.toggle('toggle');
    });
}

document.onload = navSlide;
//all functions go inside of this so it can call all of the smaller stuff when ran
const app = () =>{
    navSlide();
}


let now_playing = document.querySelector('.now-playing');
let track_art = document.querySelector('.track-art');
let track_name = document.querySelector('.track-name');
let track_artist = document.querySelector('.track-artist');

let playpause_btn = document.querySelector('.playpause-track');
let next_btn = document.querySelector('.next-track');
let prev_btn = document.querySelector('.prev-track');

let seek_slider = document.querySelector('.seek_slider');
let volume_slider = document.querySelector('.volume_slider');
let curr_time = document.querySelector('.current-time');
let total_duration = document.querySelector('.total-duration');
let wave = document.getElementById('wave');
let randomIcon = document.querySelector('.fa-random');
let curr_track = document.createElement('audio');

let track_index = 0;
let isPlaying = false;
let isRandom = false;
let updateTimer;

const music_list = [
    {
        img : 'img/icon.png',
        name : 'Ghost Town',
        artist : 'Adam Lambert',
        music : 'songs/Adam Lambert - Ghost Town.mp3'
    },
    {
        img : 'img/icon.png',
        name : 'Drip',
        artist : 'Cardi B ft. Migos',
        music : 'songs/Cardi B - Drip ft. Migos.mp3'
    },
    {
        img : 'img/future.png',
        name : 'I Be U',
        artist : 'Future',
        music : 'songs/Future - I Be U.mp3'
    },
    {
        img : 'img/icon.png',
        name : 'Real Friends',
        artist : 'Kanye',
        music : 'songs/Kanye - Real Friends.mp3'
    },
    {
        img : 'img/future.png',
        name : 'Life is Good',
        artist : 'Future ft. Drake',
        music : 'sonns/Future - Life Is Good ft. Drake.mp3'
    },
    {
        img : 'img/future.png',
        name : 'Feed me Dope',
        artist : 'Future',
        music : 'songs/Future - Feed Me Dope.mp3'
    },
    {
        img : 'img/icon.png',
        name : 'Out of my League',
        artist : 'Fitz and the Tantrums',
        music : 'songs/Fitz and the Tantrums - Out of My League.mp3'
    },
    {
        img : 'img/future.png',
        name : 'Straight Up',
        artist : 'Future',
        music : 'songs/Future - Straight Up.mp3'
    },
    {
        img : 'icon.png',
        name : 'Real Friends',
        artist : 'Kanye',
        music : 'songs/Kanye - Real Friends.mp3'
    },
    {
        img : 'icon.png',
        name : 'Real Friends',
        artist : 'Kanye',
        music : 'songs/Kanye - Real Friends.mp3'
    },
];

loadTrack(track_index);

function loadTrack(track_index){
    clearInterval(updateTimer);
    reset();

    curr_track.src = music_list[track_index].music;
    curr_track.load();

    track_art.style.backgroundImage = "url(" + music_list[track_index].img + ")";
    track_name.textContent = music_list[track_index].name;
    track_artist.textContent = music_list[track_index].artist;
    now_playing.textContent = "Playing music " + (track_index + 1) + " of " + music_list.length;

    updateTimer = setInterval(setUpdate, 1000);

    curr_track.addEventListener('ended', nextTrack);
    random_bg_color();
}

function random_bg_color(){
    let hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e'];
    let a;

    function populate(a){
        for(let i=0; i<6; i++){
            let x = Math.round(Math.random() * 14);
            let y = hex[x];
            a += y;
        }
        return a;
    }
    let Color1 = populate('#');
    let Color2 = populate('#');
    var angle = 'to right';

    let gradient = 'linear-gradient(' + angle + ',' + Color1 + ', ' + Color2 + ")";
    document.body.style.background = gradient;
}
function reset(){
    curr_time.textContent = "00:00";
    total_duration.textContent = "00:00";
    seek_slider.value = 0;
}
function randomTrack(){
    isRandom ? pauseRandom() : playRandom();
}
function playRandom(){
    isRandom = true;
    randomIcon.classList.add('randomActive');
}
function pauseRandom(){
    isRandom = false;
    randomIcon.classList.remove('randomActive');
}
function repeatTrack(){
    let current_index = track_index;
    loadTrack(current_index);
    playTrack();
}
function playpauseTrack(){
    isPlaying ? pauseTrack() : playTrack();
}
function playTrack(){
    curr_track.play();
    isPlaying = true;
    track_art.classList.add('rotate');
    wave.classList.add('loader');
    playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
}
function pauseTrack(){
    curr_track.pause();
    isPlaying = false;
    track_art.classList.remove('rotate');
    wave.classList.remove('loader');
    playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';
}
function nextTrack(){
    if(track_index < music_list.length - 1 && isRandom === false){
        track_index += 1;
    }else if(track_index < music_list.length - 1 && isRandom === true){
        let random_index = Number.parseInt(Math.random() * music_list.length);
        track_index = random_index;
    }else{
        track_index = 0;
    }
    loadTrack(track_index);
    playTrack();
}
function prevTrack(){
    if(track_index > 0){
        track_index -= 1;
    }else{
        track_index = music_list.length -1;
    }
    loadTrack(track_index);
    playTrack();
}
function seekTo(){
    let seekto = curr_track.duration * (seek_slider.value / 100);
    curr_track.currentTime = seekto;
}
function setVolume(){
    curr_track.volume = volume_slider.value / 100;
}
function setUpdate(){
    let seekPosition = 0;
    if(!isNaN(curr_track.duration)){
        seekPosition = curr_track.currentTime * (100 / curr_track.duration);
        seek_slider.value = seekPosition;

        let currentMinutes = Math.floor(curr_track.currentTime / 60);
        let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
        let durationMinutes = Math.floor(curr_track.duration / 60);
        let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

        if(currentSeconds < 10) {currentSeconds = "0" + currentSeconds; }
        if(durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
        if(currentMinutes < 10) {currentMinutes = "0" + currentMinutes; }
        if(durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }

        curr_time.textContent = currentMinutes + ":" + currentSeconds;
        total_duration.textContent = durationMinutes + ":" + durationSecondss;
    }
}

app()