Artist Album Preview

iTunes API ajax example

by Ford Heacock

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container Aligner">

<div class="Aligner-item">

  <h1 class="text-center">
  Artist Album Preview!
  </h1>
  <div class="text-center">
  <input type="text" id="search" placeholder="search for an artist" class="text-center">
  <button id="button">
  search
  </button>
  </div>
  <div id="albums">
  <p class="text-center" style="margin-top:1em;">
  Choose an album!
  </p>
  <select id="albumSelect">
        
    </select>
  </div>
  
  <div id="results"></div>
    
  </div>
</div>

CSS

.Aligner {
  height: 100vh; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}

.wrapper {
  border: black solid 1px;
  margin: 3em;
  padding: 1em;
}

#albums {
  display: none;
}

JavaScript

$('#button').click(function() {

    getAlbums();
    
      function getAlbums(){
      
      $('#results').empty();
      $('#albumSelect').empty();
      
      //artist name
      let search = document.querySelector('#search').value;
      //search based on artist name
      $.getJSON('https://itunes.apple.com/search?term=' + encodeURI(search), function(data) {
          let artistId = data.results[0].artistId;

          //get first album from artist
          $.getJSON('https://itunes.apple.com/lookup?id=' + artistId + '&entity=album', function(data) {

              let collectionIds = [];
              $.each(data, function(i, item) {
                  for (var i = 1; i < item.length; i++) {
                      collectionIds.push(item[i].collectionId);
                      $('#albumSelect').append('<option>' + item[i].collectionName + '</option>');
                  }
                  $('#albums').show();
                  console.log(collectionIds);
              });

              $('#albumSelect').on('change', function() {
                  let thisAlbum = ($('#albumSelect').prop('selectedIndex'));
                  //look up by collectionId
                  $.getJSON('https://itunes.apple.com/lookup?id=' + collectionIds[thisAlbum] + '&entity=song', function(data) {
                      $('#results').empty();
                      let template = `
                        <div class="wrapper">
                          <h4 class="text-center">${data.results[0].artistName}</h4>
                              <a href="${data.results[0].collectionViewUrl}" target="_blank"><img class="center-block" src="${data.results[0].artworkUrl100}"/></a>
                          <p>${data.results[1].trackName}</p>  
                          <audio controls>
                            <source src="${data.results[1].previewUrl}" type="audio/mpeg">
                            Your browser does not support the audio element.
                          </audio>
    ...