JSPlayer/index.html at main · matt-norris/JSPlayer · 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSPlayer by Matt Norris</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100">
  <nav class="bg-gray-800 shadow-md py-4 px-6">
    <div class="flex justify-between items-center">
      <div class="text-xl font-bold text-gray-200">
        JSPlayer
      </div>
      <ul class="flex items-center space-x-4">
        <li><a href="index.html" class="text-gray-300 hover:text-gray-100">Home</a></li>
        <li><a href="about.html" class="text-gray-300 hover:text-gray-100">About</a></li>
        <li><a href="#" class="text-gray-300 hover:text-gray-100">Contact</a></li>
      </ul>
    </div>
  </nav>

  <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 -mt-5">
    <div class="glassy shadow-xl rounded-lg p-8 w-full max-w-md" id="player-card">
      <div class="carousel-container relative">
        <div class="carousel flex">
          <!-- Carousel item 1 -->
          <div class="carousel-item active" id="carousel-item-1">
            <div class="player">
              <!-- Player info, album cover, controls, and volume bar for the first song -->
              <div class="player-info mb-2">
                <h2 class="text-xl font-semibold mb-1">All Star</h2>
                <h3 class="text-md text-gray-700 mb-1">Smash Mouth X Juice WRLD</h3>
                <h4 class="text-sm text-gray-500">AI Music</h4>
              </div>
              <div class="album-cover mb-6">
                <img src="/images/cover2.png" alt="Album cover">
              </div>
              <!-- You can keep the controls and volume bar the same for all items -->
            </div>
          </div>
          <!-- Carousel item 2 -->
          <div class="carousel-item" id="carousel-item-2">
            <div class="player">
              <!-- Player info, album cover, controls, and volume bar for the second song -->
              <div class="player-info mb-2">
                <h2 class="text-xl font-semibold mb-1">Check Yes</h2>
                <h3 class="text-md text-gray-700 mb-1">We The Kings X Juice WRLD</h3>
                <h4 class="text-sm text-gray-500">AI Music</h4>
              </div>
              <div class="album-cover mb-6">
                <img src="/images/cover1.png" alt="Album cover">
              </div>
              <!-- You can keep the controls and volume bar the same for all items -->
            </div>
          </div>
          <!-- Carousel item 3 -->
          <div class="carousel-item" id="carousel-item-3">
            <div class="player">
              <!-- Player info, album cover, controls, and volume bar for the third song -->
              <div class="player-info mb-2">
                <h2 class="text-xl font-semibold mb-1">I'm Yours</h2>
                <h3 class="text-md text-gray-700 mb-1">Jason Mraz X Juice WRLD</h3>
                <h4 class="text-sm text-gray-500">AI Music</h4>
              </div>
              <div class="album-cover mb-6">
                <img src="/images/cover3.png" alt="Album cover">
              </div>
              <!-- You can keep the controls and volume bar the same for all items -->
            </div>
          </div>
           <!-- Carousel item 4 -->

               <!-- Carousel item 5 -->
               <div class="carousel-item" id="carousel-item-4">
                <div class="player">
                  <!-- Player info, album cover, controls, and volume bar for the third song -->
                  <div class="player-info mb-2">
                    <h2 class="text-xl font-semibold mb-1">Last Night</h2>
                    <h3 class="text-md text-gray-700 mb-1">Morgan Wallen X Juice WRLD</h3>
                    <h4 class="text-sm text-gray-500">AI Music</h4>
                  </div>
                  <div class="album-cover mb-6">
                    <img src="/images/cover4.png" alt="Album cover">
                  </div>
                  <!-- You can keep the controls and volume bar the same for all items -->
                </div>
              </div>
        </div>

      </div>
      <div class="controls mb-2">


        <button id="play-pause" class="control-button">
          <i class="fa-regular fa-music"></i>
        </button>

      </div>
      <div class="volume-bar mb-2">
        <input id="volume-slider" type="range" min="0" max="100" value="100" class="w-full">
      </div>
    </div>
  </div>
  <div class=" flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 -mt-5">
    <div class="glassy shadow-xl rounded-lg p-8 w-full max-w-md" id="audio-visual">
      <div class="player-info mb-2">
        <h2 class="text-xl font-semibold mb-1">Visualizer</h2>
        <canvas id="audio-visualizer" width="400" height="200"></canvas>
      </div>
    </div>
    </div>


    <div class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 -mt-5" >
      <div class="glassy shadow-xl rounded-lg p-8 w-full max-w-md" id="song-lyrics-box">
        <div id="song-lyrics" class="lyrics-container"></div>
        <div class="player-info mb-2">
          <h2 class="text-xl font-semibold">Lyrics</h2>
        </div>


      </div>
    </div>
      </div>
      </div>

  <button class="carousel-control prev absolute left-0 top-1/2 -translate-y-1/2">
    <i class="fas fa-chevron-left"></i>
  </button>
  <button class="carousel-control next absolute right-0 top-1/2 -translate-y-1/2">
    <i class="fas fa-chevron-right"></i>
  </button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
  <script src="https://kit.fontawesome.com/41e82a231f.js" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.min.js"></script>
  <script src="app.js"></script>

  <script>
    // The dragElement function sets up the drag-and-drop functionality for an element
    function dragElement(element) {
      let pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
      element.onmousedown = dragMouseDown;

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        element.style.top = element.offsetTop - pos2 + "px";
        element.style.left = element.offsetLeft - pos1 + "px";
      }

      function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }

    // Make the player card draggable
    const playerCard = document.getElementById("player-card");
    playerCard.style.position = "absolute"; // Set position to absolute for proper dragging
    dragElement(playerCard);

    const audioV = document.getElementById("audio-visual");
    audioV.style.position = "absolute"; // Set position to absolute for proper dragging
    dragElement(audioV);

    const lyricsV = document.getElementById("song-lyrics-box");
    lyricsV.style.position = "absolute"; // Set position to absolute for proper dragging
    dragElement(lyricsV);
  </script>


</body>
</html>