javierarce/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.7.1");</script>

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
        color: #333;
        font-family: 'Lato', sans-serif;
        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
      }

    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>

    <script>
      $(function(){

         audio = new Audio();

        function searchTracks(query) {
          $.ajax({
            url: 'https://api.spotify.com/v1/search',
            data: {
              q: query,
              type: 'track'
            },
            success: function (response) {
                audio.pause();
              console.log(response)
              if (response.tracks.items.length) {
                var track = response.tracks.items[0];
                audio.src = track.preview_url;
                audio.play();
              }
            }
          });
        };


        function addCursorInteraction(viz, layer) {
          var hovers = [];
          var mapView = viz.mapView;

          layer.bind('featureOver', function(e, latlon, pxPos, data, layer) {
            hovers[layer] = 1;
            if(_.any(hovers))
              mapView.setCursor('pointer');
          }, mapView);

          layer.bind('featureOut', function(m, layer) {
            hovers[layer] = 0;
            if(!_.any(hovers))

              mapView.setCursor('auto');
          }, mapView);
        }

        cartodb.createVis('map', "http://arce.cartodb.com/api/v2/viz/364889de-9d90-11e4-8a28-0e018d66dc29/viz.json").done(function(vis, layers){
          var cartoDBLayer = layers[1];
          addCursorInteraction(vis, cartoDBLayer);
          cartoDBLayer.on('featureClick',  function(e, latlng, pos, data, layerNumber) {
            searchTracks(data.song + ", " + data.author);
          });
        });

      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="http://www.google.com/jsapi"></script>
	<script>google.load("jquery", "1.7.1");</script>

	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	color: #333;
	font-family: 'Lato', sans-serif;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	}

	</style>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>

	<script>
	$(function(){

	audio = new Audio();

	function searchTracks(query) {
	$.ajax({
	url: 'https://api.spotify.com/v1/search',
	data: {
	q: query,
	type: 'track'
	},
	success: function (response) {
	audio.pause();
	console.log(response)
	if (response.tracks.items.length) {
	var track = response.tracks.items[0];
	audio.src = track.preview_url;
	audio.play();
	}
	}
	});
	};


	function addCursorInteraction(viz, layer) {
	var hovers = [];
	var mapView = viz.mapView;

	layer.bind('featureOver', function(e, latlon, pxPos, data, layer) {
	hovers[layer] = 1;
	if(_.any(hovers))
	mapView.setCursor('pointer');
	}, mapView);

	layer.bind('featureOut', function(m, layer) {
	hovers[layer] = 0;
	if(!_.any(hovers))

	mapView.setCursor('auto');
	}, mapView);
	}

	cartodb.createVis('map', "http://arce.cartodb.com/api/v2/viz/364889de-9d90-11e4-8a28-0e018d66dc29/viz.json").done(function(vis, layers){
	var cartoDBLayer = layers[1];
	addCursorInteraction(vis, cartoDBLayer);
	cartoDBLayer.on('featureClick', function(e, latlng, pos, data, layerNumber) {
	searchTracks(data.song + ", " + data.author);
	});
	});

	});
	</script>
	</head>
	<body>
	<div id="map"></div>
	</body>
	</html>