1+ const image = document . getElementById ( "cover" ) ;
2+ const title = document . getElementById ( "music-title" ) ;
3+ const artist = document . getElementById ( "music-artist" ) ;
4+ const currentTimeEl = document . getElementById ( "current-time" ) ;
5+ const durationEl = document . getElementById ( "duration" ) ;
6+ const progress = document . getElementById ( "progress" ) ;
7+ const playerProgress = document . getElementById ( "player-progress" ) ;
8+ const prevBtn = document . getElementById ( "prev" ) ;
9+ const nextBtn = document . getElementById ( "next" ) ;
10+ const playBtn = document . getElementById ( "play" ) ;
11+ const background = document . getElementById ( "bg-img" ) ;
12+
13+ const music = new Audio ( ) ;
14+
15+ const songs = [
16+ {
17+ path : "assets/1.mp3" ,
18+ displayName : "Tokyo Cafe" ,
19+ cover : "assets/1.jpg" ,
20+ artist : "TVARI" ,
21+ } ,
22+ {
23+ path : "assets/2.mp3" ,
24+ displayName : "The Long Dark" ,
25+ cover : "assets/2.jpg" ,
26+ artist : "Naeu" ,
27+ } ,
28+ {
29+ path : "assets/3.mp3" ,
30+ displayName : "Justhea" ,
31+ cover : "assets/3.jpg" ,
32+ artist : "Summer Breeze" ,
33+ } ,
34+ ] ;
35+
36+ let musicIndex = 0 ;
37+ let isPlaying = false ;
38+
39+ function togglePlay ( ) {
40+ if ( isPlaying ) {
41+ pauseMusic ( ) ;
42+ } else {
43+ playMusic ( ) ;
44+ }
45+ }
46+
47+ function playMusic ( ) {
48+ isPlaying = true ;
49+ playBtn . classList . replace ( "fa-play" , "fa-pause" ) ;
50+ playBtn . setAttribute ( "title" , "Pause" ) ;
51+ music . play ( ) ;
52+ }
53+
54+ function pauseMusic ( ) {
55+ isPlaying = false ;
56+ playBtn . classList . replace ( "fa-pause" , "fa-play" ) ;
57+ playBtn . setAttribute ( "title" , "Play" ) ;
58+ music . pause ( ) ;
59+ }
60+
61+ function loadMusic ( song ) {
62+ music . src = song . path ;
63+ title . textContent = song . displayName ;
64+ artist . textContent = song . artist ;
65+ image . src = song . cover ;
66+ background . src = song . cover ;
67+ }
68+
69+ function changeMusic ( direction ) {
70+ musicIndex = ( musicIndex + direction + songs . length ) % songs . length ;
71+ loadMusic ( songs [ musicIndex ] ) ;
72+ playMusic ( ) ;
73+ }
74+
75+ function updateProgressBar ( ) {
76+ const { duration, currentTime } = music ;
77+ const progressPercent = ( currentTime / duration ) * 100 ;
78+ progress . style . width = `${ progressPercent } ;
79+
80+ const formatTime = ( time ) => String ( Math . floor ( time ) ) . padStart ( 2 , "0" ) ;
81+ durationEl . textContent = `${ formatTime ( duration / 60 ) } ${ formatTime ( duration % 60 ) } ;
82+ currentTimeEl . textContent = `${ formatTime ( currentTime / 60 ) } ${ formatTime ( currentTime % 60 ) } ;
83+ }
84+
85+ function setProgressBar ( e ) {
86+ const width = playerProgress . clientWidth ;
87+ const clickX = e . offsetX ;
88+ music . currentTime = ( clickX / width ) * music . duration ;
89+ }
90+
91+ playBtn . addEventListener ( "click" , togglePlay ) ;
92+ prevBtn . addEventListener ( "click" , ( ) => changeMusic ( - 1 ) ) ;
93+ nextBtn . addEventListener ( "click" , ( ) => changeMusic ( 1 ) ) ;
94+ music . addEventListener ( "ended" , ( ) => changeMusic ( 1 ) ) ;
95+ playerProgress . addEventListener ( "click" , setProgressBar ) ;
96+ music . addEventListener ( "timeupdate" , updateProgressBar ) ;
97+
98+ loadMusic ( songs [ musicIndex ] ) ;
0 commit comments