首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在链接中使用spotify web api播放音乐/歌曲?

如何在链接中使用spotify web api播放音乐/歌曲?
EN

Stack Overflow用户
提问于 2022-08-20 02:15:19
回答 1查看 317关注 0票数 -1

好的,所以我很难用API搜索28小时,因为我只是个初学者。我只是想要的API的Spotify音乐,但我已经知道如何搜索那里的专辑等。这是我的代码提供如下。

这是我对Spotify API的访问令牌。

代码语言:javascript
运行
复制
const CLIENT_ID = "xxxxx"
const CLIENT_SECRET = "xxxxx"

你看到的是专辑的清单..。但是,您也可以在第二个片段的末尾代码中看到musics。

我试图传递特定的音乐,我将点击。var playmusics = await fetch('https://api.spotify.com/v1/me/player')

然而,我不明白我将如何获得api,以及我将如何在那里播放音乐.

有一个教程我看过,但我不想验证按钮,因为这不是我的目标。

(因为它已经在useEffect(()) ..You中验证了,所以链接...What在这里可以看到它,我真正的目标就是自动访问Spotify播放器,一旦我点击这个项目,它就会播放我在特定项目中单击的音乐。

代码语言:javascript
运行
复制
... 
  const [searchInput,setSearchInput] = useState("")
  const [accessToken,setAccessToken] = useState("")
  const [albums,setAlbums] = useState([])
  const [musics,setMusics] = useState([])

  useEffect(() => {

    var authParameters = {
      method: "POST",
      headers:{
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body:`grant_type=client_credentials&client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}`
    }
    
    fetch("https://accounts.spotify.com/api/token",authParameters)
      .then( res => res.json())
      .then( res => {
        setAccessToken(res.access_token)
      })
      .catch(err => console.log(err))
  },[])

  async function search() {
    console.log("Searching..." + searchInput)

    var Parameters = {
      method:"GET",
      headers:{ 
        'Content-Type':'application/json',
        'Authorization':'Bearer ' + accessToken
      }
    }
    
    var albums = await fetch(`https://api.spotify.com/v1/search?query=${
      searchInput
    }&type=album`,Parameters)
      .then(res => res.json())
      .then(res => { 
        setAlbums(res.albums.items)
      })
  
     // Here I want to access the API of player musics but it must be the same as setAlbums 
      var playmusics = await fetch('https://api.spotify.com/v1/me/player')
      setMusics("Whatever inside here")
    }
...

对于UI组件,只需在我的代码框中检查我的所有代码。https://codesandbox.io/s/adoring-khorana-51w7h1?file=/src/App.js

把你的Client_ID和Client_secret放在你的own..at WEB SPOTIFY

EN

回答 1

Stack Overflow用户

发布于 2022-08-20 08:53:17

您可以使用特定的链接,在单击该专辑后直接播放它:演示链接

代码语言:javascript
运行
复制
https://open.spotify.com/track/0dEIca2nhcxDUV8C5QkPYb?context=spotify:album:4m2880jivSbbyEGAKfITCa&go=1
https://open.spotify.com/track/ID_FIRST_TRACK?context=spotify:album:ALBUM_ID&go=1

正如我在注释和聊天中提到的:如果您想要播放器功能,您必须使用验证用户身份并使用正确的范围。仅对客户端进行身份验证是不够的,因为您可以在以下引用中阅读:

由于客户凭证流不包括授权,所以只能访问不访问用户信息的端点。

添加1:在您所链接的教程中,它甚至显示了一个图像(我在下面添加的),您可以阅读"User: Log,showing“

添加2:您可以做的是使用埋伏。使用嵌入,您可以添加一个播客,相册,或其他音频内容,您的网站,您的用户可以收听。注意:用户需要有高级和需要登录到Spotify网站,以充分发挥轨道。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73423669

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档