david
/
radio


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
							<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Daveo Radio</title>
   <meta name="description" content="">
   <link rel="stylesheet" href="css/style.min.css">
</head>
<body>

<header>
	<div class="container">
		<div class="intro-text">

		</div>
	</div>
</header>

<div class="outer-container">
<div class="container">
   <div class="row">
      <div class="col-sm-6">
         <section id="audio" class="bg-light-gray">
             
            <!-- START Player -->
            <div id="audio_player" class="panel panel-default">
               <div class="panel-body">
                  <div id="player">
                     <div id="song-information">
                        <div class="row">
                           <div class="col-xs-8">
                              <img id="radio" src="" title="radio" width="25px" style="float:left;margin-right:15px;">
                              <span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
                              <span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
                           </div>
                           <div class="col-xs-4">
                        </div>
                     </div>
                  </div>
                  <div id="controls">
                     <div id="amplitude-play-pause" class="amplitude-paused"></div>
                     <br />
                     <div class="row">
                        <!--<meter name="volume" value="9" min="0" max="10" low="0" high="10"></meter>-->             
                        <span class="glyphicon glyphicon-volume-off" aria-hidden="true" style="float:left;margin: -6px 0 0 20px;font-size:20px"></span>
                        <input type="range" class="bar" name="volume" id="amplitude-volume-slider" min=1 max=100 value=80>
                        <span class="glyphicon glyphicon-volume-up" aria-hidden="true" style="float:right;margin:-15px 20px 0 0;font-size:20px"></span>
                     </div>
                  </div>
               </div>
           
               <div class="well current-track">
                  <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span><span id="amplitude-current-time">0:00</span></h6>
               </div>
               </div>
               <!-- END Player -->

      			<!-- START Playlist -->
               <div class="tabs-below">
                  <div class="tab-content scrollable-list">
                     <div class="tab-pane active" id="one">
                        <ul class="list-group">
                           <div class="recent"></div>
                        </ul>
                     </div>
                     <div class="tab-pane" id="two">
                        <ul class="list-group">
                           <div class="tracks"></div>
                        </ul>          
                     </div>
                     <div class="tab-pane" id="three">
                        <ul class="list-group">
                           <div class="artists"></div>
                        </ul>
                     </div>
                     <div class="tab-pane" id="four">
                        <ul class="list-group">
                           <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Show</li>
                           <li class="list-group-item"><b>Dec 13th 2-4pm</b>: Guest Show</li>
                           <li class="list-group-item list-group-item-success"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
                           <li class="list-group-item list-group-item-success"><b>2-4pm</b>: Daveo Radio</li>
                           <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
                           <li class="list-group-item list-group-item-warning"><b>Dec 23th 2-4pm</b>: Something Else</li>
                           <li class="list-group-item list-group-item-danger"><b>Dec 24-28th</b>: Example</li>
                           <li class="list-group-item"><b>Dec 31st 8-12pm</b>: Guest Person</li>
                           <li class="list-group-item list-group-item-info"><b>Jan 4th 10am</b>: Example Show</li>
                           <li class="list-group-item list-group-item-info"><b>2-4pm</b>: Something Show</li>
                        </ul>
                     </div>
                  </div>     
                     <ul class="nav nav-tabs scrollable-list-footer">
                        <li class="active"><a href="#one" data-toggle="tab" data-original-title="Recent" data-placement="top"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a></li>
                        <li><a href="#two" data-toggle="tab" data-original-title="Tracks" data-placement="top"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span></a></li>
                        <li><a href="#three" data-toggle="tab" data-original-title="Artist" data-placement="top"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a></li>
                        <li><a href="#four" data-toggle="tab" data-original-title="Calendar" data-placement="top"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></a></li>
                     </ul>
               </div>
               <!-- END Playlist -->
            </div>
         </section>
   	</div>
      
      <!-- START Connect -->
      <div class="col-sm-6">
         <section id="request-line" class="bg-light-gray">
            <div class="panel panel-default">
               
               <!-- START Room Tabs -->
               <div class="row-fluid">
                    <ul id="rooms_tabs" class="nav nav-tabs">
                        <li class="dropdown">
                            <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>
                            <ul class="dropdown-menu">
                                <li><a href="#modal_joinroom" data-toggle="modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>&nbsp;Join room</a></li>
                                <li><a id="b_leave_room" href="#"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>&nbsp;Leave room</a></li>
                                <li class="divider"></li>
                                <li><a href="#modal_setnick" data-toggle="modal"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Set nickname</a></li>
                            </ul>
                        </li>
                        <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>
                        <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>
                        <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>
                    </ul>
               </div>
               <!-- END Room Tabs -->
               
               <!-- START Rooms -->
               <div id="rooms" class="tab-content">
                   <div class="tab-pane active" id="Lobby">
                      <div class="well">
                           <div class="row-fluid">
                               <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
                                   <span class="label label-danger">Radio-bot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
                               </div>
                           </div>  
                           <div class="row-fluid">
                              <div id="room_users">
                                  <span class="label label-success">online:</span> <span class="label label-danger">Radio-bot</span>
                              </div>
                           </div>
                       </div>              
                   
                   <!-- START message -->
                   <div class="panel-footer">
                      <div class="row-fluid">
                          <form class="form">
                             <div class="input-group">
                                <input id="message_text" class="form-control" type="text" placeholder="What say you?" >
                                 <span class="input-group-btn">
                                    <button id="b_send_message" class="btn btn-primary"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Post</button>
                                 </span>
                              </div>
                           </form>
                           <!--<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>-->
                      </div>
                   </div>
                   <!-- END message -->
                      
                   </div>
                   
                   <!-- START Call -->
                   <div class="tab-pane" id="call">
                      <div id="audio">
                         <div class="well">
                              <p><span class="label label-primary">Local audio:</span></p>
                              <audio id="audio1" autoplay controls muted></audio>
                              <p><span class="label label-primary">Remote audio:</span></p>
                              <audio id="audio2" autoplay controls></audio>
                          </div>
                          <div class="panel-footer">
                             <div id="buttons">
                               <button id="callButton" class="btn btn-success">Call</button>
                               <button id="hangupButton" class="btn btn-danger">Hang Up</button>
                               <select id="codec" class="selectpicker" data-style="btn-primary">
                                 <!-- Codec values are matched with how they appear in the SDP.
                                 For instance, opus matches opus/48000/2 in Chrome, and ISAC/16000
                                 matches 16K iSAC (but not 32K iSAC). -->
                                 <option value="opus">Opus</option>
                                 <option value="ISAC">iSAC 16K</option>
                                 <option value="G722">G722</option>
                                 <option value="PCMU">PCMU</option>
                               </select>
                             </div>
                          </div>
                       </div>
                   </div>
                   <!-- END Call -->
                   
                   <!-- START Video -->
                   <div class="tab-pane" id="video">
                      <div id="video">
                         <div class="well">
                            <video id="localVideo" autoplay muted></video>
                            <video id="remoteVideo" autoplay></video>
                         </div>
                         <div class="panel-footer">
                           <button id="startButton" class="btn btn-success">Start</button>
                           <button id="callButton" class="btn btn-primary">Call</button>
                           <button id="hangupButton" class="btn btn-danger">Hang Up</button>
                         </div>
                      <div>
                   </div>
                   <!-- END Video -->
                   
               </div>
               <!-- END Rooms -->
               
            </div>

             
            <!-- START Modal -->      
            <div id="modal_joinroom" class="modal fade">
               <div class="vertical-alignment-helper">
                  <div class="modal-dialog modal-sm vertical-align-center">
                      <div class="modal-content">
                         <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                             <h3>Join Room</h3>
                         </div>
                         <div class="modal-body">
                             <input id="room_name" type="text" class="form-control"  placeholder="Room Name">
                             <p><small>&nbsp;Room will be created if it doesn't exist</small></p>
                         </div>
                         <div class="modal-footer">
                             <a id="b_join_room" href="#" class="btn btn-success">Join Room</a>
                         </div>
                     </div>
                  </div>
               </div>
            </div>
            
            <div id="modal_setnick" class="modal fade">
               <div class="vertical-alignment-helper">
                  <div class="modal-dialog modal-sm vertical-align-center">
                      <div class="modal-content">
                         <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                             <h3>Set a Nickname</h3>
                         </div>
                         <div class="modal-body">
                             <input id="nickname" type="text" class="form-control" placeholder="Type your nickname here">
                         </div>
                         <div class="modal-footer">
                             <a id="b_set_nickname" href="#" class="btn btn-success">Set a Nickname</a>
                         </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- End Modal -->
            
         </section>
      </div>
      <!-- End Connect -->
      
         
   </div>
</div>
</div>

<!-- START Footer NAV -->
<div class="container">
   <div class="col-sm-12">
      <div class="row">  
         <div class="panel panel-bottom">
   			<ul class="nav navbar-nav">
   				<li><a href="#connected" data-toggle="modal" data-target="#connected"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span>&nbsp;Listeners</a></li>
               <li><a href="#charts" data-toggle="modal" data-target="#charts"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;Charts</a></li>
   			</ul>
   			<ul class="nav navbar-nav navbar-right">
   				<li><a href="#about" data-toggle="modal" data-target="#about"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;About</a></li>
               <li><a href="#help" data-toggle="modal" data-target="#help"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;Help</a></li>
               <li><a href="#support" data-toggle="modal" data-target="#support"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>&nbsp;Support</a></li>
   			</ul>
         </div>
      </div>
   </div>
</div>
<!-- END Footer NAV -->

<!-- START Listeners Modal -->
<div class="modal fade" id="connected" tabindex="-1" role="dialog" aria-labelledby="connected" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<div class="listeners">

         </div>
      </div>
    </div>
  </div>
</div>
<!-- END Listerners Modal -->

<!-- START Charts Modal -->
<div class="modal fade" id="charts" tabindex="-1" role="dialog" aria-labelledby="charts" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<div class="chart">

         </div>
      </div>
    </div>
  </div>
</div>
<!-- END Charts Modal -->

<!-- START Info Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="about">About</h4>
      </div>
      <div class="modal-body">
        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home 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>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- END Info Modal -->

<!-- START Help Modal -->
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="help" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="about">Help</h4>
      </div>
      <div class="modal-body">
        <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>
        <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>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- END Help Modal -->

<!-- START Support Modal -->
<div class="modal fade" id="support" tabindex="-1" role="dialog" aria-labelledby="support" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="about">Support</h4>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- END Support Modal -->

<footer class="site-footer">
   
</footer>

<script src="js/vendor.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/radio.min.js"></script>
<script src="js/webrtc-adapter.js"></script>
<script src="js/webrtc-video.js"></script>
<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>
</body>
</html>