xFlip/aaplay.html at main · Timeness/xFlip · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JioSaavn Player</title>
  <link href="https://fonts.googleapis.com/css2?family=Signika&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <style>
    body {
      font-family: 'Signika', sans-serif;
    }
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 3px;
    }
  </style>
</head>
<body class="bg-black text-white min-h-screen flex flex-col items-center p-4">

  <h1 class="text-3xl font-bold mb-6 bg-gradient-to-r from-lime-400 to-cyan-500 text-transparent bg-clip-text">JioSaavn Music Player</h1>

  <div class="w-full max-w-xl">
    <input id="searchInput" type="text" placeholder="Search songs, albums..." class="w-full p-3 bg-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400 mb-4 text-white">
    <div id="results" class="space-y-4"></div>
  </div>

  <div id="player" class="fixed bottom-0 left-0 right-0 bg-gray-900 p-4 shadow-2xl flex items-center justify-between">
    <img id="cover" src="" alt="Cover" class="w-14 h-14 rounded-md mr-4 hidden">
    <div class="flex-1">
      <div id="title" class="font-semibold text-lg"></div>
      <div id="artist" class="text-sm text-gray-400"></div>
      <div class="flex items-center mt-2">
        <span id="currentTime" class="text-xs w-12">00:00</span>
        <input id="progress" type="range" value="0" min="0" max="100" class="flex-1 mx-2">
        <span id="duration" class="text-xs w-12">00:00</span>
      </div>
    </div>
    <div class="flex items-center space-x-4 ml-4">
      <button id="prevBtn"><iconify-icon icon="ph:skip-back-fill" class="text-white text-2xl"></iconify-icon></button>
      <button id="playBtn"><iconify-icon icon="ph:play-fill" class="text-white text-2xl"></iconify-icon></button>
      <button id="nextBtn"><iconify-icon icon="ph:skip-forward-fill" class="text-white text-2xl"></iconify-icon></button>
    </div>
  </div>

  <audio id="audio" preload="metadata"></audio>

  <script>
    const searchInput = document.getElementById('searchInput');
    const results = document.getElementById('results');
    const audio = document.getElementById('audio');
    const title = document.getElementById('title');
    const artist = document.getElementById('artist');
    const cover = document.getElementById('cover');
    const playBtn = document.getElementById('playBtn');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    const currentTimeEl = document.getElementById('currentTime');
    const durationEl = document.getElementById('duration');
    const progress = document.getElementById('progress');

    let playlist = [];
    let currentIndex = 0;
    let isPlaying = false;

    async function searchSongs(query) {
      const res = await fetch(`https://saavn.dev/api/search/songs?query=${encodeURIComponent(query)}`);
      const data = await res.json();
      playlist = data.data.results;
      renderResults();
    }

    function renderResults() {
      results.innerHTML = '';
      playlist.forEach((song, index) => {
        const div = document.createElement('div');
        div.className = "flex items-center bg-gray-800 p-3 rounded-lg cursor-pointer hover:bg-gray-700 transition";
        div.innerHTML = `
          <img src="${song.image[1].link}" class="w-12 h-12 rounded-md mr-4">
          <div>
            <div class="font-semibold">${song.name}</div>
            <div class="text-sm text-gray-400">${song.primaryArtists}</div>
          </div>
        `;
        div.onclick = () => playSong(index);
        results.appendChild(div);
      });
    }

    async function playSong(index) {
      const song = playlist[index];
      currentIndex = index;
      const res = await fetch(`https://saavn.dev/api/songs/${song.id}`);
      const fullData = await res.json();
      const link = fullData.data[0].downloadUrl[4].link;

      audio.src = link;
      title.textContent = song.name;
      artist.textContent = song.primaryArtists;
      cover.src = song.image[1].link;
      cover.classList.remove('hidden');

      audio.play();
      isPlaying = true;
      updatePlayButton();
    }

    function updatePlayButton() {
      playBtn.innerHTML = isPlaying
        ? `<iconify-icon icon="ph:pause-fill" class="text-white text-2xl"></iconify-icon>`
        : `<iconify-icon icon="ph:play-fill" class="text-white text-2xl"></iconify-icon>`;
    }

    playBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
      } else {
        audio.play();
        isPlaying = true;
      }
      updatePlayButton();
    };

    nextBtn.onclick = () => {
      if (currentIndex < playlist.length - 1) playSong(currentIndex + 1);
    };

    prevBtn.onclick = () => {
      if (currentIndex > 0) playSong(currentIndex - 1);
    };

    audio.ontimeupdate = () => {
      const current = audio.currentTime;
      const dur = audio.duration;
      currentTimeEl.textContent = formatTime(current);
      durationEl.textContent = formatTime(dur);
      progress.value = dur ? (current / dur) * 100 : 0;
    };

    audio.onended = () => {
      if (currentIndex < playlist.length - 1) playSong(currentIndex + 1);
    };

    progress.oninput = () => {
      if (audio.duration) {
        audio.currentTime = (progress.value / 100) * audio.duration;
      }
    };

    function formatTime(sec) {
      const m = Math.floor(sec / 60);
      const s = Math.floor(sec % 60);
      return `${m}:${s < 10 ? '0' : ''}${s}`;
    }

    searchInput.addEventListener('keypress', e => {
      if (e.key === 'Enter') {
        searchSongs(searchInput.value);
      }
    });
  </script>
</body>
</html>