Question

10

Controlling Soundcloud HTML5 Widget Player with custom buttons

rated 0 times [ 15] [ 5] / answers: 1 / hits: 17825 / 12 Years ago, fri, july 13, 2012, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

freddiem

Add To Favorites

Follow

Total Points: 456

Total Questions: 116

Total Answers: 101

Location: Dominica

Member since Mon, Jan 4, 2021

3 Years ago

answered 12 Years ago mahogany · Accepted Answer

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>