windhamdavid 4 years ago
parent
commit
1c76550925
7 changed files with 425 additions and 51 deletions
  1. 109 0
      css/player.css
  2. 5 2
      functions.php
  3. 7 0
      js/amp.min.js
  4. 107 0
      js/jplayer.min.js
  5. 73 8
      js/last.fm.js
  6. 107 29
      page-music.php
  7. 17 12
      style.css

+ 109 - 0
css/player.css

@@ -0,0 +1,109 @@
+/* @override http://macs.local/david/wp-content/themes/dw/css/jplayer.css */
+
+div.jp-audio-stream {
+	background: #eee;
+	padding: 2px;
+	width: 44px;
+}
+div.jp-interface {
+	
+}
+div.jp-audio-stream ul.jp-controls {
+	padding:0px !important;
+	margin:0px !important;
+}
+div.jp-interface ul.jp-controls li {
+	padding:0px !important;
+	margin:0px !important;
+}
+div.jp-interface ul.jp-controls a {
+	display:block;
+	overflow:hidden;
+	text-indent:-9999px;
+}
+a.jp-play,
+a.jp-pause {
+	width:40px;
+	height:40px;
+}
+a.jp-play {
+	background: url("../img/jplayer.jpg") 0 0 no-repeat;
+}
+a.jp-play:hover {
+	background: url("../img/jplayer.jpg") -41px 0 no-repeat;
+}
+a.jp-pause {
+	background: url("../img/jplayer.jpg") 0 -42px no-repeat;
+	display: none;
+}
+a.jp-pause:hover {
+	background: url("../img/jplayer.jpg") -41px -42px no-repeat;
+}
+div.jp-current-time {
+	margin: 0px 0px 0 5px;
+}
+
+div#player-container{
+	width: 350px;
+}
+
+div#player{
+	padding: 20px;
+	height: 50px;
+	width: 220px;
+	background-color: white;
+	float: left;
+	color: #555555;
+}
+#song-information{
+	width: 50%;
+	float: left;
+	text-align: left;
+}
+#controls{
+	width: 50%;
+	float: left;
+	text-align: right;
+}
+div#amplitude-album-art{
+	height: 90px;
+	width: 90px;
+	background-color: black;
+	float: left;
+}
+div#amplitude-album-art img{
+	height: 90px;
+	width: 90px;
+}
+#amplitude-play-pause{
+    width: 15px;
+    height: 17px;
+    cursor: pointer;
+    float: right;
+}
+.amplitude-paused{
+    background-image: url('../img/small-gray-play.png');
+    background-repeat: no-repeat;
+}
+.amplitude-playing{
+    background-image: url('../img/small-gray-pause.png');
+    background-repeat: no-repeat;
+}
+#amplitude-volume-slider{
+	width: 100%;
+}
+#amplitude-now-playing-name{
+	font-family: 'PT Sans', sans-serif;
+	font-weight: 700;
+	font-size: 12px;
+}
+#amplitude-now-playing-album{
+	font-family: 'PT Sans', sans-serif;
+	font-weight: 400;
+	font-size: 12px;
+}
+#amplitude-current-time{
+	font-family: 'PT Sans', sans-serif;
+	font-size: 10px;
+	font-weight: 400;
+}

+ 5 - 2
functions.php

@@ -62,12 +62,15 @@ function dw_scripts() {
 		wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init.js', 'jquery', '', true );	
 	}
 	
-	if ( is_page('music') ) {	
+	if ( is_page('music') ) {
+		wp_enqueue_style( 'jplayercss', get_template_directory_uri() . '/css/player.css');
 		wp_enqueue_script( 'scripts-o', get_template_directory_uri() . '/js/scripts-o.js', 'jquery', '', true );
 		//wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/script-o.min.js', 'jquery', '', true );
 		wp_enqueue_script( 'init-o', get_template_directory_uri() . '/js/init-o.js', 'jquery', '', true );
 		//wp_enqueue_script( 'init', get_template_directory_uri() . '/js/init-o.min.js', 'jquery', '', true );
-		wp_enqueue_script( 'charts', get_template_directory_uri() . '/js/Chart.min.js', 'jquery', '', true );
+		//wp_enqueue_script( 'jplayer', get_template_directory_uri() . '/js/jplayer.min.js', 'jquery', '', true );
+		wp_enqueue_script( 'jplayer', get_template_directory_uri() . '/js/amp.min.js', 'jquery', '', true );
+		wp_enqueue_script( 'chart', get_template_directory_uri() . '/js/chart.min.js', 'jquery', '', true );
 		wp_enqueue_script( 'last-fm', get_template_directory_uri() . '/js/last.fm.js', 'jquery', '', true );
 	}
 

File diff suppressed because it is too large
+ 7 - 0
js/amp.min.js


File diff suppressed because it is too large
+ 107 - 0
js/jplayer.min.js


+ 73 - 8
js/last.fm.js

@@ -349,7 +349,7 @@ $('.music-typed').waypoint(function() {
 
 (function( $ ) {
 	$.fn.lfmr = function(options){
-		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&format=json&limit=17";
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&format=json&limit=20";
 		var tracks = [];
 		function isLoadedr (recentElement) {
 			for (var i = 0; i < tracks.length; i++){
@@ -372,8 +372,10 @@ $('.music-typed').waypoint(function() {
 		});
 	};
 	
+	$('.recent').lfmr();
+	
 	$.fn.lfmtw = function(options){
-		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=7day&format=json&limit=20";
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=7day&format=json&limit=25";
 		var tracks = [];
 		function isLoadedt (tracksElement) {
 			for (var i = 0; i < tracks.length; i++){
@@ -419,6 +421,59 @@ $('.music-typed').waypoint(function() {
 		});
 	};
 	
+	$('.wtracks').lfmtw();
+	$('.wartists').lfmaw();
+	
+	$.fn.lfmtm = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettoptracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=3month&format=json&limit=45";
+		var tracks = [];
+		function isLoadedt (tracksElement) {
+			for (var i = 0; i < tracks.length; i++){
+				var markup = $("<li class='list-group-item'>" + tracks[i].artist + " - <span class='artist'>" + tracks[i].title + "</span><span class='badge'>" + tracks[i].played + "</span></li>");
+				tracksElement.append(markup);
+			}
+		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.toptracks.track).each(function(){
+					tracks.push ({
+						title: this.name,
+						artist: this.artist.name,
+						played: this.playcount,
+					});
+				});
+				isLoadedt($this);
+			});
+		});
+	};
+	
+	$.fn.lfmam = function(options){
+		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=3month&format=json&limit=45";
+		var artists = [];
+		function isLoadeda (artistElement) {
+			for (var i = 0; i < artists.length; i++){
+				var markup = $("<li class='list-group-item'>" + artists[i].aname + "<span class='badge'>" + artists[i].played + "</span></li>");
+				artistElement.append(markup);
+			}
+		}
+		return this.each(function(){
+			var $this = $(this);
+			$.getJSON( urla, function(data){
+				$(data.topartists.artist).each(function(){
+					artists.push ({
+						aname:	this.name,
+						played: this.playcount
+					});
+				});
+				isLoadeda($this);
+			});
+		});
+	};
+	
+	$('.mtracks').lfmtm();
+	$('.martists').lfmam();
+	
 	$.fn.lfma = function(options){
 		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=6month&format=json&limit=50";
 		var artists = [];
@@ -465,6 +520,9 @@ $('.music-typed').waypoint(function() {
 			});
 		});
 	};
+	
+	$('.artists').lfma();
+	$('.tracks').lfmt();
 
 	$.fn.lfm = function(options){
 		var url = "https://ws.audioscrobbler.com/2.0/?method=user.gettopalbums&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&period=12month&format=json&limit=200";
@@ -495,11 +553,18 @@ $('.music-typed').waypoint(function() {
 			});
 		});
 	};
+	
+	$('.albums').lfm();
+	
 })( jQuery );
 
-$('.recent').lfmr();
-$('.wtracks').lfmtw();
-$('.wartists').lfmaw();
-$('.artists').lfma();
-$('.tracks').lfmt();
-$('.albums').lfm();
+
+amplitude_config = {
+	"amplitude_songs": [
+		{
+			"url": "http://64.207.154.37:8008/stream",
+			"live": true
+		}
+	],
+	"amplitude_volume": 100
+}

+ 107 - 29
page-music.php

@@ -30,34 +30,42 @@ get_header(); ?>
 						</div>
 					</div>
 					<div class="row">
-						<div class="col-sm-2">
-							<ul class="list-group">
-								<li class="list-group-item active">Tracks</li>
-									<li class='list-group-item'>Year<span class='badge'>7151</span></li>
-									<li class='list-group-item'>Month<span class='badge'>687</span></li>
-									<li class='list-group-item'>Day<span class='badge'>37</span></li>
-								</li>
-							</ul>
-							<ul class="list-group">
-								<li class="list-group-item active">Albums</li>
-									<li class='list-group-item'>Year<span class='badge'>160</span></li>
-									<li class='list-group-item'>Month<span class='badge'>11</span></li>
-								</li>
-							</ul>
-						</div>
-						<div class="col-sm-2">		
-							<div id="key">
+						<div class="col-md-4">
+							<div class="row">
+								<div class="col-sm-6">
+									<ul class="list-group">
+										<li class="list-group-item active">Tracks</li>
+											<li class='list-group-item'>Year<span class='badge'>7151</span></li>
+											<li class='list-group-item'>Month<span class='badge'>687</span></li>
+											<li class='list-group-item'>Day<span class='badge'>37</span></li>
+										</li>
+									</ul>
+									<ul class="list-group">
+										<li class="list-group-item active">Albums</li>
+											<li class='list-group-item'>Year<span class='badge'>160</span></li>
+											<li class='list-group-item'>Month<span class='badge'>11</span></li>
+										</li>
+									</ul>
+								</div>
+								<div class="col-sm-6">		
+									<div id="key">
 
+									</div>
+								</div>
 							</div>
 						</div>
-						<div class="col-sm-4">
-							<div class="music-types">
-								<canvas id="typechart" width="300" height="300"></canvas>
-							</div>
-						</div>
-						<div class="col-sm-4">
-							<div class="music-typed">
-								<canvas id="artchart" width="300" height="300"></canvas>
+						<div class="col-md-8">
+							<div class="row">
+								<div class="col-sm-6">
+									<div class="music-types">
+										<canvas id="typechart" width="300" height="300"></canvas>
+									</div>
+								</div>
+								<div class="col-sm-6">
+									<div class="music-typed">
+										<canvas id="artchart" width="300" height="300"></canvas>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -89,21 +97,77 @@ get_header(); ?>
 							<div id="linechart"></div>
 						</div>
 					</div>
-
 					<div class="row">
-						<div class="col-sm-4">
-							<h5 class="cm-type"><em>Recent</em></h5>
+						<div class="col-sm-12">
+							
+						</div>
+					</div>
+					
+					<div class="row">
+						<div class="col-sm-12">							
+							<?php class NowPlaying{
+							    private $url;
+							    private $noTrackPlayingMessage;
+							    function __construct($user, $api_key){
+							        $this->url  = 'http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&limit=1';
+							        $this->url .= '&user=' . $user . '&api_key=' . $api_key;
+							        $this->noTrackPlayingMessage = 'All Quiet - Silence is Golden';
+							    }
+							    public function getNowPlaying(){
+							        $xml = simplexml_load_file($this->url);
+							        $track = $xml->recenttracks->track;
+							        $nowplaying = $track->attributes()->nowplaying;
+							        if($nowplaying){
+							            $artist = $track->artist;
+							            $songname = $track->name;
+										$albumname = $track->album;
+							            return '<img src="../../wp-content/themes/dw/img/eq.gif"> ' . $artist . ' - ' . $songname  . ' : ' . $albumname;
+							        }
+							        else{
+							            return $this->noTrackPlayingMessage;
+							        }
+							    }
+							    public function setNoTrackPlayingMessage($messageIn){
+							        $this->noTrackPlayingMessage = $messageIn;
+							    }
+							} 
+							$nowPlaying = new NowPlaying('windhamdavid', 'e12ea1d0253898ee9a93edfe42ffdeab');
+							?>
+							<h5 class="cm-type"><em>Now Playing</em></h5>
+							<div class="panel panel-default">
+								<div class="panel-heading"><h5><?php echo $nowPlaying->getNowPlaying(); ?></h5></div>
+								<div id="player-container">
+									<div id="player">
+										<div id="song-information">
+											<span id="amplitude-now-playing-name">WTMJ 620 AM</span><br>
+											<span id="amplitude-now-playing-album">Milwaukee, WI</span>
+										</div>
+									<div id="controls">
+										<div id="amplitude-play-pause" class="amplitude-paused"></div><br>
+											<span id="amplitude-current-time">0:00</span>
+										</div>
+										<input class="bar" type="range" id="amplitude-volume-slider" value="0"/>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-12">
+							<h5 class="cm-type"><em>Recently Played</em></h5>
 							<ul class="list-group">
 								<div class="recent"></div>
 							</ul>
 						</div>
+					</div>
+					<div class="row">
 						<div class="col-sm-4">
 							<h5 class="cm-type"><em>Artists: 7 Days</em></h5>
 							<ul class="list-group">
 								<div class="wartists"></div>
 							</ul>
 						</div>
-						<div class="col-sm-4">
+						<div class="col-sm-8">
 							<h5 class="cm-type"><em>Tracks: 7 Days</em></h5>
 							<ul class="list-group">
 								<div class="wtracks"></div>
@@ -112,6 +176,20 @@ get_header(); ?>
 					</div>
 					<div class="row">
 						<div class="col-sm-4">
+							<h5 class="cm-type"><em>Artists: 3 Month</em></h5>
+							<ul class="list-group">
+								<div class="martists"></div>
+							</ul>
+						</div>
+						<div class="col-sm-8">
+							<h5 class="cm-type"><em>Tracks: 3 Month</em></h5>
+							<ul class="list-group">
+								<div class="mtracks"></div>
+							</ul>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-4">
 							<h5 class="cm-type"><em>Artists: 6 Months</em></h5>
 							<ul class="list-group">
 								<div class="artists"></div>

+ 17 - 12
style.css

@@ -188,10 +188,13 @@ h1.super {
   .offcanvas {
     display: none;
   }
+  article.single {
+  	padding: 70px 20px 70px;
+  }
 }
 @media (min-width: 768px) {
   .container {
-    width: 750px;
+    width: 760px;
   }
   .offcanvas {
     display: none;
@@ -210,11 +213,19 @@ h1.super {
   .offcanvas {
     display: none;
   }
+	article.single {
+		background: #fff;
+		padding: 70px 80px 140px;
+	}
 }
 @media (min-width: 1200px) {
   .container {
     width: 1170px;
   }
+  article.single {
+  	background: #fff;
+  	padding: 70px 100px 140px;
+  }
 
 }
 @media (min-width: 1310px) {
@@ -930,16 +941,15 @@ article#main .entry-content {
 article h2 {
 	font-size: 28px;
 }
-article.single {
-	background: #fff;
-	padding: 70px 100px 140px;
-}
 article.home {
 	background: rgba(255, 255, 255, 0.9);
 	padding: 70px 60px;
 	border-radius: 10px;
 	min-height: 280px;
 }
+article.single {
+	background: #fff;
+}
 .post {
 	margin-bottom: 40px;
 }
@@ -992,10 +1002,7 @@ span.right {
 /*===== Wordpress =====*/
 
 @media (max-width: 768px) {
-	article.single {
-		background: #fff;
-		padding: 10px;
-	}
+
 }
 @media (min-width: 768px) {
 
@@ -1017,9 +1024,7 @@ span.right {
 #content,
 #content input,
 #content textarea {
-	color: #333;
-	font-size: 16px;
-	line-height: 24px;
+	color: #111;
 }
 #content p,
 #content ul,