SoundCloud: play button

问题

I just want a play and stop button to substitute the original ones in SoundCloud. I followed the "Widget API" : http://developers.soundcloud.com/docs/api/html5-widget#
But it doen't work. I think I don't understand very well the SoundCloud instructions to do that.

I have it here playing: 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()
    });

})

回答1:

Ok this is working for me:

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>

It now correctly controls the iframe player.

This is the full working example from 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>

来源：https://stackoverflow.com/questions/11796719/soundcloud-play-button

标签

jquery

soundcloud