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;
Related
I'm trying to create a web application for videos, I decided to start by configuring the videos, in case of problem, creating blob url for videos.
It turns out that I'm not sure what terms to use to search in google and the ones I used do not find anything very simple or straightforward.
I would like to know how I can create a blob url for videos and what would be the best way, since I have already seen topics using FileReader and MediaSource and some others, so I would like to know the simplest way to do this.
I'm testing on a direct html, without external libraries or external files.
var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["http://localhost/assets/mp4/video.mp4"],{"type" : "video\/mp4"});
var value = URL.createObjectURL(file);
$(document).ready(function(){
$('#MyVideo').attr('src',value);
});
Generates a blob link but does not load the video
Edit:
For further questions from beginners like me, I got the expected result with the script below:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/assets/mp4/video.mp4');
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
var blob = new Blob(([xhr.response]));
var url = URL.createObjectURL(blob);
document.getElementById('_video').src = url;
};
I'm trying to save a post request data to a google spreadsheet. However, the data is saved as undefined.
The original post uses a form and uses jquery. See the link below. But I'm trying to pass an array also without the use of jquery.
I'm using the following app script without using jquery - https://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/
I'm posting the code here.
function sendData(data) {
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "spreadsheeturl";
xmlhttp.open("post", theUrl);
//xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xmlhttp.send(JSON.stringify(data))
}
I found the answer, you have to uncomment a block in the app script if you are passing JSON data.
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'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();