Deezer API > Spotify API

I was making this little music widget for the site to show what I'm listening to on Spotify and have a little preview playable right there and I even threw in a volume slider which did absolutely nothing at the time, it was just there because it looked cool and I wanted to add playback but Spotify’s API is such a headache if you want previews. Authentication, playback restrictions, tokens expiring and whatnot

But Deezer's API is way more straightforward if you just want to fetch songs and play previews, you can hit their search endpoint with a query and get everything you need: song title, artist, and a preview mp3 URL you can easily play

For example, to get a song, you can make a request to this endpoint like this:

https://api.deezer.com/search?q=Heartless Kanye West

It'll return something like:

{
  "data": [
    {
      "id": 123456,
      "title": "Heartless",
      "artist": { "name": "Kanye West" },
      "preview": "https://cdns-preview-xx.dzcdn.net/stream/c-xxxxxx.mp3"
    }
  ]
}

Then with that you can just use that preview URL in an <audio> element or with JavaScript to play it on your site. Here's a tiny example:

<div id="song-widget"></div>
 
<script>
async function fetchSongPreview(query) {
  const res = await fetch(`https://api.deezer.com/search?q=${encodeURIComponent(query)}`);
  const data = await res.json();
  const song = data.data[0];
  
  if (!song) return;
  
  const container = document.getElementById('song-widget');
  container.innerHTML = `
    <h3>${song.title} - ${song.artist.name}</h3>
    <audio controls src="${song.preview}"></audio>
  `;
}
 
fetchSongPreview('Heartless Kanye West');
</script>

Now I have a playable preview thank you Deezer for having a nice endpoint that doesn't require auth and stupid stuff