Sliding-Music-Player-JS/index.html at main · LakshayD02/Sliding-Music-Player-JS · 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
126
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Music Player with Slider | Swiper JS</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body>
    <div class="album-cover">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="/Images/image1.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=aatr_2MstrI&ab_channel=CleanBandit"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="/Images/image2.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=qEnfeG8uBRY&ab_channel=AliciaKeys-Topic"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="/Images/image3.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=h5oHhGlWKf0&ab_channel=MuzikPlay"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="/Images/image4.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=a5uQMwRMHcs&ab_channel=DaftPunkVEVO"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="/Images/image5.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=H5v3kku4y6Q&ab_channel=HarryStylesVEVO"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="/Images/image6.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=9HDEHj2yzew&ab_channel=DuaLipa"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="/Images/image7.png" />
            <div class="overlay">
              <a
                href="https://www.youtube.com/watch?v=tCXGJQYZ9JA&ab_channel=TaylorSwiftVEVO"
                target="_blank"
                ><ion-icon name="logo-youtube"></ion-icon
              ></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="music-player">
      <h1>Title</h1>
      <p>Song Name</p>

      <audio id="song">
        <source src="song-list/Luke-Bergs-Gold.mp3" type="audio/mpeg" />
      </audio>

      <input type="range" value="0" id="progress" />

      <div class="controls">
        <button class="backward">
          <i class="fa-solid fa-backward"></i>
        </button>
        <button class="play-pause-btn">
          <i class="fa-solid fa-play" id="controlIcon"></i>
        </button>
        <button class="forward">
          <i class="fa-solid fa-forward"></i>
        </button>
      </div>
    </div>
  </body>
<!-- partial -->
  <script src='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script><script  src="./script.js"></script>

</body>
</html>