You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何实现可分享音频链接、点击跳转SoundCloud应用的分享按钮

实现SoundCloud曲目跳转分享按钮的解决方案

嘿,我之前刚好做过类似的需求,给你几个亲测有效的方案,核心是利用SoundCloud的**深度链接(URL Scheme)**来直接唤起应用并打开指定曲目:

方案一:直接使用SoundCloud官方URL Scheme(最简单)

SoundCloud的移动端应用支持标准的URL Scheme格式,你可以直接构造链接来唤起应用并跳转到对应曲目:

1. 链接格式

soundcloud://tracks/{TRACK_ID}
  • {TRACK_ID}是你要分享的曲目的唯一ID,你可以从曲目网页版的URL里提取(比如网页URL是https://soundcloud.com/artist-name/track-title,打开网页后查看源码,搜索trackId就能找到一串数字;或者直接用SoundCloud开发者API获取)

2. 按钮实现(HTML/前端)

为了兼顾未安装App的用户,我们可以做一个“先尝试唤起App,失败则跳转到网页版”的按钮:

<button id="soundcloud-share-btn">打开SoundCloud曲目</button>

<script>
document.getElementById('soundcloud-share-btn').addEventListener('click', function() {
  const trackId = '你的曲目ID';
  const appUrl = `soundcloud://tracks/${trackId}`;
  const webUrl = `https://soundcloud.com/tracks/${trackId}`;

  // 尝试唤起App
  const startTime = Date.now();
  window.location.href = appUrl;

  // 1.5秒后如果没唤起成功,跳转到网页版
  setTimeout(() => {
    if (Date.now() - startTime < 2000) {
      window.location.href = webUrl;
    }
  }, 1500);
});
</script>

3. 平台适配注意事项

  • iOS 9+:如果是在原生App内实现,需要在Info.plist中添加以下配置,允许查询SoundCloud的Scheme:
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>soundcloud</string>
    </array>
    
  • Android:原生App内实现的话,需要在AndroidManifest.xml中添加对应的intent-filter(前端网页无需配置):
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="soundcloud" android:host="tracks" />
    </intent-filter>
    

方案二:使用SoundCloud分享API(更灵活)

如果你需要自定义分享内容(比如附带文字说明),可以调用SoundCloud的分享API,不过这个方式需要用户登录SoundCloud账号,适合需要更丰富分享场景的情况:

1. 核心逻辑

通过构造分享URL,引导用户完成分享,同时支持唤起App:

<a href="https://soundcloud.com/share?url=https%3A%2F%2Fsoundcloud.com%2Ftracks%2F{TRACK_ID}&amp;title=来听这首好歌!" target="_blank">分享到SoundCloud</a>
  • 这个链接会打开SoundCloud的分享界面,用户登录后可以直接分享曲目,并且如果安装了App,会优先唤起App进行操作。

小技巧:快速获取Track ID

如果你不想用API,直接从网页版曲目页面获取ID:

  1. 打开目标曲目网页
  2. 右键“检查”打开开发者工具
  3. 在控制台输入SC.Widget('player').getCurrentSound(function(sound){console.log(sound.id);})(页面有播放器时可用),或者直接搜索页面源码中的trackId字段,就能找到对应的数字ID。

如果还有平台适配或者细节问题,随时问我哈!

内容的提问来源于stack exchange,提问作者Mohamed Salama

火山引擎 最新活动