5

SoundCloud からトラックをロードし、http: //kolber.github.io/audiojs/が提供する HTML5 オーディオ プレーヤーで再生したいと考えています。

デモと同じように、.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();
};
4

1 に答える 1

3

デフォルトのプレーヤーと demos/test6.html で sc-urls を使用してテストしたところ、正常に動作しました。

プレーヤーはどこで作成しますか? URL が間違っているようです (以下の例 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 (sc URL のみを使用した 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

于 2014-06-19T12:35:08.027 に答える