Question

这可能是this question的副本，但我需要一个如何使其工作的示例。以下适用于桌面浏览器，但不适用于移动Safari（我在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>

这是Live Example

Answer 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();
}

这样可以在可以执行操作之前加载声音（异步操作）（默认情况下禁用按钮），然后您可以播放并直接调用它。

这是一个有效的例子 - http://jsbin.com/esadon/1/edit

用户事件发生后，Soundcloud自定义播放器无法在移动Safari上播放

1 个答案: