Question

我只想要一个播放和停止按钮来替换SoundCloud中的原始按钮。我按照“Widget 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()
    });

})

Answer 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：播放按钮

1 个答案: