Skip to content

Instantly share code, notes, and snippets.

@coreyweb
Created October 28, 2014 20:59
Show Gist options
  • Save coreyweb/807b2af4b719619c636a to your computer and use it in GitHub Desktop.
Save coreyweb/807b2af4b719619c636a to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment