Syncing soundcloud widget with timeline

Elements Audio & Video
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
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!

15

Hi, not sure if anyone will read this after this long but i try my luck.
I did a new player with the help of your instructions. It works perfect by testing localy, on safari and on mobile but it does not work as soon I upload it on my server.
I even uploaded yours to test and it did not work neither. Any idea where the problem could be?
thanks.

16

Do you see any errors in the browser console? Can you share a url?

1 Like
18

Thank you Daniel for your fast reply!

DeBREATH.com/boxbreath.html

There are some errors:
changed those to https from http

Now the player seems to work on the mac but not on ios safari.

there are still some other api.js errors.

Thank you

19

I just tried it out and was at least able to play on iOS 14.5 with mobile safari. The only errors I saw in the console were access errors related to the http://ent/web-sourcemaps/api.js-27d0ec1de3c5.map file, which is just for javascript debugging purposes and doesn't affect functionality.

Can you point out what the errors are and the steps you are using to reproduce? also please include your iOS version and device model.

1 Like
20

Thank you Jonathan for checking on it.
I played and researched for a couple more hours and after finding the post from @DBear I could make it work!

So the solution is the put the wiget in a rectangle instead of the html widget.

I will put some more time in it to figure other functions.
Thanks for the awesome support!

<3

1 Like