2

这可能是这个问题的重复，但我需要一个如何使它工作的例子。以下适用于桌面浏览器，但不适用于移动 safari（我正在 iOS 6.1.2 中测试）。

我已经阅读了很多关于需要用户交互来播放声音的移动 safari，但这正是我在这里所拥有的：按钮单击触发功能来流式传输声音。

谁能指出我正确的方向？

<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 回答