My rails application uses the host http://myhost.dev to search for music through the vk.com API. The API provides a search method called audio.search. Below is the code snippet from my search.js.erb file which is executed via a remote link to the search action of a controller:
VK.api('audio.search',{q: "<%= j params[:query] %>", auto_complete: "1", sort: "2", count: "200"},function(data){
if(data.response) {
$(function() {
var audio = $('audio');
var a = audiojs.create(audio);
var first = $('ol a').attr('data-src');
console.log(first);
$(".song-title").text($('ol a').first().text());
$('ol li').first().addClass('playing');
audio.load(first);
});
}
else {
/* handle error */
}
});
The application.js file initializes the vk application as follows:
VK.init({
apiId: '3650724'
});
Everything works fine except on a different route, for example, http://myhost.dev/foo. On this route, there is another audio tag and the code looks like this:
:javascript
var artist = '#{ @artist.name }';
var track_name = $('ol a').first().attr('data-src');
VK.api('audio.search',{q: artist + " - " + track_name, auto_complete: "1", sort: "0", count: "1"},function(data){
if(data.response) {
$(function() {
alert("lol");
var audio = $('audio');
var a = audiojs.create(audio);
var first_track = data.response[1];
$(".song-title").text(first_track.title);
$('ol li').first().addClass('playing');
console.log(first_track.url);
audio.load(first_track.url);
});
}
else {
alert("fail!");
}
});
Although the response is valid JSON, I encounter an error when loading the resource URL to the player:
XMLHttpRequest cannot load http://cs4967.vk.me/u5366455/audios/some.mp3. Origin http://myhost.dev is not allowed by Access-Control-Allow-Origin.