Controlling Soundcloud HTML5 Widget Player with custom buttons

谁说胖子不能爱 提交于 2019-11-28 22:35:05

问题


I wanted to do something similar to what I saw on SoundClouds HTML5 Widget API PLayground page where they have external buttons that control the player : http://w.soundcloud.com/player/api_playground.html

Eventually I'll be hiding the player widget itself and using those buttons as the music controller.

Any suggestions or tips would be awesome, I posted it here: http://jsfiddle.net/alexsethalex/qcKed/1/


回答1:


Have you checked out the Widget API documentation?

Here's a super simple example:

<!doctype html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://w.soundcloud.com/player/api.js"></script>
  <script>
   $(document).ready(function() {
     var widget = SC.Widget(document.getElementById('soundcloud_widget'));
     widget.bind(SC.Widget.Events.READY, function() {
       console.log('Ready...');
     });
     $('button').click(function() {
       widget.toggle();
     });
   });
  </script>
</head>
<body>
  <iframe id="soundcloud_widget"
      src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/39804767&show_artwork=false&liking=false&sharing=false&auto_play=true"
      width="420"
      height="120"
      frameborder="no"></iframe>
  <button>Play / Pause</button>
</body>
</html>


来源:https://stackoverflow.com/questions/11479747/controlling-soundcloud-html5-widget-player-with-custom-buttons

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!