为 SoundCloud 和 mp3 创建一个停靠的音乐播放器答案

【问题标题】：Creating a docked music player for SoundCloud and mp3s为 SoundCloud 和 mp3 创建一个停靠的音乐播放器
【发布时间】：2013-12-31 01:38:05
【问题描述】：

我正在尝试创建一个网站，该网站可以从多个来源提取免费歌曲，并允许用户通过单击封面艺术并在页面底部的停靠音乐播放器中启动它们来播放它们。 Soundcloud 的 api 为我提供了很多歌曲，但它们是流式 api 格式，而不是 mp3 格式。

SoundCloud 提供的音乐播放器非常适合播放这些流媒体歌曲，但不适用于我从其他网站下载的 mp3。像 Jplayer 这样的 Mp3 播放器非常适合 mp3，但我不知道如何让它与流式 soundcloud 格式一起使用。

想想 ex.fm 这样的网站：http://ex.fm/search/bob%20dylan 他们从许多来源中提取音轨，但都可以通过他们的一个播放器播放。

这方面的任何帮助都会很棒。

谢谢

【问题讨论】：

标签： soundcloud jplayer

【解决方案1】：

检查 SoundCloud API http://developers.soundcloud.com/docs/api/reference#tracks

对于在 SoundCloud 之外可流式传输的每条轨道，都有一个 stream_url 属性。

您需要在 Soundcloud 上注册您的应用并获取 API Key。使用该键，您可以在自己的播放器中播放曲目。

编辑，感谢gryzzly。与 jPlayer 一起使用的 SoundCloud API 示例：

var SOUNDCLOUD_API = 'http://api.soundcloud.com',
    CLIENT_ID = '?client_id=REPLACE_WITH_YOUR_CLIENT_ID';

$(document).ready(function() {
  var apiRequest;

  $.get(SOUNDCLOUD_API + '/tracks/6981096.json' + CLIENT_ID)
   .done(handleRepsonse);

  function handleResponse (soundData) {
    $("#jquery_jplayer_1").jPlayer({
      ready: function () {
        $(this).jPlayer("setMedia", {
          // stream_url is good enough for jPlayer,
          mp3: soundData.stream_url + CLIENT_ID
        });
      },
      swfPath: "http://www.jplayer.org/2.1.0/js"
    });
  }

});

您可以在jsbin.com/ajaken/4/edit实时查看它

【讨论】：

cucko 说的是正确的——这是一个使用 SoundCloud API 的 jPlayer 的工作示例——jsbin.com/ajaken/4/edit 查看代码。 @cucko您能否在您的答案中插入相关的JS代码以供其他人立即参考？谢谢！
也许你甚至可以在你的答案中插入指向 jsbin 的链接，那也很酷:-)
太棒了！我只是在 stream_url 之后错过了 ?client_id 并且它不起作用。谢谢