SoundCloud API基于音轨URL创建流报403 网页端正确播放方法咨询

你当前代码触发403的核心原因 #

• 引入的soundcloud npm包是2017年就停更的废弃SDK，早就不兼容现在的v2 API权限校验规则
• 没给当前client_id配域名白名单：SoundCloud现在要求所有用client_id发起的前端请求，必须在开发者后台绑定实际跑网页的域名，连本地调试的localhost地址也要单独加，没配的请求会直接返回403
• 传的轨道路径格式不对：你写的tracks/986824216不符合API要求的完整URI规范，少了域名前缀会被判定为非法请求

标准实现步骤 #

1. 先把后台权限配好
   进你创建应用对应的SoundCloud开发者管理页，把网页实际运行的所有地址（包括本地调试带端口号的localhost地址）加到client_id的域名白名单里，保存后等10分钟左右权限生效
2. 换掉废弃的旧SDK
   别再用之前那个停更的soundcloud包了，现在前端场景统一用官方维护的@soundcloud/player依赖，原生HTML项目可以把对应打包文件下到本地引入，不要用旧包
3. 正确的播放逻辑代码

// 引入官方维护的播放器SDK
import SCPlayer from '@soundcloud/player';

// 初始化客户端
SCPlayer.initialize({
  clientId: '你已经绑定好白名单的client_id'
});

// 写全完整的轨道URI，别写省略路径
const targetTrackUri = 'https://api.soundcloud.com/tracks/986824216';

// 播放逻辑必须绑在真实用户交互上（比如点按钮），别在页面刚加载的时候直接触发
document.querySelector('#track-play-btn').addEventListener('click', async () => {
  try {
    const player = await SCPlayer.stream(targetTrackUri);
    await player.play();
    console.log('播放启动');
  } catch (err) {
    console.error('播放异常', err);
  }
});

还是报403的排查方向 #

• 先查目标轨道本身是不是开了禁止第三方嵌入的权限：这类受版权保护的轨道哪怕client_id完全合法也会返回403，测试的时候优先选明确开放嵌入权限的公开轨道
• 看看是不是被广告拦截插件/浏览器安全插件拦了：部分拦截规则会直接挡SoundCloud的API请求，暂时禁用插件再试
• 是不是触发了API限流：短时间内频繁发起流请求会被临时限制，等15分钟左右再测就行

内容的提问来源于stack exchange，提问作者rdurnin