用户事件后，Soundcloud自定义播放器不在移动safari上播放

Soundcloud custom player not playing on mobile safari after user event

本文关键字：移动 safari 播放 播放器 事件 Soundcloud 自定义 用户      更新时间：2023-09-26

这可能是这个问题的重复，但我需要一个如何使其工作的例子。以下内容适用于桌面浏览器，但不适用于移动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>

在您的示例中，用户操作和播放声音的调用发生在不同的调用堆栈中。

你需要修改你的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

相关文章：