forked from derick-montague/responsive-jPlayer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (107 loc) · 3.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">
<title>Responsive jPlayer Layout</title>
<link rel="stylesheet" href="circle.skin/circle.player.css" />
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="white-noise-player" class="cp-jplayer"></div>
<header>
<h1 id="logo"></h1>
</header>
<div id="wrapper">
<div id="content">
<div id="music">
<h2>Music</h2>
<div class="player-wrapper">
<div id="cp_container">
<div class="cp-container">
<div class="cp-buffer-holder">
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder">
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a href="#" class="cp-play" tabindex="1">play</a></li>
<li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
</ul>
</div>
<div class="jp-playlist">
<ul>
<li></li> <!-- Empty <li> so your HTML conforms with the W3C spec -->
</ul>
</div>
</div>
</div>
</div>
<h2>About Me</h2>
<div id="about">
<p>
This was designed by a friend of mine with the purpose of streaming his music. It was a fun project and I am grateful he selected me to code it and allowed me to add it to <a href="/portfolio">my portfolio</a>.
</p>
</div>
<div id="contact">
<h2>Contact Me</h2>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="scripts/whitenoise.player.min.js"></script>
<script>
$(document).ready(function(){
// Get the Playlist from the xml file
$.ajax({
type: "GET",
url: "./playlist/playlist.xml",
dataType: "xml",
success: function(result) {
$(result).find('track').each(function(){
var self = $(this),
mytitle = self.find('title').text(),
myartist = self.find('artist').text(),
mymp3 = self.find('mp3').text(),
myduration = self.find('duration').text(),
playlist = JSON.stringify({ title: mytitle, artist : myartist, mp3 : mymp3, duration : myduration }),// Convert the XML nodes into JSON formatted strings
playlistObject = $.parseJSON(playlist); // Convert the JSON formatted strings into JSON objects and add to playlist
myPlaylist.add(playlistObject);
});
}
});
// WhiteNoise Player instance
var whiteNoise = new CirclePlayer("#white-noise-player", {}, {
cssSelectorAncestor: "#cp_container"
});
// WhiteNoise Playlist instance
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#white-noise-player",
cssSelectorAncestor: "#cp_container",
}, [
// Playlist is created when the page loads via ajax
],
{
playlistOptions: {
autoPlay: false, // self explanatory
loopOnPrevious: false, // If loop is active, the playlist will loop back to the end when executing previous()
shuffleOnLoop: true, // If loop and shuffle are active, the playlist will shuffle when executing next() on the last item
enableRemoveControls: false, // Adds an x that allows user to remove songs from playlist
displayTime: 0, // how fast the playlist transitions on page load
addTime: 'fast', // transition time when adding a song
removeTime: 'fast', // transition time when removing a song
shuffleTime: 'slow' // transition time when shuffling playlist
},
swfPath: "../scripts",
supplied: "mp3", // add the file format extension you will be streaming
wmode: "window"
});
});
</script>
</body>
</html>