forked from zen-audio-player/zen-audio-player.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (122 loc) · 5.74 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Listen to YouTube videos, without the distracting visuals">
<meta name="author" content="Shakeel Mohamed">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="D3SjNR3tmNYOusESQijh_oH5SGmU9QsAIVwlqizwRBU" />
<title>Zen Audio Player</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/plyr/dist/plyr.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript">window._trackJs = { token: "f58d0b7c4b4248939fddc582f9e55c9d" };</script>
<script src="bower_components/trackjs/tracker.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/keen-js/dist/keen.min.js"></script>
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
<script src="bower_components/typeahead.js/dist/typeahead.jquery.min.js"></script>
<script src="bower_components/urijs/src/URI.min.js"></script>
<script src="js/zap-common.js"></script>
<script src="js/everything.js"></script>
<script src="bower_components/plyr/dist/plyr.js"></script>
</head>
<body>
<header>
<!-- The logo & description -->
<figure>
<a href="https://zenplayer.audio/" title="Zen Audio Player" class="zen-logo">
<img src="img/zen-audio-player-905.png" class="img-100" alt="Zen Audio Player logo">
</a>
</figure>
<hgroup>
<h1>Zen Audio Player</h1>
<h2 class="color-grey">Listen to YouTube videos, without the distracting visuals.</h2>
<h2 class="color-grey hide flash" id="mobile-message"></h2>
</hgroup>
</header>
<div id="container">
<!-- The form -->
<form id="form">
<div class="input-group">
<input type="text" id="v" name="v" class="input-search color-grey" placeholder="Search, YouTube video ID, or URL">
<span class="input-group-button">
<button class="btn btn-search" id="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<div id="search-results">
<h3>Search Results</h3>
<ul></ul>
</div>
<div id="zen-error" class="hide flash flash-error"></div>
<!-- The video, along with related content & messages -->
<div id="audioplayer">
<h3>
<a id="zen-video-title" class="plyr__cite plyr__cite--video"></a>
</h3>
<div id="playerControls">
<button class="btn" id="togglePlayer">
Show Player
</button>
<button class="btn" id="toggleDescription">
Show Description
</button>
<button class="btn" id="toggleRepeat">
Repeat Track
</button>
</div>
<!-- Plyr controls' icons and Plyr player itself -->
<div id="plyr-svg" hidden>
</div>
<div class="plyr">
<audio></audio>
</div>
<br>
<div id="zen-video-description"></div>
<br>
</div>
<button id="demo" class="btn">
<i class="fa fa-mouse-pointer"></i>
Click for Demo
</button>
</div>
<footer>
<!-- Twitter hashtag button: #ZenAudioPlayer -->
<div id="tweetButton"></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document, "script", "twitter-wjs");</script>
<!-- Attribution, and links -->
<div class="color-grey">
<p>Created by <a href="https://twitter.com/_Shakeel" target="_blank">@_Shakeel</a> and <a href="https://github.com/zen-audio-player/zen-audio-player.github.io/graphs/contributors" target="_blank">others.</a></p>
<p>Source available on <a href="https://github.com/zen-audio-player/zen-audio-player.github.io" target="_blank">GitHub</a></p>
<p><a href="https://chrome.google.com/webstore/detail/zen-youtube-audio-player/jlkomkpeedajclllhhfkloddbihmcjlm" target="_blank">Get the Chrome extension</a> - (<a href="https://github.com/zen-audio-player/extension-chrome" target="_blank">source</a>)</p>
</div>
<br>
<!-- Sponsor links -->
<h3>Sponsored by:</h3>
<div class="sponsor">
<a href="https://keen.io/" class="sponsor-a" target="_blank">
<img src="img/keen_logo.png" alt="Keen Logo" class="img-100">
</a>
<a href="https://trackjs.com/" class="sponsor-a" target="_blank">
<img src="img/trackjs_logo.png" alt="TrackJS Logo" class="img-100">
</a>
<div class="clear-both"></div>
</div>
</footer>
<!-- Schema.org structured data -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://zenplayer.audio",
"logo": "https://zenplayer.audio/img/zen-audio-player-905.png"
}
</script>
</body>
</html>