Syncing soundcloud widget with timeline

#1

i’m building an interactive splash page at the moment - the user presses ‘play’ and a 110minute audio stream (stored privately on soundcloud) would play.

is there any way to link this audio stream up with timeline actions in hype? the audio stream is of 11 songs, each song would have assets become visible as the stream progressed…

i was trying to use this: Sync animations to Video & Audio but i guess it won’t work on a soundcloud (private) embed - i also looked at the soundcloud js sdk / soundmanager2 linkup but couldn’t get it to work properly- anyone have any experiencee / tips

thanks!

1 Like
Get ToneDen Soundcloud player to work in Hype
#2

if anyone is available to help would this i’d appreciate it - i’ve put a “job notice” here - https://groups.google.com/forum/#!topic/tumult-hype-freelancers/YknromcCUks

thanks!

dw

#3

here is a draft example.
if you need more help, please reply.
play stop audio sample.hype.zip (31.4 KB)

#4

@jameskoh appreciate the hype document - it’ll come in handy later on!

the issue though i’m having is getting the Soundcloud stream to play properly in the first place. I can embed the html5 widget, have it autoplay and hidden - but i can’t figure out how to control the widget via the various soundcloud API controls :confused:

#5

you can substitute the invisible soundcloud stream with the play box and stop box i made.
oh i see what you mean.
you can’t stop the stream with the document i made.
let me spend more time.

#6

hey, i did some research.
i am not a javascripter so i am not fully sure this can be done this way.
here is what i found.

<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=false"
      width="420"
      height="120"
      frameborder="no"></iframe>
  <button>Play / Pause</button>
</body>
</html>

so i think you can put the head using edit head html in hype.
and change the src to your soundcloud src.
then edit the size of play and pause button.

hope this will work.

#7

thanks for that! i can get it working in a standard html file (with a private iframe embed), now to get it working within the hype setup!

#8

@rrrnnn: Did you ever get this working within Hype? If so, it would be great if you could share!

#9

Invoice is in the post :smile:

soundcloudSync.zip (18.1 KB)

*Edit This is for a public track. There is also an SDK from Soundcloud which might be a better fit. But this example shows you the syncing possibilities and the use of Hype elements to control the track.

The following url shows you the methods you can access:
https://developers.soundcloud.com/docs/api/html5-widget

1 Like
#10

DBear, would you be able to tell me how to add more than one soundcloud link? I was able to successfully use your technique to play only one track, but if I wanted to have more than one available, how would I do that? I’ve provided a screenshot so you can see what I am doing.

screengrab.jpg1872×1056 553 KB

#11

By the way, I’m at the stage where I copy/paste javascript and I can edit variables, if guided correctly.

#12

Here’s the file for you to view

ythmplayer01.hype.zip (177.9 KB)

#13

Just put in a url with a playlist.

So, in the html widget put in a url using a soundcloud page that has a playlist or more then one track.

"https://w.soundcloud.com/player/?url=***HERE PUT YOUR URL TO A PLAYLIST***&amp;auto_play=false&amp;buying=true&amp;liking=true&amp;download=false&amp;sharing=true&amp;show_artwork=false&amp;show_comments=false&amp;show_playcount=true&amp;show_user=true&amp;hide_related=false&amp;visual=true&amp;start_track=0&amp;callback=true"

Example:

"https://w.soundcloud.com/player/?url=https://soundcloud.com/sinneida/sets/funky&amp;auto_play=false&amp;buying=true&amp;liking=true&amp;download=false&amp;sharing=true&amp;show_artwork=false&amp;show_comments=false&amp;show_playcount=true&amp;show_user=true&amp;hide_related=false&amp;visual=true&amp;start_track=0&amp;callback=true"

Without the double-quotes

#14

Just realised that you didn’t want a playlist :smile:

Here is an edited copy of your file. I have added the functionality to play one track or the other by giving the widgets unique id’s and then adding another function.

ythmplayer01-DBear.hype.zip (183.6 KB)

Also, btw you had several calls to go to the same scene. This is causing the document to loop over and over. I’ve removed these. Be careful!