如何使用 Spotify API 设置音量？答案

【问题标题】：How do I set volume with the Spotify API?如何使用 Spotify API 设置音量？
【发布时间】：2018-11-07 13:25:22
【问题描述】：

我想制作一个滑块，以便控制 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 吗？我尝试使用此代码，但我不知道我在做什么并且它不起作用。

【问题讨论】：

请问，这段代码什么时候被调用？从您提供的代码看来，它可能在点击功能中？
将代码挂钩到滑块的 OnChange 侦听器可能是个好主意。

标签： javascript api slider spotify volume

【解决方案1】：

如果您点击链接页面上的fill sample data 按钮，则会生成：

curl -X "PUT" "https://api.spotify.com/v1/me/player/volume?volume_percent=50&device_id=0d1841b0976bae2a3a310dd74c0f3df354899bc8" -H "Accept: application/json" -H "Content-Type: application/json" -H "Authorization: Bearer"

因此，您似乎应该使用查询参数而不是在请求正文中传递它们。（$.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>

【讨论】：