coreyweb/itunes track list by album

## itunes track list by album
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>iTunes Album Playlist</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- your project css here -->
<link rel="stylesheet" href="styles/style.css">

<!-- web fonts -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<style type="text/css" media="screen">

  .text_center {
    text-align: center;
  }

  .text_right {
    text-align: right;
  }

  .font11 {
    font-size: 11px;
  }

  .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    border-top: 1px dotted #ccc;
  }

</style>

</head>

<body>

<!--
    NOTE: The album info is for the album Word of Mouth, by Jaco Pastorius
    This code does not include an audio player... that's a separate project
-->

<?php
// album info
  $albumName = 'Word of Mouth';
  $collectionID = '504179391';
?>


  <div class="container">
    <div class="row">

      <h3>Preview <em><?php echo $albumName ?></em></h3>

      <div class="table-responsive">

        <table class="table table-hover">
          <thead>
            <tr>
              <th class="text_right">#</th>
              <th>Song Title</th>
              <th class="text_right">Time</th>
              <th class="text_right">Price</th>
              <th></th>
            </tr>
          </thead>

          <?php
            $itunes = 'https://itunes.apple.com/lookup?id='. urlencode($collectionID) . '&entity=song&media=music';
            $json = file_get_contents($itunes);
            $array = json_decode($json, true);

              foreach($array['results'] as $value) {
                if ($value['wrapperType'] != 'collection') {
          ?>

          <tr>
            <td class="text_right">
              <?php echo $value['trackNumber']; ?>
            </td>
            <td>
              <a href="<?php echo $value['previewUrl']; ?>" title="Play Track">
                <i class="fa fa-play-circle"></i>
              </a>

              <?php echo $value['trackName']; ?>
            </td>

            <td class="text_right">
              <?php
                $trackTime = $value['trackTimeMillis'];

                // convert milliseconds format to HH:MM:SS
                $seconds= $trackTime/1000;

                //for seconds
                if($seconds> 0) {
                  $sec= "" . ($seconds%60);
                  if($seconds % 60 <10)
                  {
                    $sec= "0" . ($seconds%60);
                  }
                }

                //for mins
                if($seconds > 60) {
                  $mins= "". ($seconds/60%60);
                  if(($seconds/60%60)<10 && $hours != null)
                  {
                    $mins= "0" . ($seconds/60%60);
                  }
                } else {
                  $mins= "00";
                }

                //for hours
                if($seconds/60 > 60) {
                  $hours= "". ($seconds/60/60);
                  if(($seconds/60/60) < 10)
                  {
                    $hours= "0" . ($seconds/60/60);
                  }
                }

                // determine if separator needed
                if ($hours != null) {
                  $hourSep = ':';
                }

                if ($mins != null) {
                  $minsSep = ':';
                }

                echo $hours . $hourSep . $mins . $minsSep . $sec; //00:15:00

              ?>
            </td>

            <td class="text_right">

              <?php if ($value['trackPrice'] == '-1') { ?>

                <span class="font11">Album Only</span>

              <?php } else { ?>

                $<?php echo $value['trackPrice']; ?>

              <?php } ?>

            </td>

            <td class="text_right">

              <?php if ($value['trackPrice'] != '-1') { ?>

                <a href="<?php echo $value['trackViewUrl']; ?>" class="btn btn-xs btn-primary pull-right" target="_blank">Buy</a></td>

              <?php } ?>

            </td>

          </tr>

          <?php
              }
            }
          ?>

        </table>

      </div><!-- .table-responsive -->

    </div><!-- .row -->
  </div><!-- .container -->


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>iTunes Album Playlist</title>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

	<!-- your project css here -->
	<link rel="stylesheet" href="styles/style.css">

	<!-- web fonts -->
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->

	<style type="text/css" media="screen">

	.text_center {
	text-align: center;
	}

	.text_right {
	text-align: right;
	}

	.font11 {
	font-size: 11px;
	}

	.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
	border-top: 1px dotted #ccc;
	}

	</style>

	</head>

	<body>

	<!--
	NOTE: The album info is for the album Word of Mouth, by Jaco Pastorius
	This code does not include an audio player... that's a separate project
	-->

	<?php
	// album info
	$albumName = 'Word of Mouth';
	$collectionID = '504179391';
	?>


	<div class="container">
	<div class="row">

	<h3>Preview <em><?php echo $albumName ?></em></h3>

	<div class="table-responsive">

	<table class="table table-hover">
	<thead>
	<tr>
	<th class="text_right">#</th>
	<th>Song Title</th>
	<th class="text_right">Time</th>
	<th class="text_right">Price</th>
	<th></th>
	</tr>
	</thead>

	<?php
	$itunes = 'https://itunes.apple.com/lookup?id='. urlencode($collectionID) . '&entity=song&media=music';
	$json = file_get_contents($itunes);
	$array = json_decode($json, true);

	foreach($array['results'] as $value) {
	if ($value['wrapperType'] != 'collection') {
	?>

	<tr>
	<td class="text_right">
	<?php echo $value['trackNumber']; ?>
	</td>
	<td>
	<a href="<?php echo $value['previewUrl']; ?>" title="Play Track">
	<i class="fa fa-play-circle"></i>
	</a>

	<?php echo $value['trackName']; ?>
	</td>

	<td class="text_right">
	<?php
	$trackTime = $value['trackTimeMillis'];

	// convert milliseconds format to HH:MM:SS
	$seconds= $trackTime/1000;

	//for seconds
	if($seconds> 0) {
	$sec= "" . ($seconds%60);
	if($seconds % 60 <10)
	{
	$sec= "0" . ($seconds%60);
	}
	}

	//for mins
	if($seconds > 60) {
	$mins= "". ($seconds/60%60);
	if(($seconds/60%60)<10 && $hours != null)
	{
	$mins= "0" . ($seconds/60%60);
	}
	} else {
	$mins= "00";
	}

	//for hours
	if($seconds/60 > 60) {
	$hours= "". ($seconds/60/60);
	if(($seconds/60/60) < 10)
	{
	$hours= "0" . ($seconds/60/60);
	}
	}

	// determine if separator needed
	if ($hours != null) {
	$hourSep = ':';
	}

	if ($mins != null) {
	$minsSep = ':';
	}

	echo $hours . $hourSep . $mins . $minsSep . $sec; //00:15:00

	?>
	</td>

	<td class="text_right">

	<?php if ($value['trackPrice'] == '-1') { ?>

	<span class="font11">Album Only</span>

	<?php } else { ?>

	$<?php echo $value['trackPrice']; ?>

	<?php } ?>

	</td>

	<td class="text_right">

	<?php if ($value['trackPrice'] != '-1') { ?>

	<a href="<?php echo $value['trackViewUrl']; ?>" class="btn btn-xs btn-primary pull-right" target="_blank">Buy</a></td>

	<?php } ?>

	</td>

	</tr>

	<?php
	}
	}
	?>

	</table>

	</div><!-- .table-responsive -->

	</div><!-- .row -->
	</div><!-- .container -->


	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

	</body>
	</html>