D3 Examples - Playlist

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spotify Playlist Generator</title>
<style type="text/css">
body {
    padding: 20px;
}
#search-form, .form-control {
    margin-bottom: 20px;
}
.cover {
    width: 300px;
    height: 300px;
    display: inline-block;
    background-size: cover;
}
.cover:hover {
    cursor: pointer;
}
.cover.playing {
    border: 5px solid #e45343;
}
th
{
    background-color: gray;
    color: white;
    cursor: pointer;
    text-align: center;
}
TD
{
    border-style: solid;
    border-width: 1px;
    text-align: left;
}
</style>
</head>
<body>
   <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
 
<div class="container">
    <h1>Search for an Artist</h1>
    <p>Type an artist name and click on "Search". Then, click on any album from the results to play 30 seconds of its first track.</p>
    <form id="album-search-form">
        <input type="text" id="album-query" value="" class="form-control" placeholder="Type an Album Name"/>
        <input type="submit" id="album-search" class="btn btn-primary" value="Album Search" />
    </form>
    <form id="artist-search-form">
        <input type="text" id="artist-query" value="" class="form-control" placeholder="Type an Artist Name"/>
        <input type="submit" id="artist-search" class="btn btn-primary" value="Artist Search" />
    </form>
    <div id="albums"></div>
    <div id="artists"></div>
    <HR>
 
 <table id="tracks" style="width:90%">
 <thead>
        <tr>
            <th title="Click to select column">
                Artist
            </th>
            <th title="Click to select column">
                Album
            </th>
            <th title="Click to select column">
                Track
            </th>
            <th title="Click to select column">
                Spotify Playlist
            </th>
        </tr>
    </thead>
    
    </table>    
​
    <HR>
</div>
<script id="album-results-template" type="text/x-handlebars-template">
    {{#each albums.items}}
    <div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"></div>
-    {{/each}}
</script>
<script id="artist-results-template" type="text/x-handlebars-template">
    {{#each artists.items}}
    <div data-artist-id="{{id}}">{{name}} : {{id}}</div>
     {{printTracks id}}  
    {{/each}}
</script>
<script id="tracks-results-template" type="text/x-handlebars-template">
   {{#each tracks}}
        <tr>
            <td>{{album.name}}</td>
            <td>{{artists.0.name}}</td>
            <td>{{name}}</td>
            <td>{{uri}}</td>
        </tr>
    {{/each}}  
</script>
<script>
​
$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "spotify.csv",
        dataType: "text",
        success: function(data) {
        processData(data);
        }
     });
     
     $('#tracks thead th').each(function(index) {
        $(this).click(function() {
            SelectColumn(index, 'tracks');
        });
    });
});
​
function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];
​
    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {
​
            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    
for (i = 0; i < allTextLines.length; i++) { 
//    console.log(allTextLines[i]) ;
    searchArtists(allTextLines[i]);
}
   //alert(lines);
}
​
// find template and compile it
var albumtemplateSource = document.getElementById('album-results-template').innerHTML,
    artisttemplateSource = document.getElementById('artist-results-template').innerHTML,
    tracktemplateSource = document.getElementById('tracks-results-template').innerHTML,
    albumtemplate = Handlebars.compile(albumtemplateSource),
    artisttemplate = Handlebars.compile(artisttemplateSource),
    tracktemplate = Handlebars.compile(tracktemplateSource),
    artistPlaceholder = document.getElementById('artists'),
    albumPlaceholder = document.getElementById('albums'),
    trackPlaceholder = document.getElementById('tracks'),
    playingCssClass = 'playing',
    audioObject = null;
​
var newcontent = document.createElement('div');
var newtrackscontent = document.createElement('tbody');
    
var fetchTracks = function (albumId, callback) {
    $.ajax({
        url: 'https://api.spotify.com/v1/albums/' + albumId,
        success: function (response) {
            callback(response);
        }
    });
};
​
​
var searchAlbums = function (query) {
    $.ajax({
        url: 'https://api.spotify.com/v1/search',
        data: {
            q: query,
            type: 'album'
        },
        success: function (response) {
            albumPlaceholder.innerHTML = albumtemplate(response);
        }
    });
};
​
var searchArtists = function (query) {
    $.ajax({
        url: 'https://api.spotify.com/v1/search?limit=1',
        data: {
            q: query,
            type: 'artist'
        },
        success: function (response) {
         
    newcontent.innerHTML = artisttemplate(response);
    while (newcontent.firstChild) {
        artistPlaceholder.appendChild(newcontent.firstChild);
    }
     }      
    });
};
​
var searchTracks = function (artistId) {
    $.ajax({
        url: 'https://api.spotify.com/v1/artists/' + artistId + '/top-tracks?country=gb',
        success: function (response) {
            newtrackscontent.innerHTML = tracktemplate(response);
            while (newtrackscontent.firstChild) {
                trackPlaceholder.appendChild(newtrackscontent.firstChild);
            }
        }
    });
};
​
Handlebars.registerHelper("printTracks", function(id) {
    searchTracks(id);
​
});
​
albums.addEventListener('click', function (e) {
    var target = e.target;
    if (target !== null && target.classList.contains('cover')) {
        if (target.classList.contains(playingCssClass)) {
            audioObject.pause();
        } else {
            if (audioObject) {
                audioObject.pause();
            }
            fetchTracks(target.getAttribute('data-album-id'), function (data) {
                audioObject = new Audio(data.tracks.items[0].preview_url);
                audioObject.play();
                target.classList.add(playingCssClass);
                audioObject.addEventListener('ended', function () {
                    target.classList.remove(playingCssClass);
                });
                audioObject.addEventListener('pause', function () {
                    target.classList.remove(playingCssClass);
                });
            });
        }
    }
});
​
function SelectColumn(index, tableId) {
    var columnText = '';
    var columnSelector = '#' + tableId + ' tr > td:nth-child(' + (index + 1) + ')';
    var cells = $(columnSelector);
​
    // clear existing selections
    if (window.getSelection) { // all browsers, except IE before version 9
        window.getSelection().removeAllRanges();
    }
​
​
    if (document.createRange) {
        cells.each(function(i, cell) {
            var rangeObj = document.createRange();
            rangeObj.selectNodeContents(cell);
            window.getSelection().addRange(rangeObj);
            columnText = columnText + '\r\n' + rangeObj.toString();
        });
​
​
    }
    else { // Internet Explorer before version 9
        cells.each(function(i, cell) {
            var rangeObj = document.body.createTextRange();
            rangeObj.moveToElementText(cell);
            rangeObj.select();
            columnText = columnText + '\n' + rangeObj.toString();
        });
    }
​
    alert(columnText);
}
​
document.getElementById('artist-search-form').addEventListener('submit', function (e) {
    e.preventDefault();
    searchArtists(document.getElementById('artist-query').value);
}, false);
​
document.getElementById('album-search-form').addEventListener('submit', function (e) {
    e.preventDefault();
    searchAlbums(document.getElementById('album-query').value);
}, false);
</script>
</body>
</html> 
 
 
 
 
    