Question

我想制作一个滑块，以便可以控制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>

这是浏览器中的外观： slider

有人可以帮助我使用JavaScript吗？我尝试使用此代码，但是我不知道自己在做什么，并且不起作用。

Answer 1

如果在链接的页面上单击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>

如何使用Spotify API设置音量？

1 个答案: