Creating a docked music player for SoundCloud and mp3s - soundcloud

I'm trying to create a website that pulls free songs from multiple sources and lets users play them by clicking on their cover art, and launching them in a docked music player on the bottom of the page. Soundcloud's api offers me a lot of songs, but they are in a streaming api format, not in mp3 form.
The music players that SoundCloud offers are great for these streaming songs, but it won't work with the mp3s I'm pulling from other sites. Mp3 players like Jplayer are great for the mp3s, but I can't figure out how to get it to work with the streaming soundcloud format.
Think of a site like ex.fm: http://ex.fm/search/bob%20dylan
They pull their audio tracks from many sources but it is all playable through their one player.
Any help with this would be great.
Thanks

Check SoundCloud API
http://developers.soundcloud.com/docs/api/reference#tracks
There is a stream_url property for every track that's streamable outside of SoundCloud.
You need to register your app on Soundcloud and get API Key. With that key you can stream the tracks in your own player.
Edit, thanks to gryzzly. Example of SoundCloud API used with jPlayer:
var SOUNDCLOUD_API = 'http://api.soundcloud.com',
CLIENT_ID = '?client_id=REPLACE_WITH_YOUR_CLIENT_ID';
$(document).ready(function() {
var apiRequest;
$.get(SOUNDCLOUD_API + '/tracks/6981096.json' + CLIENT_ID)
.done(handleRepsonse);
function handleResponse (soundData) {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
// stream_url is good enough for jPlayer,
mp3: soundData.stream_url + CLIENT_ID
});
},
swfPath: "http://www.jplayer.org/2.1.0/js"
});
}
});
And you can check it live at jsbin.com/ajaken/4/edit

Related

Facebook Graph API: cannot playback live video stream (rtmps)

I'm trying to playback a live video that is streamed using the Facebook app. When I hit the /me/live_videos endpoint in the Graph API Explorer, I can see my stream:
{
"status": "LIVE",
"stream_url": "rtmps://rtmp.facebook.com:443/rtmp/1659765194096063?ds=1&s_efg=eyJxZV9ncm91cHMiOnsiZmJsaXZlX3NlcnZlcl9leHBlcmltZW50Ijp7InNlcnZpY2VfcG9ydCI6IjE3MDAwIn19fQ%3D%3D&a=ATiAO7IBgkxJpDTS",
"secure_stream_url": "rtmps://rtmp.facebook.com:443/rtmp/1659765194096063?ds=1&s_efg=eyJxZV9ncm91cHMiOnsiZmJsaXZlX3NlcnZlcl9leHBlcmltZW50Ijp7InNlcnZpY2VfcG9ydCI6IjE3MDAwIn19fQ%3D%3D&a=ATiAO7IBgkxJpDTS",
"embed_html": "<iframe src=\"https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fjonathan.apphus%2Fvideos%2F1659765184096064%2F&width=360\" width=\"360\" height=\"640\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" allowFullScreen=\"true\"></iframe>",
"id": "1659765194096063"
}
The stream is set to public, so anyone from within or outside of Facebook should be able to view it. My problem is that I am not able to view the stream using the "stream_url" (or "secure_stream_url"). I am trying to view it using VLC (have tried both the desktop app and the VLCKit lib on iOS).
Btw, the https link from the iframe works. I am able to view the stream in the browser using this link.
The stream_url returned is only for forwarding the encoded video stream, not for receiving.
If you want to view the live video, use dash_preview_url field of the live video.
You can use graph api to get this url by sending a GET request at this end point:
/LIVE_ID?fields=dash_preview_url&access_token=YourAccessToken
This will return a url which can be played using any Dash Player.
As far as I know, VLC currently does not have support for MPEG-DASH.

Facebook Live Stream Static URL

I was curious as to if there is anyway to have a certain page on Facebook have a static URL for it's Live Streams. I want this so I can use that static URL and embed it on a website (Weebly or Wordpress). Does anyone know of a way to do this?
Any and all input is greatly appreciated.
Thanks much!
No, currently there is no such direct feature provided by Facebook to achieve what you want to do. But there is definitely an indirect way of doing this using Facebook Graph API.
Indirect method of doing so:
Use your page ID to get status of last live video of your page.
/Page_ID?fields=live_videos.limit(1){status}
If you get status field as 'LIVE', it means your video is still LIVE on your page. Then, use the returned Video Id of Live video to make next request.
You can get the embed html of the live video using this request:
/Video_ID?fields=embed_html
Use the returned embed_html to embed live video in your wordpress site.
You just need to write the script that executes the above task and embed video conditionally if the status of video is LIVE otherwise not.
This is a pretty old question, but here's my solution:
Make a GET request to https://facebook.com/PAGE_ID/live
Capture the redirect - this request redirects to the URL you want
How I did it in Node.JS
const https = require("follow-redirects").https;
const PageID = "nexe32"
let redirected = false;
https.get({
host: 'facebook.com',
path: `/${PageID}/live`,
headers: {
"User-Agent": 'curl/7.43.0'
},
beforeRedirect: (opts) => {
if(!redirected) {
redirected = true;
} else {
console.log(opts.href); // the URL you want
redirected = false;
}
}
});
``

Retrieve Dailymotion Games chat messages

I would like to retrieve Dailymotion Games chat messages using their API, but the official documentation is not very clear on this point => https://faq.dailymotion.com/hc/en-us/articles/203886473-Dailymotion-live-API-for-developers
I tried to use the API to retrieve comments of a video with my live video id (endpoint => https://api.dailymotion.com/video/[LIVE_VIDEO_ID]/comments), but it doesn't return any chat messages...
Do you know if it's possible?
Ok, I've searched a little bit more and I found a more elegant way to do that avoiding the scraping method.
In fact the embed chat page (returned by the chat_embed_url) use EventSource to get notified when a new message arrived.
With this good NPM package, I've been able to retrieve chat messages in only 5 lines:
var EventSource = require('eventsource');
var url = 'http://dmchat.dailymotion.com/rooms/[USERNAME]-[CHANNEL_ID]';
var es = new EventSource(url);
es.addEventListener('message', function (e) {
console.log(e.data);
});
A comment on a video is different from the chat feature, this is why chat messages don't appear in comments.
You can't get individual chat messages so far, but you can get the chat embed code on two different ways:
using the Dailymotion API, you can request the chat_embed_html or chat_embed_url fields on the video object
or you can get it directly from the video pages on dailymotion games, by clicking on the settings icon below the chat, and click "copy embed code"

Playing successive tracks on Soundcloud

I currently allow users to log in through Soundcloud and I created a list of track ID's of their music.
With this data, I created an array of all the track ID and randomized it. How can I go about playing these songs? This works for individual tracks:
SC.stream("/tracks/###", function(sound){
sound.play();
});
But how can I get a notice for when the song ends so I can begin a new track?
update:
I could record the duration of the song and setTimeout the stopping and playing of a new track but maybe there is a more Soundcloud way to do this.
Thanks
Use the onfinish method
SC.stream("/tracks/###",
{onfinish: function(){ alert('track finished');}},
function(sound){sound.play();
});
Here is another thread around the same issue.
How can I automatically move to next sound after previous track completes using the Soundcloud Javascript SDK for streaming?

Access Facebook albums from a flash app

I want to create a flash Facebook application in which, after pressing a button, the user will be able to browse his/her photo albums and choose a photo. How should i do that? What will be the code under the button to gain authentication from any user using this application?
Thanks.
I am currently writing a facebook application for a university assignment that will allow the user to do everything you can do in facebook, but via the flash player window. You will need a few basic things happening in order to do it.
User log in and authentication - this must be done via Facebook - using OAuth authentication, and meeting all of facebook's security policies
register the application with facebook
Use the Graph API (facebook's developer's toolkit) to get the necessary functions that will communicate with facebook via flash.
In Flash itself you will use a bunch of URLRequest functions to send out to FB for information, then you will need to retrieve that data responses and store them to variables (extracting data with a few lines of code is easy, something like this;
//initialise variables
public var photoURL:String;
var Request:URLRequest = new URLRequest("http://www.whatever the url for the graph api service you are using which is founf from FB");
//that ^^ will send off a request for the url, you then want to use the returned data by registering an event handler like this below
functionName.addEventListener(onComplete, completeHandler);
functionName(event, EVENT)
{
var loader:URLLoader = new URLLoader(Request);
var data:XML = new XMLData(load.loader); //i think this is right but not 100% sure, fiddle with it
//then you want to extract the data that is returned, for example, extracting xml data from a rest request works by hitting data from the xml by specifying a path to the object you want. an example of xml is this <rsp stat="ok"><photos ......more code="morecode"><photo url="url of photo"></photo</photos> so you can hit the url in that example like this;
photoURL = data.photos.photo.#url; //this line will grab the photo url for you, allowing you to dynamically create an array and assign photos to the flash stage according to the url you get
}
this is fairly advanced stuff and I am assuming that you have some decent knowledge on AS3, XML, and the FB API, if you need more help just reply