Music-Player/index.html at main · prince-unk/Music-Player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/Project.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
</head>
<body>
    <div class="background">
        <div class="container">
            <div class="top">
                <h1 id="title">Bon Appetit</h1>
                <h2 id="artist">Katy Perry</h2>
            </div>
            <div class="middle">
                <h id="anime"><img src="img/BON_APPETIT.jpg" alt=""/></h>
            </div>
            <div class="bottom">
                <div class="bar" id="bar"></div>
                <audio class="audio" id="audio" src="songs/BON_APPETIT.mp3"></audio>
                <!-- progress bar -->
                <div class="progressbar_container" id="progressbar_container">
                    <div class="progress_duration_meter">
                        <div id="current_time">0:00</div>
                        <div id="duration"></div>
                    </div>
                    <div class="progress_div" id="progress_div">
                        <div class="progress" id="progress"></div>
                    </div>
                </div>
                <div id="music_controls">
                    <h onclick="previous"><i class="fas fa-backward" id="prev" title="Previous"></i></h>
                    <h onclick="play"><i class="fas fa-play" id="play" title="Play"></i></h>
                    <h onclick="next"><i class="fas fa-forward" id="next" title="Next"></i></h>
                </div>
            </div>
        </div>
    </div>
    <script>
        const music = document.querySelector("audio");
        const img = document.querySelector("img");
        const artist = document.getElementById("artist");
        const title = document.getElementById("title");
        const previous = document.getElementById("prev");
        const next = document.getElementById("next");
        const songs = [
            {
                name: "BON_APPETIT",
                title: "Bon Appétit",
                artist: "Katy Perry",
            },
            {
                name: "Hey_Mama",
                title: "Hey Mama",
                artist: "David Guetta",
            },
            {
                name: "Electric",
                title: "Electric",
                artist: "Katy Perry",
            },
            {
                name: "Closer",
                title: "Closer ft. Halsey",
                artist: "The Chainsmokers",
            },
            {
                name: "Dont_Let_Me_Down"    ,
                title: "Don't Let Me Down",
                artist: "The Chainsmokers",
            },
        ]
        let isplaying = false;
        // for play function
        const playmusic =  () => {
            isplaying = true;
            music.play();
            play.classList.replace("fa-play", "fa-pause");
            img.classList.add("anime");
        };
        // for pause function
        const pausemusic = () => {
            isplaying = false;
            music.pause();
            play.classList.replace("fa-pause", "fa-play");
            img.classList.remove("anime");
        };
        play.addEventListener("click", () => {
        // this
            /*if (isplaying) {
                pausemusic();
            } else {
                playmusic();
            }*/
        // and this works same
            isplaying ? pausemusic() : playmusic();
        });

        // changing the music data
        const loadSong = (songs) => {
            title.textContent = songs.title;
            artist.textContent = songs.artist;
            music.src = "songs/" +songs.name + ".mp3";
            img.src = "img/" +songs.name + ".jpg";
        };
        // loadSong(songs[3]);
        songIndex = 0;
        const nextsong = () => {
            songIndex = (songIndex + 1) % songs.length;
            loadSong(songs[songIndex]);
            playmusic();
        }
        const prevsong = () => {
            songIndex = (songIndex - 1 + songs.length) % songs.length;
            loadSong(songs[songIndex]);
            playmusic();
        }
        next.addEventListener("click", nextsong);
        prev.addEventListener("click", prevsong);
    </script>
</body>
</html>