【问题标题】:How to decode data off spotify api如何从Spotify api解码数据
【发布时间】:2020-10-10 07:53:47
【问题描述】:

我成功让 Spotify API 与 spotify-web-api-js 一起工作,但我不知道如何解码。我希望能够在 HTML 页面上显示当前正在播放的歌曲的标题和艺术家。

现在要测试,我正在尝试使用<script>document.getElementById("song").innerHTML = data.timestamp</script>data 是来自 Spotify api 的东西)来获取时间戳,因为我不知道要深入了解 Spotify 响应的格式是什么.我得到一个Uncaught TypeError: Cannot read property 'timestamp' of undefined

注意:我是编码新手

这是从 Spotify 获取内容的 javascript:

var SpotifyWebApi = require('spotify-web-api-js');
var spotifyApi = new SpotifyWebApi();
var data;

spotifyApi.setAccessToken('token')
spotifyApi.getMyCurrentPlayingTrack('title')
.then(function(data) {
    console.log('Now playing', data);
  }, function(err) {
    console.error(err);
  });

这是应该显示歌曲标题的 html 网页部分(在本例中是时间戳,用于测试目的):

  <body>
      <div class=center>
        <h1 id="song"></h1>
        <h2>Luna Li</h2>
        <script>document.getElementById("song").innerHTML = data.timestamp</script>
      </div>
  </body>

来自 Spotify 的回复:

{
  "timestamp" : 1592617721303,
  "context" : {
    "external_urls" : {
      "spotify" : "https://open.spotify.com/album/3GU8BzFEAdFSRjc8jZkL3S"
    },
    "href" : "https://api.spotify.com/v1/albums/3GU8BzFEAdFSRjc8jZkL3S",
    "type" : "album",
    "uri" : "spotify:album:3GU8BzFEAdFSRjc8jZkL3S"
  },
  "progress_ms" : 27470,
  "item" : {
    "album" : {
      "album_type" : "compilation",
      "artists" : [ {
        "external_urls" : {
          "spotify" : "https://open.spotify.com/artist/0LyfQWJT6nXafLPZqxe9Of"
        },
        "href" : "https://api.spotify.com/v1/artists/0LyfQWJT6nXafLPZqxe9Of",
        "id" : "0LyfQWJT6nXafLPZqxe9Of",
        "name" : "Various Artists",
        "type" : "artist",
        "uri" : "spotify:artist:0LyfQWJT6nXafLPZqxe9Of"
      } ],
      "available_markets" : [ "AD", "AE", "AR", "AT", "AU", "BE", "BG", "BH", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "DZ", "EC", "EE", "EG", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IL", "IN", "IS", "IT", "JO", "KW", "LB", "LI", "LT", "LU", "LV", "MA", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "OM", "PA", "PE", "PH", "PL", "PS", "PT", "PY", "QA", "RO", "SA", "SE", "SG", "SK", "SV", "TH", "TN", "TR", "TW", "US", "UY", "VN", "ZA" ],
      "external_urls" : {
        "spotify" : "https://open.spotify.com/album/3GU8BzFEAdFSRjc8jZkL3S"
      },
      "href" : "https://api.spotify.com/v1/albums/3GU8BzFEAdFSRjc8jZkL3S",
      "id" : "3GU8BzFEAdFSRjc8jZkL3S",
      "images" : [ {
        "height" : 640,
        "url" : "https://i.scdn.co/image/ab67616d0000b2730bdf4dd39843ad48c5b66bc4",
        "width" : 640
      }, {
        "height" : 300,
        "url" : "https://i.scdn.co/image/ab67616d00001e020bdf4dd39843ad48c5b66bc4",
        "width" : 300
      }, {
        "height" : 64,
        "url" : "https://i.scdn.co/image/ab67616d000048510bdf4dd39843ad48c5b66bc4",
        "width" : 64
      } ],
      "name" : "La La Land (Original Motion Picture Soundtrack)",
      "release_date" : "2016-12-09",
      "release_date_precision" : "day",
      "total_tracks" : 15,
      "type" : "album",
      "uri" : "spotify:album:3GU8BzFEAdFSRjc8jZkL3S"
    },
    "artists" : [ {
      "external_urls" : {
        "spotify" : "https://open.spotify.com/artist/6kXm2YCtdUOpRYNKeKhfue"
      },
      "href" : "https://api.spotify.com/v1/artists/6kXm2YCtdUOpRYNKeKhfue",
      "id" : "6kXm2YCtdUOpRYNKeKhfue",
      "name" : "Ryan Gosling",
      "type" : "artist",
      "uri" : "spotify:artist:6kXm2YCtdUOpRYNKeKhfue"
    }, {
      "external_urls" : {
        "spotify" : "https://open.spotify.com/artist/68Uwx1d3EbjDJhYsLjqvIq"
      },
      "href" : "https://api.spotify.com/v1/artists/68Uwx1d3EbjDJhYsLjqvIq",
      "id" : "68Uwx1d3EbjDJhYsLjqvIq",
      "name" : "Emma Stone",
      "type" : "artist",
      "uri" : "spotify:artist:68Uwx1d3EbjDJhYsLjqvIq"
    } ],
    "available_markets" : [ "AD", "AE", "AR", "AT", "AU", "BE", "BG", "BH", "BO", "BR", "CA", "CH", "CL", "CO", "CR", "CY", "CZ", "DE", "DK", "DO", "DZ", "EC", "EE", "EG", "ES", "FI", "FR", "GB", "GR", "GT", "HK", "HN", "HU", "ID", "IE", "IL", "IN", "IS", "IT", "JO", "KW", "LB", "LI", "LT", "LU", "LV", "MA", "MC", "MT", "MX", "MY", "NI", "NL", "NO", "NZ", "OM", "PA", "PE", "PH", "PL", "PS", "PT", "PY", "QA", "RO", "SA", "SE", "SG", "SK", "SV", "TH", "TN", "TR", "TW", "US", "UY", "VN", "ZA" ],
    "disc_number" : 1,
    "duration_ms" : 236506,
    "explicit" : false,
    "external_ids" : {
      "isrc" : "USUG11600652"
    },
    "external_urls" : {
      "spotify" : "https://open.spotify.com/track/4r9hiElqKWMPT4Z3vN2exq"
    },
    "href" : "https://api.spotify.com/v1/tracks/4r9hiElqKWMPT4Z3vN2exq",
    "id" : "4r9hiElqKWMPT4Z3vN2exq",
    "is_local" : false,
    "name" : "A Lovely Night",
    "popularity" : 62,
    "preview_url" : "https://p.scdn.co/mp3-preview/b315c0bd334edba2f571a4d5e1986ae544d8cf1b?cid=1f307ec00d7b4f3186cb56d56162cab6",
    "track_number" : 4,
    "type" : "track",
    "uri" : "spotify:track:4r9hiElqKWMPT4Z3vN2exq"
  },
  "currently_playing_type" : "track",
  "actions" : {
    "disallows" : {
      "resuming" : true
    }
  },
  "is_playing" : true
}

有没有一种简单的方法可以从中获取歌曲和艺术家的标题?我觉得您可以使用 &lt;script&gt;document.getElementById("song").innerHTML = data.timestamp&lt;/script&gt; 来做到这一点,但我不确定如何浏览 Spotify 响应。

【问题讨论】:

    标签: javascript spotify


    【解决方案1】:

    我明白了!我乱七八糟放了console.log(data.item.name),就成功拿到了歌名!对于 HTML 部分,我无法从 HTML 中获取变量,所以我只是将 document.getElementId("song")... 移动到了 javascript!

    这是最终脚本的样子:

    var SpotifyWebApi = require('spotify-web-api-js');
    var spotifyApi = new SpotifyWebApi();
    var data;
    
    spotifyApi.setAccessToken('token');
    spotifyApi.getMyCurrentPlayingTrack('title')
    .then(function(data) {
      console.log('Now playing', data);
      console.log(data.item.name)
      document.getElementById("song").innerHTML = data.item.name
    }, function(err) {
      console.error(err);
    });
    

    以及HTML部分:

      <body>
          <div class=center>
            <h1 id="song"></h1>
            <h2>Luna Li</h2>
          </div>
      </body>
    

    我不确定我是否正确,但由于我使用了spotify-web-api-js,它看起来像是将响应作为对象而不是 JSON 给出。

    【讨论】:

    • 提示:您还可以将鼠标悬停在 chrome 控制台登录中的特定项目上,它会告诉您要放置什么来过滤它!我需要这个,因为当我需要过滤带有数字的对象(或数组?)类别时,我不知道必须输入[]screenshot
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-14
    • 2021-08-08
    • 2020-07-19
    • 2014-06-24
    相关资源
    最近更新 更多