Как мне сделать аудиоплеер с Spotify Web API? - PullRequest
Новая
       20

Как мне сделать аудиоплеер с Spotify Web API?

0 голосов
/ 29 октября 2018

Я пытался сделать аудиоплеер, начиная с кнопки воспроизведения. В моем коде HTMl я сделал кнопку: 

<a href="#" id="play" alt="animate" class="btnstyle">Play</a>

Затем я использовал этот код, чтобы заставить его воспроизводить песню, но, похоже, он не работает. 

document.getElementById('play').addEventListener('click', function() {
  $.ajax({
    url: 'https://api.spotify.com/v1/me/player/play',
    type: 'PUT',
    headers: {
      'Authorization': 'Bearer ' + access_token
    },
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify({
        "uris": ["spotify:track:"] + apiData.item.id,
        "position_ms": apiData.progress_ms
    })
  });
});

apiData.item.id относится к идентификатору текущей воспроизводимой дорожки. apiData.progress_ms относится к прогрессу в миллисекундах текущей воспроизводимой дорожки.

Когда я запускаю свой код и нажимаю кнопку воспроизведения, ничего не происходит. Я не знаю, что я сделал не так.

Но я попытался сделать кнопку паузы, сначала сделав кнопку с идентификатором под названием «пауза». Тогда я сделал следующее: 

document.getElementById('pause').addEventListener('click', function() {
  $.ajax({
    url: 'https://api.spotify.com/v1/me/player/pause',
    type: 'PUT',
    headers: {
      'Authorization': 'Bearer ' + access_token
    },
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify({
      "uris": ["spotify:track:"] + apiData.item.id,
      "position_ms": apiData.progress_ms
    })
  });
});

Это действительно работает! Но я не понимаю, почему кнопка воспроизведения не работает, а кнопка паузы работает. Вот документация, которую я использовал для обеих кнопок: https://developer.spotify.com/documentation/web-api/reference/player/start-a-users-playback/ https://developer.spotify.com/documentation/web-api/reference/player/pause-a-users-playback/

Для кнопки воспроизведения я получил эту ошибку в журнале консоли: ошибка 400

Может кто-нибудь мне помочь?

1 Ответ

0 голосов
/ 29 октября 2018

tl; dr: рабочие фрагменты внизу этого ответа!

Поле uris принимает массив, содержащий Spotify uris. Это "uris": ["spotify:track:"] + apiData.item.id разрешается не в массив, а в строку, которая не соответствует конечной точке. Следовательно, использование [`spotify:track:${id}`] будет работать.

Этот фрагмент показывает разницу между ними. 

console.log(["spotify:track:"] + id);
// Output with id = 1234: "spotify:track:1234" -> String

console.log([`spotify:track:${id}`]);
// Output with id = 1234: ["spotify:track:1234"] -> Array of strings

Причина, по которой кнопка останова работает, заключается в том, что конечная точка pause Spotify не использует никакие данные, которые вы передали. Конечная точка pause имеет только один необязательный параметр запроса, называемый device_id. Поэтому данные, которые вы передали вместе с ним, просто игнорируются. Таким образом, призыв Ajax к паузе может быть упрощен, как показано в следующих фрагментах.

Вот два рабочих фрагмента, учитывая, что используется токен доступа с разрешенной областью действия user-modify-playback-state.

Play 

$.ajax({
  url: 'https://api.spotify.com/v1/me/player/play',
  type: 'PUT',
  headers: {
    'Authorization': 'Bearer ' + access_token
  },
  dataType: "json",
  contentType: "application/json",
  data: JSON.stringify({
    "uris": [`spotify:track:${apiData.item.id}`],
    "position_ms": apiData.progress_ms
  })
});

пауза 

$.ajax({
  url: 'https://api.spotify.com/v1/me/player/pause',
  type: 'PUT',
  headers: {
    'Authorization': 'Bearer ' + access_token
  }
});
...