Как настроить громкость с помощью Spotify API? - PullRequest
Новая
       30

Как настроить громкость с помощью Spotify API?

0 голосов
/ 07 ноября 2018

Я хочу сделать слайдер, чтобы контролировать громкость дорожки Spotify. Я читал кое-что о томе на этом сайте, но не знаю, как связать его с созданным мной слайдером. https://developer.spotify.com/console/put-volume/

Вот так выглядит мой слайдер в коде: 

document.getElementById('myRange').value //addEventListener('click', function() {

$.ajax({
  url: 'https://api.spotify.com/v1/me/player/volume',
  type: 'PUT',
  headers: {
    'Authorization': 'Bearer ' + access_token
  },
  dataType: "json",
  contentType: "application/json",
  data: JSON.stringify({

    "volume_percent": apiData.progress_ms
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <p>Value: <span id="demo"></span></p>
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
</div>

Вот как это выглядит в браузере: Слайдер

Может кто-нибудь помочь мне с JavaScript? Я пытался использовать этот код, но я понятия не имею, что я делаю, и он не работает.

1 Ответ

0 голосов
/ 07 ноября 2018

Если вы нажмете кнопку fill sample data на странице, на которую вы ссылаетесь, вы получите:

curl -X "PUT" "https://api.spotify.com/v1/me/player/volume?volume_percent=50&device_id=0d1841b0976bae2a3a310dd74c0f3df354899bc8" -H" Принять: application / json "-H" Тип содержимого: application / json "-H" Авторизация: Носитель "

Так что кажется, что вы должны использовать параметры запроса, а не передавать их в теле запроса. ($.ajax использует data в качестве параметров запроса для запросов GET, в PUT они отправляются в теле запроса) 

var params = {
  "volume_percent": volume,
  "device_id": deviceid //optional
};
$.ajax({
  url: 'https://api.spotify.com/v1/me/player/volume?' + $.param(params),
  type: 'PUT',
  headers: {
    'Authorization': 'Bearer ' + access_token
  }
});

Также я советую вызывать его в обработчике нажатий кнопок или при событии mouseup, чтобы избежать многих запросов: 

$("#myRange").on("input", function() {
  console.log("slider", this.value)
})

$("#myRange").on("mouseup", function() {
  console.log("slider mouseup", this.value)
})

$("#myButton").click(function() {
  console.log("button", $("#myRange").val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <p>Value: <span id="demo"></span></p>
  <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
  <button id="myButton">Set volume</button>
</div>
...