1+ let now_playing = document . querySelector ( '.now-playing' ) ;
2+ let track_art = document . querySelector ( '.track-art' ) ;
3+ let track_name = document . querySelector ( '.track-name' ) ;
4+ let track_artist = document . querySelector ( '.track-artist' ) ;
5+
6+ let playpause_btn = document . querySelector ( '.playpause-track' ) ;
7+ let next_btn = document . querySelector ( '.next-track' ) ;
8+ let prev_btn = document . querySelector ( '.prev-track' ) ;
9+
10+ let seek_slider = document . querySelector ( '.seek_slider' ) ;
11+ let curr_time = document . querySelector ( '.current-time' ) ;
12+ let total_duration = document . querySelector ( '.total-duration' ) ;
13+ let randomIcon = document . querySelector ( '.fa-random' ) ;
14+ let curr_track = document . createElement ( 'audio' ) ;
15+
16+ let track_index = 0 ;
17+ let isPlaying = false ;
18+ let isRandom = false ;
19+ let updateTimer ;
20+
21+
22+ const music_list = [
23+ {
24+ img : './images/jhms2.png' ,
25+ name : 'Hawayein' ,
26+ artist : 'Jab Harry Met Sejal - Arjit Singh' ,
27+ music : 'music/Hawayein.mp3'
28+ } ,
29+ {
30+ img : './images/ddlj.png' ,
31+ name : 'Ho Gaya Hai Tujhko' ,
32+ artist : 'Ddlj - Lata Mangeshkar' ,
33+ music : 'music/Ddlj.mp3'
34+ } ,
35+ {
36+ img : './images/kh3.png' ,
37+ name : 'Har gadhi badal' ,
38+ artist : 'Kal Ho Naa Ho - Sonu nigam' ,
39+ music : 'music/Kalhonaho.mp3'
40+ } ,
41+ {
42+ img : './images/rab.png' ,
43+ name : 'Tujh Mein Rab Dikh' ,
44+ artist : 'Rab Ne Bana Di Jodi-Rathod' ,
45+ music : 'music/Tujh Mein Rab Dikhta Hai - Hindi Song.mp3'
46+ } ,
47+
48+ {
49+ img : './images/ajab.png' ,
50+ name : 'Ankhon Mein Teri' ,
51+ artist : 'Om Shanti Om - KK' ,
52+ music : 'music/Ajabsi.mp3'
53+ } ,
54+ {
55+ img : './images/titli2.png' ,
56+ name : 'Titli' ,
57+ artist : 'Chennai Express - Chinmayi' ,
58+ music : 'music/TITLI- Chennai Express.mp3'
59+ }
60+ ] ;
61+
62+ loadTrack ( track_index ) ;
63+
64+ function loadTrack ( track_index ) {
65+ clearInterval ( updateTimer ) ;
66+ reset ( ) ;
67+
68+ curr_track . src = music_list [ track_index ] . music ;
69+ curr_track . load ( ) ;
70+
71+ track_art . style . backgroundImage = "url(" + music_list [ track_index ] . img + ")" ;
72+ track_name . textContent = music_list [ track_index ] . name ;
73+ track_artist . textContent = music_list [ track_index ] . artist ;
74+ now_playing . textContent = "Shahrukh Playlist " + ( track_index + 1 ) + " / " + music_list . length ;
75+
76+ updateTimer = setInterval ( setUpdate , 1000 ) ;
77+
78+ curr_track . addEventListener ( 'ended' , nextTrack ) ;
79+ }
80+
81+ function reset ( ) {
82+ curr_time . textContent = "00:00" ;
83+ total_duration . textContent = "00:30" ;
84+ seek_slider . value = 0 ;
85+ }
86+ function randomTrack ( ) {
87+ isRandom ? pauseRandom ( ) : playRandom ( ) ;
88+ }
89+ function playRandom ( ) {
90+ isRandom = true ;
91+ }
92+ function pauseRandom ( ) {
93+ isRandom = false ;
94+ }
95+ function repeatTrack ( ) {
96+ let current_index = track_index ;
97+ loadTrack ( current_index ) ;
98+ playTrack ( ) ;
99+ }
100+ function playpauseTrack ( ) {
101+ isPlaying ? pauseTrack ( ) : playTrack ( ) ;
102+ }
103+ function playTrack ( ) {
104+ curr_track . play ( ) ;
105+ isPlaying = true ;
106+ track_art . classList . add ( 'rotate' ) ;
107+ playpause_btn . innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>' ;
108+ }
109+ function pauseTrack ( ) {
110+ curr_track . pause ( ) ;
111+ isPlaying = false ;
112+ track_art . classList . remove ( 'rotate' ) ;
113+ playpause_btn . innerHTML = '<i class="fa fa-play-circle fa-5x"></i>' ;
114+ }
115+ function nextTrack ( ) {
116+ if ( track_index < music_list . length - 1 && isRandom === false ) {
117+ track_index += 1 ;
118+ } else if ( track_index < music_list . length - 1 && isRandom === true ) {
119+ let random_index = Number . parseInt ( Math . random ( ) * music_list . length ) ;
120+ track_index = random_index ;
121+ } else {
122+ track_index = 0 ;
123+ }
124+ loadTrack ( track_index ) ;
125+ playTrack ( ) ;
126+ }
127+ function prevTrack ( ) {
128+ if ( track_index > 0 ) {
129+ track_index -= 1 ;
130+ } else {
131+ track_index = music_list . length - 1 ;
132+ }
133+ loadTrack ( track_index ) ;
134+ playTrack ( ) ;
135+ }
136+ function seekTo ( ) {
137+ let seekto = curr_track . duration * ( seek_slider . value / 100 ) ;
138+ curr_track . currentTime = seekto ;
139+ }
140+ function setUpdate ( ) {
141+ let seekPosition = 0 ;
142+ if ( ! isNaN ( curr_track . duration ) ) {
143+ seekPosition = curr_track . currentTime * ( 100 / curr_track . duration ) ;
144+ seek_slider . value = seekPosition ;
145+
146+ let currentMinutes = Math . floor ( curr_track . currentTime / 60 ) ;
147+ let currentSeconds = Math . floor ( curr_track . currentTime - currentMinutes * 60 ) ;
148+ let durationMinutes = Math . floor ( curr_track . duration / 60 ) ;
149+ let durationSeconds = Math . floor ( curr_track . duration - durationMinutes * 60 ) ;
150+
151+ if ( currentSeconds < 10 ) { currentSeconds = "0" + currentSeconds ; }
152+ if ( durationSeconds < 10 ) { durationSeconds = "0" + durationSeconds ; }
153+ if ( currentMinutes < 10 ) { currentMinutes = "0" + currentMinutes ; }
154+ if ( durationMinutes < 10 ) { durationMinutes = "0" + durationMinutes ; }
155+
156+ curr_time . textContent = currentMinutes + ":" + currentSeconds ;
157+ // total_duration.textContent = durationMinutes + ":" + durationMinutes;
158+ }
159+ }
0 commit comments