index.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="x-ua-compatible" content="ie=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Daveo Radio</title>
  7. <meta name="description" content="">
  8. <link rel="stylesheet" href="css/style.min.css">
  9. </head>
  10. <body>
  11. <header>
  12. <div class="container">
  13. <div class="intro-text">
  14. </div>
  15. </div>
  16. </header>
  17. <div class="outer-container">
  18. <div class="container">
  19. <div class="row">
  20. <!-- START Player -->
  21. <div class="col-sm-6">
  22. <section id="audio" class="bg-light-gray">
  23. <!-- START Audio Player -->
  24. <div id="audio_player" class="panel panel-default">
  25. <div class="panel-body">
  26. <div id="player">
  27. <div id="song-information">
  28. <div class="row">
  29. <div class="col-xs-8">
  30. <img id="radio" src="" title="radio" width="25px" style="float:left;margin-right:15px;">
  31. <span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
  32. <span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
  33. </div>
  34. <div class="col-xs-4">
  35. <span id="amplitude-current-time">0:00</span>
  36. </div>
  37. </div>
  38. </div>
  39. <div id="controls">
  40. <div id="amplitude-play-pause" class="amplitude-paused"></div>
  41. <br />
  42. <div class="row">
  43. <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -6px 0 0 20px;font-size:20px"></span>
  44. <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=73>
  45. <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 20px 0 0;font-size:20px"></span>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="well current-track">
  50. <h6 style="margin:0;"><img id="eq" src="" title="eq" width="12px" style="float:left;margin:0 10px 0 0;"> <span id="amplitude-now-playing-name"><span id="track">* Off Air *</span></span></h6>
  51. </div>
  52. </div>
  53. <!-- END Audio Player -->
  54. <!-- START Playlist -->
  55. <div class="tabs-below">
  56. <div class="tab-content scrollable-list">
  57. <div class="tab-pane active" id="recent">
  58. <ul class="list-group">
  59. <div class="recent"></div>
  60. </ul>
  61. </div>
  62. <div class="tab-pane" id="tracks">
  63. <ul class="list-group">
  64. <div class="tracks"></div>
  65. </ul>
  66. </div>
  67. <div class="tab-pane" id="albums">
  68. <ul class="list-group">
  69. <div class="albums"></div>
  70. </ul>
  71. </div>
  72. <div class="tab-pane" id="artist">
  73. <ul class="list-group">
  74. <div class="artists"></div>
  75. </ul>
  76. </div>
  77. <div class="tab-pane" id="archives">
  78. <ul class="list-group">
  79. <button id="play" class="list-group-item"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> <b>11/5/15</b>: Interview w/ John Rogers <span class="badge">18:14</span></button>
  80. <button id="play" class="list-group-item"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> <b>12/1/15</b>: Monologue "On This and That" <span class="badge">7:42</span></button>
  81. </ul>
  82. </div>
  83. <div class="tab-pane" id="schedule">
  84. <ul class="list-group">
  85. <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
  86. <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
  87. <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
  88. <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
  89. <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
  90. <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
  91. <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
  92. <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
  93. <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
  94. <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
  95. </ul>
  96. </div>
  97. </div>
  98. <ul class="nav nav-tabs scrollable-list-footer">
  99. <li class="active"><a href="#recent" data-toggle="tab" data-original-title="Recent" data-placement="top"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a></li>
  100. <li><a href="#tracks" data-toggle="tab" data-original-title="Tracks" data-placement="top"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a></li>
  101. <li><a href="#albums" data-toggle="tab" data-original-title="Albums" data-placement="top"><span class="glyphicon glyphicon-cd" aria-hidden="true"></span></a></li>
  102. <li><a href="#artist" data-toggle="tab" data-original-title="Artist" data-placement="top"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
  103. <li><a href="#archives" data-toggle="tab" data-original-title="Archives" data-placement="top"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></a></li>
  104. <li><a href="#schedule" data-toggle="tab" data-original-title="Schedule" data-placement="top"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a></li>
  105. </ul>
  106. </div>
  107. </div>
  108. <!-- END Playlist -->
  109. <!-- START Connection Error Modal -->
  110. <div class="modal fade" id="connection-error" tabindex="-1" role="dialog" aria-labelledby="support" aria-hidden="true">
  111. <div class="modal-dialog" role="document">
  112. <div class="modal-content">
  113. <div class="modal-header">
  114. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  115. <h4 class="modal-title">Off the Air</h4>
  116. </div>
  117. <div class="modal-body">
  118. <div class="alert alert-danger" role="alert">
  119. <p><span class="glyphicon glyphicon-alert" aria-hidden="true"></span> <b>Connection Error</b>:</p>
  120. <div class="progress" id="error-reconnecting">
  121. <div class="progress-bar progress-bar-danger progress-bar-striped" id="connection-error-reconnecting" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-transitiongoal="100">
  122. </div>
  123. </div>
  124. <p><span id="error-reconnecting-again"class="label label-danger">ERROR</span></p>
  125. <p>Unable to connect with <a href="http://stream.davidawindham.com/"><i>stream.davidawindham.com</i></a>. I only play music when I'm listening to it live and the rest of the time the stream is offline. There is no reason to be here unless I am. Try again some other time or <a href="https://davidawindham.com/contact">contact me</a>.</p>
  126. </div>
  127. </div>
  128. <div class="modal-footer">
  129. <button type="button" id="connection-error-retry" class="btn btn-danger">Retry</button>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <!-- END Connection Error Modal -->
  135. </section>
  136. </div>
  137. <!-- END Player -->
  138. <!-- START Connect -->
  139. <div class="col-sm-6">
  140. <section id="request-line" class="bg-light-gray">
  141. <div class="panel panel-default">
  142. <!-- START Room Tabs -->
  143. <div class="row-fluid">
  144. <ul id="rooms_tabs" class="nav nav-tabs">
  145. <li class="dropdown">
  146. <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-original-title="Options" data-placement="bottom"><span class="glyphicon glyphicon-th" aria-hidden="true"></span>&nbsp;<b class="caret"></b></a>
  147. <ul class="dropdown-menu">
  148. <li><a href="#modal_joinroom" data-toggle="modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Join room</a></li>
  149. <li><a id="b_leave_room" href="#"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Leave room</a></li>
  150. <li class="divider"></li>
  151. </ul>
  152. </li>
  153. <li id="Lobby_tab" class="active"><a href="#Lobby" data-toggle="tab" data-original-title="Chat" data-placement="bottom"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span><span class="hidden-tab">Lobby</span></a></li>
  154. <li><a href="#social" data-toggle="tab" data-original-title="Social" data-placement="bottom"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a></li>
  155. <li><a href="#call" data-toggle="tab" data-original-title="Phone" data-placement="bottom"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></a></li>
  156. <li><a href="#video" data-toggle="tab" data-original-title="Video" data-placement="bottom"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span></a></li>
  157. </ul>
  158. </div>
  159. <!-- END Room Tabs -->
  160. <!-- START Rooms -->
  161. <div id="rooms" class="tab-content">
  162. <div class="tab-pane active" id="Lobby">
  163. <div class="well">
  164. <div class="row-fluid">
  165. <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
  166. <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
  167. </div>
  168. </div>
  169. <div class="row-fluid">
  170. <div id="room_users">
  171. <span class="label label-success">online:</span> <span class="label label-danger">Radio-bot</span>
  172. </div>
  173. </div>
  174. </div>
  175. <!-- START message -->
  176. <div class="panel-footer">
  177. <div class="row-fluid">
  178. <form class="form">
  179. <div class="input-group">
  180. <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
  181. <span class="input-group-btn">
  182. <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
  183. </span>
  184. </div>
  185. </form>
  186. <!--<button id="set_nick" class="btn btn-success" data-toggle="modal" data-target="#modal_setnick"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Set Nick</button>-->
  187. </div>
  188. </div>
  189. <!-- END message -->
  190. </div>
  191. <!-- START Social -->
  192. <div class="tab-pane" id="social">
  193. <div id="fb-root"></div>
  194. <script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
  195. <div class="well social-comments">
  196. <div class="fb-comments" data-href="https://www.facebook.com/davidawindham" data-numposts="5" data-colorscheme="dark"></div>
  197. </div>
  198. </div>
  199. <!-- END Social -->
  200. <!-- START Call -->
  201. <div class="tab-pane" id="call">
  202. <div id="audio">
  203. <div class="well">
  204. <div class="row-fluid audio">
  205. <p><span class="label label-primary">Local audio:</span></p>
  206. <audio id="audio1" autoplay controls muted></audio>
  207. <p><span class="label label-primary">Remote audio:</span></p>
  208. <audio id="audio2" autoplay controls></audio>
  209. </div>
  210. <div class="row-fluid">
  211. <p><b>Help</b>: This audio/video call features are only supported by the most recent versions of Mozilla Firefox and Google Chrome</p>
  212. <p>You can also call <b>803-712-3283(DAVE)</b> to reach me</p>
  213. </div>
  214. </div>
  215. <div class="panel-footer">
  216. <div id="buttons">
  217. <button id="callButton" class="btn btn-success">Call</button>
  218. <button id="hangupButton" class="btn btn-danger">Hang Up</button>
  219. </div>
  220. <select id="codec" class="selectpicker" data-style="btn-primary">
  221. <option value="opus">Opus</option>
  222. <option value="ISAC">iSAC 16K</option>
  223. <option value="G722">G722</option>
  224. <option value="PCMU">PCMU</option>
  225. </select>
  226. </div>
  227. </div>
  228. </div>
  229. <!-- END Call -->
  230. <!-- START Video -->
  231. <div class="tab-pane" id="video">
  232. <div class="video">
  233. <div class="well">
  234. <video id="localVideo" autoplay muted></video>
  235. <video id="remoteVideo" autoplay></video>
  236. </div>
  237. <div class="panel-footer">
  238. <button id="startButton" class="btn btn-success">Start</button>
  239. <button id="callButton" class="btn btn-primary">Call</button>
  240. <button id="hangupButton" class="btn btn-danger">Hang Up</button>
  241. </div>
  242. <div>
  243. </div>
  244. <!-- END Video -->
  245. </div>
  246. <!-- END Rooms -->
  247. </div>
  248. <!-- START Modal -->
  249. <div id="modal_joinroom" class="modal fade">
  250. <div class="vertical-alignment-helper">
  251. <div class="modal-dialog modal-sm vertical-align-center">
  252. <div class="modal-content">
  253. <div class="modal-header">
  254. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  255. <h3>Join Room</h3>
  256. </div>
  257. <div class="modal-body">
  258. <input id="room_name" type="text" class="form-control" placeholder="Room Name">
  259. <p><small>&nbsp;Room will be created if it doesn't exist</small></p>
  260. </div>
  261. <div class="modal-footer">
  262. <a id="b_join_room" href="#" class="btn btn-success">Join Room</a>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. </div>
  268. <div id="modal_setnick" class="modal fade" data-keyboard="false" data-backdrop="static" >
  269. <div class="vertical-alignment-helper">
  270. <div class="modal-dialog modal-sm vertical-align-center">
  271. <div class="modal-content">
  272. <form data-toggle="validator" role="form">
  273. <div class="modal-body">
  274. <div class="form-group has-feedback">
  275. <label class="control-label" for="inputSuccess2">Set a Nickname:</label>
  276. <div class="input-group">
  277. <span class="input-group-addon">@</span>
  278. <input id="nickname" type="text" class="form-control" pattern="^[a-zA-Z]+$" minlength="3" maxlength="25" placeholder="letters only (min 3)" required>
  279. </div>
  280. <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  281. </div>
  282. </div>
  283. <div class="modal-footer">
  284. <div class="form-group">
  285. <button id="b_set_nickname" type="submit" class="btn btn-success">OK</button>
  286. </div>
  287. </div>
  288. </form>
  289. </div>
  290. </div>
  291. </div>
  292. </div>
  293. <!-- End Modal -->
  294. <!-- START Auth Modal -->
  295. <div class="modal fade" id="auth-modal" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="support" aria-hidden="true">
  296. <div class="modal-dialog" role="document">
  297. <div class="modal-content">
  298. <div class="modal-header">
  299. <h4 class="modal-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> On Air</h4>
  300. </div>
  301. <div class="modal-body">
  302. <h5>Get Off My Lawn!</h5>
  303. <ol>
  304. <li>This site is for demonstration purposes.</li>
  305. <li>There is no reason to be here unless I am.</li>
  306. <li>If you don't know me, you shouldn't be here.</li>
  307. <li>Do Not Share this URL with Anyone.</li>
  308. <li>Do Not Post this URL Anywhere (that means you Dad... no Facebook!)</li>
  309. </ol>
  310. </div>
  311. <div class="modal-footer">
  312. <button type="submit" class="btn btn-success" data-dismiss="modal" data-toggle="modal" data-target="#modal_setnick">Understood</button>
  313. </div>
  314. </div>
  315. </div>
  316. </div>
  317. <!-- END Auth Modal -->
  318. </section>
  319. </div>
  320. <!-- End Connect -->
  321. </div>
  322. </div>
  323. </div>
  324. <!-- START Footer NAV -->
  325. <div class="container">
  326. <div class="col-sm-12">
  327. <div class="row">
  328. <div class="panel panel-bottom">
  329. <ul class="nav navbar-nav">
  330. <li><a href="#connected" data-toggle="modal" data-target="#connected"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span>&nbsp;Listeners</a></li>
  331. <li><a href="#charts" data-toggle="modal" data-target="#charts"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;Charts</a></li>
  332. </ul>
  333. <ul class="nav navbar-nav navbar-right">
  334. <li><a href="#about" data-toggle="modal" data-target="#about"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;About</a></li>
  335. <li><a href="#help" data-toggle="modal" data-target="#help"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;Help</a></li>
  336. <li><a href="#support" data-toggle="modal" data-target="#support"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>&nbsp;Support</a></li>
  337. </ul>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. <!-- END Footer NAV -->
  343. <!-- START Listeners Modal -->
  344. <div class="modal fade" id="connected" tabindex="-1" role="dialog" aria-labelledby="connected" aria-hidden="true">
  345. <div class="modal-dialog modal-lg" role="document">
  346. <div class="modal-content">
  347. <div class="modal-body">
  348. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  349. <div class="listeners">
  350. </div>
  351. </div>
  352. </div>
  353. </div>
  354. </div>
  355. <!-- END Listerners Modal -->
  356. <!-- START Charts Modal -->
  357. <div class="modal fade" id="charts" tabindex="-1" role="dialog" aria-labelledby="charts" aria-hidden="true">
  358. <div class="modal-dialog modal-lg" role="document">
  359. <div class="modal-content">
  360. <div class="modal-body">
  361. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  362. <div class="chart">
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. </div>
  368. <!-- END Charts Modal -->
  369. <!-- START Info Modal -->
  370. <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about" aria-hidden="true">
  371. <div class="modal-dialog" role="document">
  372. <div class="modal-content">
  373. <div class="modal-header">
  374. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  375. <h4 class="modal-title">About</h4>
  376. </div>
  377. <div class="modal-body">
  378. <p>This is just a little place I can share some music and talk with friends. I enjoy listening to music and I spend quite a bit of time doing so. I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
  379. <p><b>Kudos</b>: This page is powered by <a href="">Linode</a>, <a href="">Node.js</a>, <a href="">Express</a>, <a href="">Socket.io</a>, and <a href="">Icecast-kh</a>.</p>
  380. </div>
  381. <div class="modal-footer">
  382. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  383. </div>
  384. </div>
  385. </div>
  386. </div>
  387. <!-- END Info Modal -->
  388. <!-- START Help Modal -->
  389. <div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="help" aria-hidden="true">
  390. <div class="modal-dialog" role="document">
  391. <div class="modal-content">
  392. <div class="modal-header">
  393. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  394. <h4 class="modal-title">Help</h4>
  395. </div>
  396. <div class="modal-body">
  397. <p><b>Audio Streaming</b>: There are a number of ways you can listen to the audio stream. This page uses the HTML5 audio element to stream it to your computer or phone. You can also point your favorite media player to the stream at <a href="http://stream.davidawindham.com/stream">http://stream.davidawindham.com/</a>.</p>
  398. <p><b>Video Stream</b>: Older web browers will not support all of the features here. In order to use the video and call capabilities of this page, you'll need to use a modern web browser </p>
  399. </div>
  400. <div class="modal-footer">
  401. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. <!-- END Help Modal -->
  407. <!-- START Support Modal -->
  408. <div class="modal fade" id="support" tabindex="-1" role="dialog" aria-labelledby="support" aria-hidden="true">
  409. <div class="modal-dialog" role="document">
  410. <div class="modal-content">
  411. <div class="modal-header">
  412. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  413. <h4 class="modal-title">Support</h4>
  414. </div>
  415. <div class="modal-body">
  416. <p></p>
  417. </div>
  418. <div class="modal-footer">
  419. <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  420. </div>
  421. </div>
  422. </div>
  423. </div>
  424. <!-- END Support Modal -->
  425. <footer class="site-footer">
  426. </footer>
  427. <script src="js/vendor.min.js"></script>
  428. <script src="/socket.io/socket.io.js"></script>
  429. <script src="js/radio.min.js"></script>
  430. <script src="js/webrtc.min.js"></script>
  431. <script>var _paq = _paq || [];_paq.push(['trackPageView']);_paq.push(['enableLinkTracking']);(function(){var u="//davidawindham.com/wik/";_paq.push(['setTrackerUrl', u+'piwik.php']);_paq.push(['setSiteId', 1]);var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);})();</script><noscript><p><img src="//davidawindham.com/wik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
  432. </body>
  433. </html>