Syncing soundcloud widget with timeline

rrrnnn 2015-05-28 10:05:52 UTC #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: http://forums.tumult.com/t/sync-animations-to-video-audio/980 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!

Possible To Create Audio Playlists in Hype?

Get ToneDen Soundcloud player to work in Hype

rrrnnn 2015-06-01 12:07:33 UTC #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!

jameskoh (james koh) 2015-06-01 12:24:21 UTC #3

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

rrrnnn 2015-06-01 12:56:08 UTC #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 :/

jameskoh (james koh) 2015-06-01 13:04:33 UTC #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.

jameskoh (james koh) 2015-06-01 13:34:14 UTC #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.

rrrnnn 2015-06-01 20:19:39 UTC #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!

Daniel 2016-01-05 15:51:29 UTC #8

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

DBear (Community Leader, Freelancer) 2016-01-05 18:09:18 UTC #9

Invoice is in the post

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

KirkMarkarian (Kirk Markarian) 2016-02-03 23:19:10 UTC #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.

KirkMarkarian (Kirk Markarian) 2016-02-03 23:20:40 UTC #11

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

KirkMarkarian (Kirk Markarian) 2016-02-03 23:25:05 UTC #12

Here's the file for you to view

ythmplayer01.hype.zip (177.9 KB)

DBear (Community Leader, Freelancer) 2016-02-04 01:14:28 UTC #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

DBear (Community Leader, Freelancer) 2016-02-04 02:02:35 UTC #14

Just realised that you didn't want a playlist

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!