I'm currently using Node to scrape a blog that stores selected data in a JSON file. When scraping a blog post that contains an embedded track from Soundcloud I seem to only be able to collect the iframe src and not that actual track link (either soundcloud link or stream link).
When I scrape the iframe src url I seem to only be able to get a link that's in the following format:
https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/120261008&color=000000&auto_play=false&show_artwork=false
If I'm not able to scrape the track URL is there a way I'm able to manipulate how the above link is stored into the array? In order for this link to be usable I need to only store the url=https%3A//api.soundcloud.com/tracks/120261008 (minus the url=).
But then the problem with this is that the %3A needs replacing to a :
What's the best way to manipulate the url to achieve the desired output url either when it's being stored or when it's being called?
I'm not exactly sure what you're planning on doing with the track URL once you have it, but to get the permalink URL for a track/playlist your going to need a two step approach. First you're going to need to parse the url parameter in the query string in the iframe src:
CLIENT_ID = 'client_id=b45b1aa10f1ac2941910a7f0d10f8e28';
var src = 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/120261008&color=000000&auto_play=false&show_artwork=false',
match = src.match(/url=([^&]*)/),
resource = match[0],
stream = decodeURIComponent(match[1])+'/stream/?'+CLIENT_ID;
Then you're going to need to make an HTTP request to SoundCloud's resolve API to actually convert that resource into the permalink URL:
var url = 'http://api.soundcloud.com/resolve.json?'+resource+'&'+CLIENT_ID;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function(){
var data = JSON.parse(xhr.responseText);
// do something with the data
console.log(data.permalink_url);
};
xhr.send();
Related
How do I get the data type from a file which is fetched from an URL string, e.g:
https://firebasestorage.googleapis.com/v0/b/MyApp.appspot.com/o/alertImgs%2Falert-1521356210850.jpg?alt=media&token=b6ad7e6e-1eb0-4e05-a11d-e59c8f1df365 (just an example)
When I fetch the URL with javascript from firebase firestore I need to know which data type have the file to put it on a video or image tag.
How can I acomplish this?
I'm working with ionic 3 and firebase.
You can parse url and get last part of url as file name from which you can get extension of file and decide.
function getFileNameFromUrl(url) {
var el = document.createElement('a');
el.href = url;
return decodeURIComponent(el.pathname).split("/").pop();
}
console.log(getFileNameFromUrl("https://firebasestorage.googleapis.com/v0/b/MyApp.appspot.com/o/alertImgs%2Falert-1521356210850.jpg?alt=media&token=b6ad7e6e-1eb0-4e05-a11d-e59c8f1df365"));
I'm working on new project.
and I'm trying to get the video id from the URL
the URL needs to be "localhost/MyVid/Watch/xSw23PzA"
xSw23PzA - is the id and I don't know how to get that.
I'm using socket.io to send data for the HTML file, and I have no idea how I can get the Video Id.
If you're always using the same schema
var url = "localhost/MyVid/Watch/xSw23PzA";
var videoId = url.split('/').pop();
I'm saving large text files as objects in Parse. They are too large to save directly as text in a normal String column.
Later, I want to retrieve these files and process the text in JavaScript.
Here's the code I'm using to store the text in a Parse file:
// Inputs
var long_text_string = '...'; // A long string
var description = '...'; // Description of this string
// Convert string to array of bytes
var long_text_string_bytes = [];
for (var i = 0; i < long_text_string.length; i++) {
long_text_string_bytes.push(long_text_string.charCodeAt(i));
}
// Create Parse file
var parsefile = new Parse.File("long_text_string.txt", long_text_string_bytes);
parsefile.save({
success: function() {
// Associate file with a new object...
var textFileObject = new Parse.Object("TextFile");
textFileObject.set('description', description);
textFileObject.set('file', parsefile);
textFileObject.save();
}
});
How do I then retrieve the content of the data file, convert it back from bytes to string, and end up with it stored in a normal string variable in JavaScript?
UPDATE
I've tried three different approaches, all to no avail...
Method 1 [preferred]
Use Parse commands to process the file
It's simple to use the Parse JS API to retrieve my TextFile object, and use parseFile = object.get('file'); to get the Parse file itself. The URL of the file is then parseFile.url().
But then what? I can't do anything with that URL in JS because of cross-origin restrictions.
There is no documentation on how to use the JS API to access the byte data contained within the file. There appears to be an Android command, getDataInBackground, documented here, so I am hopeful there is a JS equivalent....
Method 2
Use the Parse REST API to fire a XMLHTTP request
Unfortunately, it seems that Parse have not enabled CORS for their file URLs. I have tried the following code, adapted from a Parse.com blog post (blog.parse.com/learn/engineering/javascript-and-user-authentication-for-the-rest-api/):
var fileURL = textFileObject.get('file').url();
var xhr = new XMLHttpRequest();
xhr.open("GET", fileURL, true);
xhr.setRequestHeader("X-Parse-Application-Id", appId);
xhr.setRequestHeader("X-Parse-REST-API-Key", restKey);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
};
var data = JSON.stringify({ message: "" });
xhr.send(data);
But I get the following error:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin '<my host>' is therefore not allowed access.
The response had HTTP status code 403
A bit of a Google suggests that the file URLs are not CORS-enabled (parse.com/questions/access-control-allow-origin--2).
(Note that the above code works for a normal object request, it's only when you use the fileURL that it errors).
Method 3
Use a browser to circumvent cross-origin restrictions
I can create a webpage with an empty iframe and set iframe.src to parseFile.url(). The content of the file appears on the web page. But I still end up with cross-origin issues when I try to access the DOM content of the iframe! Not to mention loading each file onto a webpage one by one is an incredibly substandard solution.
I have been using Javascript to try and retrieve the URI of a song from the Spotify WEB API using the below code:
<script type='text/javascript'>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://ws.spotify.com/search/1/track.json?q=foo", false);
xhr.send();
var uri = (xhr.track);
</script>
I want to put in a song name as the 'q' parameter and store the uri of the top result in a variable. How would I go about this?
You need to parse the response as JSON and then pick the href attribute of the first object in the tracks list.
In code, following your example, it could look like this:
var uri = JSON.parse(xhr.response).tracks[0].href;
I am building a javascript component for Firefox that will take in a zip code, and will return the current weather conditions.
The sample code that weather underground uses jQuery, but as I understand it, I cannot include this code in my javascript component, as javascript does not have the functionality to include other javascript files.
At any rate, I have built up my skeleton code. It takes in the zip code and builds up the url
(example: http://api.wunderground.com/api/e17115d7e24a448e/geolookup/conditions/q/22203.json)
I have tried downloading the data from that url, via the following method:
getWeatherByUrl: function(url)
{
var persist = Components.classes["#mozilla.org/embedding/browser/nsWebBrowserPersist;1"].createInstance(Components.interfaces.nsIWebBrowserPersist);
var file = Components.classes["#mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD",Components.interfaces.nsILocalFile);
file.append("weather-forecaster.dat");
var urlURI = Components.classes["#mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService).newURI(url, null, null);
persist.saveURI(urlURI,null,null,null,"",file);
return url;
}
This should download the file to the user's profile directory. It indeed does create the file there. However, it does not look like it contains the json data from weather underground.
What exactly is going on? How would I download the file? I believe that there is a query going on when that url is passed to weather underground, but that shouldn't matter as the .json page is what gets spit out from them, right?
Is there a way to do this without downloading the file, but by streaming it and parsing it?
You can simply use XMLHttpRequest to download this data:
var request = Components.classes["#mozilla.org/xmlextras/xmlhttprequest;1"]
.createInstance(Components.interfaces.nsIXMLHttpRequest);
request.open("GET", "http://api.wunderground.com/api/Your_Key/geolookup/conditions/q/IA/Cedar_Rapids.json");
request.addEventListener("load", function(event)
{
var data = JSON.parse(request.responseText);
alert(data.response.version);
}, false);
request.send(null);