CODEWITHSUNDEEP
javascriptreactjsspotify
Gutsee
Gutsee

Reputation: 17

(Spotify) Playing a 30 second preview while signed in

Is it possible to play the preview_url on a webapp while signed in and without leaving the page? I found spotify's embedded player that can play the track, however it plays the whole track. I'd like it to only play the 30 second preview of the track. Currently I have:

  <iframe src="https://open.spotify.com/embed?uri=${this.props.track.uri}"
      width="75" height="77" frameborder="0" allowtransparency="true"></iframe>

I have also tried changing uri to preview_url in the src. 

<iframe src={`https://open.spotify.com/embed?preview_url=${this.props.track.preview}`}
    width="75" height="80" frameborder="2" allowtransparency="true"></iframe>

Is there a way to get do this?

Upvotes: 1

Views: 4591

Answers (1)

bennygenel
bennygenel

Reputation: 24660

If you use Spotify API you can search for a specific track and get the preview_url for that track specifically. This preview would be only 30 seconds long. With that in mind not all tracks have preview_url.

When you get the preview_ur you can use it with video html tag to play in your page.

<video controls="" autoplay="" name="media">
  <source src="https://p.scdn.co/mp3-preview/104ad0ea32356b9f3b2e95a8610f504c90b0026b?cid=8897482848704f2a8f8d7c79726a70d4" type="audio/mpeg">
</video>

Sample Response

{
  "album" : {
    "album_type" : "album",
    "artists" : [ {
      "external_urls" : {
        "spotify" : "https://open.spotify.com/artist/12Chz98pHFMPJEknJQMWvI"
      },
      "href" : "https://api.spotify.com/v1/artists/12Chz98pHFMPJEknJQMWvI",
      "id" : "12Chz98pHFMPJEknJQMWvI",
      "name" : "Muse",
      "type" : "artist",
      "uri" : "spotify:artist:12Chz98pHFMPJEknJQMWvI"
    } ],
    "available_markets" : [ "AD", "AR", "AT", "AU", "BE", "BG", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "EC", "EE", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IS", "IT", "JP", "LI", "LT", "LU", "LV", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "PA", "PE", "PH", "PL", "PT", "PY", "SE", "SG", "SK", "SV", "TH", "TR", "TW", "US", "UY", "VN" ],
    "external_urls" : {
      "spotify" : "https://open.spotify.com/album/0eFHYz8NmK75zSplL5qlfM"
    },
    "href" : "https://api.spotify.com/v1/albums/0eFHYz8NmK75zSplL5qlfM",
    "id" : "0eFHYz8NmK75zSplL5qlfM",
    "images" : [ {
      "height" : 640,
      "url" : "https://i.scdn.co/image/6e1be3ceda70250c701caee5a16bef205e94bc98",
      "width" : 640
    }, {
      "height" : 300,
      "url" : "https://i.scdn.co/image/28752dcf4b27ba14c1fc62f04ff469aa53c113d7",
      "width" : 300
    }, {
      "height" : 64,
      "url" : "https://i.scdn.co/image/26098aaa50a3450f0bac8f1a7d7677accf3f3cb6",
      "width" : 64
    } ],
    "name" : "The Resistance",
    "type" : "album",
    "uri" : "spotify:album:0eFHYz8NmK75zSplL5qlfM"
  },
  "artists" : [ {
    "external_urls" : {
      "spotify" : "https://open.spotify.com/artist/12Chz98pHFMPJEknJQMWvI"
    },
    "href" : "https://api.spotify.com/v1/artists/12Chz98pHFMPJEknJQMWvI",
    "id" : "12Chz98pHFMPJEknJQMWvI",
    "name" : "Muse",
    "type" : "artist",
    "uri" : "spotify:artist:12Chz98pHFMPJEknJQMWvI"
  } ],
  "available_markets" : [ "AD", "AR", "AT", "AU", "BE", "BG", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "EC", "EE", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IS", "IT", "JP", "LI", "LT", "LU", "LV", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "PA", "PE", "PH", "PL", "PT", "PY", "SE", "SG", "SK", "SV", "TH", "TR", "TW", "US", "UY", "VN" ],
  "disc_number" : 1,
  "duration_ms" : 304840,
  "explicit" : false,
  "external_ids" : {
    "isrc" : "GBAHT0900320"
  },
  "external_urls" : {
    "spotify" : "https://open.spotify.com/track/4VqPOruhp5EdPBeR92t6lQ"
  },
  "href" : "https://api.spotify.com/v1/tracks/4VqPOruhp5EdPBeR92t6lQ",
  "id" : "4VqPOruhp5EdPBeR92t6lQ",
  "name" : "Uprising",
  "popularity" : 77,
  "preview_url" : "https://p.scdn.co/mp3-preview/104ad0ea32356b9f3b2e95a8610f504c90b0026b?cid=8897482848704f2a8f8d7c79726a70d4",
  "track_number" : 1,
  "type" : "track",
  "uri" : "spotify:track:4VqPOruhp5EdPBeR92t6lQ"
}

Upvotes: 2

Related Questions