Javascript Interface for Sound Cloud - javascript

I am building a site for someone who wants to have a sound cloud player on his site, but wants it skinned up to look integrated into the site. For the moment, I am using a script which will create an iframe element within a hidden div (which auto plays), and when a new item is selected to play, it clears the div, and replaces it with a new iframe element.
The next phase for the project requires a bit more integration though. I have been searching for javascript sound cloud integration, but all it seems to provide is creating a simple link that will play and pause the track (only on the users request) with a little bit of javascript to coax it into playing immediately.
Are there any other integrations for sound cloud via javascript that would allow for playing, pausing, stopping and getting information about the current play position (like from an event), as well as other events (like onstart, onstop, onpositionchange, etc)?

Ah ha, found the answer. Have a look on: http://developers.soundcloud.com/docs/api/sdks#javascript
The SC.stream seems to provide all the answers

Related

How to play background music in JavaScript without user interaction? [duplicate]

This question already has answers here:
Playing sound from INACTIVE browser tab
(2 answers)
Closed 12 months ago.
I have a site where the user can log in and can start and get calls. The login is automatic after the first time, so they can get to the contacts page without interacting with the site other than opening it. It's a site that automatically starts on the computers of the customers, just so they can receive or start calls, hence they might not even interact with the site.
When they receive a call, a background music starts, like this:
var audio = new Audio('ringtone.mp3');
audio.play();
Of course it does not work unless the customer pressed at least a button or hovered over something on the site, or anything like that. I am wondering if it's possible to start background music without user interaction? I understand it is no longer possible because people do not want annoying ads to play, but I'm wondering if there is a still working solution. Or can I somehow ask for their permission like for notifications? I would ask for it once during the first login, then it would get saved.
Edit:
It is not an SPA. Also my problem is not that it does not play sound when the tab is inactive. The problem is that there's a restriction on sounds which prevents JavaScript from playing sounds unless the user did anything on the site, interacted with it (hovering over a button, clicking a button, or anything). The user does not necessarily interact with the site because it starts up automatically, hence the problem when there's an incoming call.
Not sure if the OP's website is a SPA, if your using React, and using something like React-Router etc, this is a SPA (Single Page Application).
Playing Audio automatically in a normal browser window without some form of user action is blocked by most browsers. (sound policy).
Now the reason I asked the OP if his website was a SPA, these work well as Web App's, and Web Apps have a slightly different sound policy. aka, been able to play audio without user interaction.
So how do you make your website into a Web App,..
Easy, you tell the browser :)
For example in Chrome, under more tools, there is an option that says create shortcut.., this does more than just create a shortcut, it also puts your website in Web App mode.
This also works for mobile's too, eg. on Android there is the option Add to home screen,
And yes other browser have this feature too, but Firefox have decided to remove this feature, so it's not a browser I will use, or recommend to my customers anymore. Whats happening with Mozilla, they seem to have been taken over by stubborn dev's. Shame!!
So if the OP website is a SPA, all he has to do is use the create shortcut, and auto start this.
There are other benefits to making into a Web App too, like not having the address bar at the top etc. But again Mozilla have decided that's not what users want or need, thanks Moz, bye bye now..
What if's not SPA?.. ps, SPA just means there is no normal navigation / page loading. (might not have been obvious from my previous explanation).
Ok, things get a little bit more tricky. The OP mentions he auto-starts these in the morning, now the only issue here this prevents any user interaction, so obviously the sound policy kicks in.
So another idea, using something like puppeteer you could start the app, place a button on your website, that could play a startup sound, or even a silent mp3. You could then instruct puppeteer to click this button.

Remove All User Controls Facebook Video Embed

I'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?

Remove video when it is completed

I am looking to have a video start when a page loads, but once the video has completed, to hide the video (remove the layer possibly). I saw it on a yoga site a few years ago where a video message from the owner appeared over top the content when the page loaded but then dissapeared after the video was done. Not even sure where to begin looking for something like this.
This is something that needs to be handled at the player level. Many flash players or frameworks allow you to register for an event. One event might be on video complete. First get this working. You may not be able to do this from javascript. For example, adobe's strobe player requires you to write a swf plugin which would be loaded in the flash player. Not trivial.
After you have registered it, you can easily close the window by executing some javascript function.
Let me know if you have more questions.

How to detect time on a playing Flash video

I have a video playing on my page. I want to show and hide some div's when the video reaches a certain point. Lets say hide something on 10th second and show it again on 20th second.
I can easily do it in HTML5 with video tag and currentTime attribute but for IE I have to create the same functionality and I think with flash based videos (from YouTube or something like that).
Is there a way to detect the current time of a video playing on my website, embeded from YouTube, Metacafe or any other video sharing site?
I know I could detect it in flash and make it run some JavaScript function but I don't have flash nor have the skills to do it in AS3.
Is it possible to do it from JavaScript level or does any video sharing website out there provides this kind of functionality for their videos?
You could look into using flowplayer, it exposes events for meta data and timing.
You can use ExternalInterface to communicate between flash and js. So inside the flash app, when the video reaches the defined time, you can trigger a call to js function, doing whatever you need with the divs.
Since you will need to receive a stream and you need to detect a specific point in the video I thing you have read this inside flash.

Is it possible to interact with an embed movie via javascript?

I am embedding a movie in a web page with the embed tag, but I would like to interact and be interacted via javascript with the embedded movie in .mov. In particular, I would like to get the timings so I can perform actions on the web pages when a particular moment in the movie is reached (like adding subtitles or karaoke effects in the page as the movie plays).
Is this possible with standard HTML 4 and javascript, or do I need flash or maybe html 5 ?
Applies only to embedded flash content - post was made before OP clarified that he was using mov files.
Yes it is - provided you have access to the source code of the flash movie. Interaction between Flash movie and the javascript is done through ExternalInterface - check out the call() and addCallback() methods in that page.
As for getting the timings, you can use playheadTime property of the video player control. You might also want to check out the cue points - FLV player dispatches cuePoint events when the play head reaches cue points set at the time of creating the FLV.
You can Listen to these events and call appropriate javascript functions using ExternalInterface.
You most certainly can do this, I've done this with MOVs on a major project. Refer to this page for all you need to know.

Categories