SoundCloud：播放按钮答案

【问题标题】：SoundCloud: play buttonSoundCloud：播放按钮
【发布时间】：2012-08-03 13:28:58
【问题描述】：

我只想要一个播放和停止按钮来替换 SoundCloud 中的原始按钮。我遵循“小部件 API”：http://developers.soundcloud.com/docs/api/html5-widget#
但它不起作用。我想我不太了解 SoundCloud 的说明。

我在这里播放： http://jsfiddle.net/wBTCh/1/

HTML：

    <script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>

    <iframe id="so" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe>

    <div id="playSound"></div>
    <div id="stopSound"></div>

CSS：

#so{
    position: absolute;
    top: 20px;
    left: 20px;
}

#playSound{
    position: absolute;
    top: 200px;
    left: 20px;
    width: 20px;
    height: 20px;
    background-color: blue;
}

#stopSound{
    position: absolute;
    top: 200px;
    left: 50px;
    width: 20px;
    height: 20px;
    background-color: green;
}

JAVASCRIPT/JQUERY：

$(function(){

    var iframeElement   = document.querySelector('iframe');
    var iframeElementID = iframeElement.id;
    var widget1         = SC.Widget("#so");
    var widget2         = SC.Widget("#so");
    // widget1 === widget2

    $("#playSound").click(function() {
        $("#so").play()
    });

    $("#stopSound").click(function() {
        $("#so").pause()
    });

})

【问题讨论】：

抱歉，但是：您的问题到底出在哪里，您尝试解决什么问题？
我看到一个播放按钮和一个暂停按钮，您可能使用的是旧浏览器。至于停止按钮，我已经浏览了一些文档，但找不到添加一个，所以......是的，不知道我还能说什么
好的，我知道您现在想做什么，但我认为您没有按照文档告诉您的那样做。您必须按照上面的说明将脚本添加到您的页面，然后您需要使用 var w = SC.Widget($('#so').get()); 初始化脚本，然后播放事件中的视频，w.play()
或者实际上你可以为 SC.Widget 做var w = SC.Widget('#so');。所以是的，您必须在页面顶部包含脚本，因为它告诉您，该脚本可以在此处找到：w.soundcloud.com/player/api.js 并且一旦包含该脚本，您就可以使用它来控制 iframe。
我在头部添加了这个：

标签： jquery soundcloud

【解决方案1】：

好的，这对我有用：

JS：

var widget1 = SC.Widget("so");

$(function(){
    $("#playSound").click(function() {
        widget1.play();

    });

    $("#stopSound").click(function() {
        widget1.pause()
    });
})

HTML：

<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>

<iframe id="so" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe>

<div id="playSound"></div>
<div id="stopSound"></div>

它现在可以正确控制 iframe 播放器。

这是来自 JSBin 的完整工作示例：

<!DOCTYPE HTML>
 <head>

 <meta charset="UTF-8">
  <title></title>


   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<!-- SoundCloud-->
<script type="text/javascript" src="http://w.soundcloud.com/player/api.js"></script>
    <script type="text/javascript">


    $(function(){
      var widget1 = SC.Widget("so");

        $("#playSound").click(function() {
          widget1.play();

      });  
      $("#stopSound").click(function() {
          widget1.pause();
      });      
    });
  </script> 


  <style type="text/css">
  <!--

  #so{
      position: absolute;
      top: 20px;
      left: 20px;
  }

  #playSound{
      position: absolute;
      top: 200px;
      left: 20px;
      width: 20px;
      height: 20px;
      background-color: blue;
  }

  #stopSound{
      position: absolute;
      top: 200px;
      left: 50px;
      width: 20px;
      height: 20px;
      background-color: green;
  }
  

  -->
  </style>
 </head>

<body>

<iframe id="so" width="100%" height="160" scrolling="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe>

<div id="playSound"></div>
<div id="stopSound"></div>



</body>
</html>

【讨论】：

它有效！我仍然不明白你是如何从 SoundCloud 的说明中得到的。我在这里试了一下，效果很好：jsfiddle.net/wBTCh/2 但是当我在 Dreamweaver 中复制粘贴时，它不起作用。我不明白为什么。所以我尝试了 JSBin。因为它将所有代码一起显示：jsbin.com/usoxek/1/edit 知道问题出在哪里吗？
@Narcís 好的，我已经修复了您在 JSBin 中提供的版本，这是因为在文档完全加载时没有分配 iframe，所以 JS 只是在没有 iframe 内容的情况下运行准备好了，SoundClouds 部分的编程有点糟糕，但我猜它很容易使用。
好的，完美。这里我将示例留在 JSBin 中。如果有人需要看到它的工作：jsbin.com/usoxek/5/edit 非常感谢！