javascript 使用自定义按钮控制 Soundcloud HTML5 小部件播放器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11479747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:22:33  来源:igfitidea点击:

Controlling Soundcloud HTML5 Widget Player with custom buttons

javascriptcustom-controlssoundcloud

提问by user578968

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

我想做一些类似于我在 SoundClouds HTML5 Widget API PLAyground 页面上看到的内容,其中有控制播放器的外部按钮: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/

任何建议或提示都会很棒,我在这里发布:http: //jsfiddle.net/alexsethalex/qcKed/1/

回答by Paul Osman

Have you checked out the Widget API documentation?

您是否查看了Widget API 文档

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>