Question

是否可以在登录时在webapp上播放preview_url而无需离开页面？我找到了spotify的嵌入式播放器，它可以播放音轨，但它可以演奏整个音轨。我希望它只播放30秒的曲目预览。目前我有：

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

我也尝试在src中将uri更改为preview_url。

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

有没有办法做到这一点？

Answer 1

如果您使用Spotify API，则可以搜索特定曲目并专门获取该曲目的preview_url。此预览时间仅为30秒。考虑到这一点，并非所有曲目都有preview_url。

获得preview_ur后，您可以将其与video html标记一起用于您的网页。

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

示例回复

{
  "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"
}

（Spotify）登录时播放30秒预览

1 个答案: