2

これはこの質問の重複の可能性がありますが、それを機能させる方法の例が必要です。以下はデスクトップ ブラウザーでは機能しますが、モバイル サファリでは機能しません (iOS 6.1.2 でテストしています)。

サウンドを再生するためにユーザー インタラクションが必要なモバイル サファリについてよく読んだことがありますが、まさにここにあるものです。

誰かが私を正しい方向に向けることができますか?

<body>
  <div class="container" style="padding:20px">
    <div class="sixteen columns">
      <input type="button" href="#" id="stream" class="big button" value="Stream It Again, Sam" onclick="playTrack()"/>
      <div class="console"></div>
    </div>
  </div>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//connect.soundcloud.com/sdk.js"></script>
  <script>
  SC.initialize({
    client_id: "MY-CLIENT-ID"
  });

  function playTrack(){
    SC.stream("/tracks/293", {
      useHTML5Audio: true,
      preferFlash: false
    }, function(sound) {
      sound.play();
      $('.console').text('button clicked');
    });

  }

  </script>
</body>

ここにライブの例があります

4

1 に答える 1

1

あなたの場合、ユーザーアクションとサウンドを再生するための呼び出しは、異なる呼び出しスタックで発生します。

JSを次のように変更する必要があります。

SC.initialize({
  client_id: "YOUR_CLIENT_ID"
});

var soundToPlay; 
// first do async action
SC.stream("/tracks/293", {
  useHTML5Audio: true,
  preferFlash: false
}, function(sound) {
  soundToPlay = sound;
  document.querySelector('input').disabled = false;
});

function playTrack () {
  soundToPlay.play();
}

このようにして、アクションが可能になる前にサウンドがロードされ（非同期アクション）（ボタンはデフォルトで無効になっています）、再生して直接呼び出すことができます。

これが実際の例です– <a href="http://jsbin.com/esadon/1/edit" rel="nofollow"> http://jsbin.com/esadon/1/edit

于 2013-03-19T14:56:02.750 に答える