1

私は、単純な<audio></audio>ものをjavascriptによって制御されるさまざまな要素のセットに変え、基本的にカスタムhtml5プレーヤーを作成するjQueryプラグインを使用しています。このプラグインに関するブログ投稿はこちらにあります: http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/ このプラグインについて詳しく説明しています。

とにかく、何らかの理由で、src=""Soundcloud api を介してプレーヤー用に生成すると機能しません。基本的に、Soundcloud から曲の URL を取得し、それを src としてオーディオ タグに追加します。

問題は、ページが読み込まれるとsrc="unknown"（またはこれらの行に沿った何か）と表示されることです

以下は、Soundcloud API とカスタム プレーヤー プラグインの両方の使用方法を示す HTML マークアップです。

<!DOCTYPE html>
<html>
<head>


<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/player.css">

</head>
<body>

<audio id="audio-test" controls></audio>

<!-- Javascript/jQuery -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src="/player.js"></script> <!-- /js/player.js -->

<script>
// Soundcloud
SC.initialize({
    client_id: '7a17129ba9cd5fff34f847e3539829b7'
});

SC.get("/tracks/81815566", {}, function(sound){
    $("#audio-test").attr("src", sound.uri + "/stream?client_id=7a17129ba9cd5fff34f847e3539829b7");
});

//Custom Player
$( function() { $( 'audio' ).audioPlayer(); } );
</script>

<!-- END Javascript/jQuery -->

</body>
</html>

また、プレーヤーが完全に機能するために必要な追加ファイルは次のとおりです。

player.css http://pastebin.com/HBUFvUw2
reset.css http://pastebin.com/jstmq0dB
player.js (プラグイン) http://pastebin.com/MKrUgRDF

または、ここからプロジェクト全体をダウンロードしてください: http://www.filedropper.com/example_1

4

1 に答える 1

3

問題は のよう/stream?client_id=...です。文字列全体を削除して に変更sound.uriしsound.stream_url、現在はストリーミングしています (少なくとも Safari/FF OSX では)。

ここで私のフィドルを参照してください。これで問題が解決しない場合は、お知らせください。解決いたします。

編集：もう一度試してみましたが、現在は機能していません。ちょっと待ってください。

編集 II : client-id を保持しますが、に変更sound.uriするsound.stream_urlと修正されたようです。sound.uri リンクは、オーディオ プレーヤーがたどることができない 301 リダイレクトを促しているようですが、sound.stream_url はメディアに直接リンクしています。更新されたフィドル リンクを参照してください。

于 2013-03-06T14:33:20.340 に答える