ACP

Assignment No (1)

Submitted By
Muhammad Ali

Submitted To
Ali Haider

BS (IT)
6th Semester
Spring-2022

Riphah International University,

Faisalabad Campus
Music Player Application HTML, CSS , JAVASCRIPT

Creating a main parent div to make music player card

Here I style all divs in CSS and buttons and background color
Now adding next and previous functionality using javascript(onclick) functions to change music
when buttons is clicked
After next and previous we move to change music time functionality

To reset the values such on card add a specific funtion to perform this operation
Calling function and to control the time duration according to range input
Creating a function for time duration

Functions:

Now_playing

For Now Playing

let now_playing = document.querySelector('.now-playing');

track_art

For tracking the Art

let track_art = document.querySelector('.track-art');

track_name

For tracking the name

let track_name = document.querySelector('.track-name');

 track_artist

For tracking the Artist

let track_artist = document.querySelector('.track-artist');

playpause_btn

For Play and Pause Button

let playpause_btn = document.querySelector('.playpause-track');

next_btn

For Playing the next Music

let next_btn = document.querySelector('.next-track');

prev_btn

For Playing the previous music

let prev_btn = document.querySelector('.prev-track');

seek_slider
For Slider which shows the music running Status
let seek_slider = document.querySelector('.seek_slider');
volume_slider
For Volume increasing and decreasing
let volume_slider = document.querySelector('.volume_slider');
curr_time
For current time of the music
let curr_time = document.querySelector('.current-time');
total_duration
Total duration of the music
let total_duration = document.querySelector('.total-duration');
randomIcon
For Playing Random Music
let randomIcon = document.querySelector('.fa-random');
curr_track
Current track of the music
let curr_track = document.createElement('audio');
Functions
For tracking the index. function loadTrack(track_index) For background color.
I have use bg colors for background function random_bg_color()
For resetting the time:
function reset(){ curr_time.textContent = "00:00";
total_duration.textContent = "00:00";

seek_slider.value = 0;
}
isRandom ? pauseRandom() : playRandom();
}
For Playing random music
function playRandom(){ isRandom = true;
randomIcon.classList.add('randomActive');
}
For Pausing random music
function pauseRandom(){ isRandom = false;
randomIcon.classList.remove('randomActive');
}
For repeating the track
function repeatTrack(){
let current_index = track_index; loadTrack(current_index); playTrack();
}
For time Slider
function seekTo(){
let seekto = curr_track.duration * (seek_slider.value / 100); curr_track.currentTime = seekto;
}
For Volume Slider
function setVolume(){
curr_track.volume = volume_slider.value / 100; curr_track.currentvolume = setVolume;
}
For updating the position of slider:
function setUpdate()

Output: