2014-06-15 140 views
3

我想从SoundCloud装载轨道,并让他们在所提供的HTML5音频播放器播放:http://kolber.github.io/audiojs/播放HTML 5中的MP3播放器(audio.js)的SoundCloud流URI

我把它与.mp3文件工作,就像他们在演示中所做的一样。我也成功连接到SoundCloud API,并将src放在正确的位置。然而,流uri:api.soundcloud .com/tracks/75868018/stream?client_id = ed34fc3159859e080af9eb55f8c3bb16(这是一个假客户端ID,我无法发布链接)不起作用。

我一直在使用这两种 sound.stream_url & sound.uri这里详述尝试:developers.soundcloud .COM(不能张贴链接)

如何在MP3播放器播放从的SoundCloud API流链接?

下面是我的代码

HTML - 剥离

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> // load jquery 
<script src="http://connect.soundcloud.com/sdk.js"></script> // connect to soundlcoud 
<script src="jb3.js" type="text/javascript"></script> // run script to load track into <li> element in DOM 
<script src="audio.min.js"></script> // load audio,js script for audio player 
</head> 
<body> 


<audio ></audio> 
<h2>Playlist</h2> 
    <ol id="userPlaylist"> 
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">dead wrong intro</a></li> //woorking track using .mp3 

<li class="playing"> 
<a data-src="http://api.soundcloud.com/tracks/75868018/stream?client_id=ed34fc3159859e080af9eb55f8c3bb16" href="#">sc SONG</a> 
</li> 
//STREAM THAT IS NOT WORKING 

</body> 
</html> 

我的JavaScript - jb3.js

function addSc() { 

SC.get("/tracks/75868018", {}, function(sound){ 
alert("Sound URI: "+sound.uri); 
$("ol#userPlaylist").append('<li> <a href="#" data-src="'+sound.stream_url+'.json/stream?client_id=ed34fc3159859e080af9eb8558c3bb16">sc  SONG</li>'); 
}); 
} 

window.onload = function() { 
SC.initialize({ 
client_id: 'ed34fc3159859e080af9eb55f8c3bb16' 
}); 

addSc(); 
}; 

回答

2

我与默认播放器和演示/ test6.html与测试它sc-urls,它工作正常。

你在哪里创建玩家? 看起来像您的网址似乎是错误的(请检查下面例2)

例1个

HTML

<audio src="http://api.soundcloud.com/tracks/148976759/stream?client_id=201b55a1a16e7c0a122d112590b32e4a" preload="auto"></audio> 

JS

audiojs.events.ready(function() { 
     audiojs.createAll(); 
     }); 

http://jsfiddle.net/iambnz/6dKLy/

例2播放列表(test6只是与网址)

HTML

<div id="wrapper"> 
<h1>Test .. :-) <em>(2014)</em></h1> 
<audio preload></audio> 
<ol> 
<li><a href="#" data-src="http://api.soundcloud.com/tracks/148976759/stream?client_id=201b55a1a16e7c0a122d112590b32e4a">Phil Collins Edit</a></li> 
<li><a href="#" data-src="http://api.soundcloud.com/tracks/75868018/stream?client_id=ed34fc3159859e080af9eb55f8c3bb16">Your track</a></li> 
</ol> 
</div> 

JS

$(function() { 
     // Setup the player to autoplay the next track 
     var a = audiojs.createAll({ 
      trackEnded: function() { 
      var next = $('ol li.playing').next(); 
      if (!next.length) next = $('ol li').first(); 
      next.addClass('playing').siblings().removeClass('playing'); 
      audio.load($('a', next).attr('data-src')); 
      audio.play(); 
      } 
     }); 

     // Load in the first track 
     var audio = a[0]; 
      first = $('ol a').attr('data-src'); 
     $('ol li').first().addClass('playing'); 
     audio.load(first); 

     // Load in a track on click 
     $('ol li').click(function(e) { 
      e.preventDefault(); 
      $(this).addClass('playing').siblings().removeClass('playing'); 
      audio.load($('a', this).attr('data-src')); 
      audio.play(); 
     }); 
     // Keyboard shortcuts 
     $(document).keydown(function(e) { 
      var unicode = e.charCode ? e.charCode : e.keyCode; 
      // right arrow 
      if (unicode == 39) { 
      var next = $('li.playing').next(); 
      if (!next.length) next = $('ol li').first(); 
      next.click(); 
      // back arrow 
      } else if (unicode == 37) { 
      var prev = $('li.playing').prev(); 
      if (!prev.length) prev = $('ol li').last(); 
      prev.click(); 
      // spacebar 
      } else if (unicode == 32) { 
      audio.playPause(); 
      } 
     }) 
     }); 

http://jsfiddle.net/iambnz/VL7n8/

检查:http://kolber.github.io/audiojs/demos/test6.html