Song Sorting.html

<!DOCTYPE html>
<html>
<head>
    <title>Sort Songs by BPM</title>
</head>
<body>

<h1>Sort Songs by BPM</h1>
<input type="text" id="songLink" placeholder="Enter YouTube/Spotify URL">
<button onclick="addSong()">Add Song</button>
<button onclick="sortSongs()">Sort Songs</button>

<ul id="songList"></ul>

<script>
const songList = document.getElementById('songList');
let songs = [];

async function addSong() {
  const url = document.getElementById('songLink').value.trim();

  if (isValidUrl(url)) {
    try {
      const { title, artist, bpm } = await fetchSongInfo(url);
      songs.push({ title, artist, bpm, url });
      displaySongs();
    } catch (error) {
      console.error('Error fetching song info:', error);
      alert('Error fetching song info. Please try again later.');
    }
  } else {
    alert('Invalid URL. Please enter a valid YouTube or Spotify URL.');
  }
}

function isValidUrl(input) {
  const urlPattern = /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be|open\.spotify\.com)/;
  return urlPattern.test(input);
}

async function fetchSongInfo(url) {
  const youtubePattern = /(?:\/watch\?v=|youtu\.be\/)([\w-]{11})/;
  const spotifyPattern = /(?:\/track\/|open\.spotify\.com\/track\/)([\w\d]+)/;

  let title = null;
  let artist = null;
  let bpm = null;

  const youtubeMatch = url.match(youtubePattern);
  const spotifyMatch = url.match(spotifyPattern);

  if (youtubeMatch) {
    const videoId = youtubeMatch[1];
    const response = await fetch(`https://www.googleapis.com/youtube/v3/videos?id=${videoId}&part=snippet&key=YOUR_YOUTUBE_API_KEY`);
    const data = await response.json();
    title = data.items[0]?.snippet.title;
    artist = 'Unknown'; // YouTube doesn't provide artist info
  } else if (spotifyMatch) {
    const trackId = spotifyMatch[1];
    const response = await fetch(`https://api.spotify.com/v1/tracks/${trackId}`);
    const data = await response.json();
    title = data.name;
    artist = data.artists.map(artist => artist.name).join(', ');
  }

  return { title, artist, bpm };
}

function sortSongs() {
  songs.sort((a, b) => a.bpm - b.bpm);
  displaySongs();
}

function displaySongs() {
  songList.innerHTML = '';

  songs.forEach(song => {
    const listItem = document.createElement('li');
    const link = document.createElement('a');
    link.href = song.url;
    link.textContent = `${song.title ? `${song.title} - ` : ''}${song.artist ? `${song.artist} - ` : ''}${song.bpm ? `BPM: ${song.bpm}` : 'Unknown BPM'}`;
    listItem.appendChild(link);
    songList.appendChild(listItem);
  });
}
</script>

</body>
</html>