added style audio stream

3 years ago · d27ff8bfc9
2 changed files with 70 additions and 1 deletions
--- a/index.html
+++ b/index.html
@ -6,6 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
 </head>
 <body>

@ -59,8 +60,20 @@
      <a class="windowlinks" href="https://chat.vvvvvvaria.org/"  target="_blank"> chat.vvvvvvaria.org</a>
    </div>

-    <!-- AUDIO STREAM -->
+    <!-- AUDIO STREAM 
    <audio controls loop="" class="audio" src="http://w-i-t-m.net:8001/meander" type="audio/mp3"> </audio>
+    -->
+
+    <!-- AUDIO STREAM STYLE-->
+    <div class="audio-stream">
+      <button onclick="playpause('audioBG')" type="button" name="button" class="b-narrow"><i class="audioBG fa b-play"></i></button>
+      <audio id="audioBG"
+      preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)"  ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
+      <source src="http://w-i-t-m.net:8001/meander">
+      </audio>
+      <input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px"><span id="tracktime"> 00:00 / 00:00 </span>
+    </div>
+

    <!-- lil face -->
    <div class="lil-face loading">
@ -198,5 +211,25 @@ function dragMoveListener (event) {
  var player = videojs("#player");
 </script>

+<script type="text/javascript">
+  var aud1= document.getElementById('audioBG');
+  var dur1= document.getElementById('dur1');
+  function mDur(dur,aud){dur.max= aud.duration};
+  function mPlay(dur,aud){dur.value=aud.currentTime};
+  function mSet(dur,aud){aud.currentTime=dur.value};
+
+
+  function playpause(podcast){
+  var myAudio = document.getElementById(podcast);
+  var myIcon = document.querySelector("."+podcast);
+  if (myAudio.paused) {
+  myIcon.className = podcast+" fa b-pause";
+  myAudio.play();
+  } else {
+  myIcon.className = podcast+" fa b-play";
+  myAudio.pause();
+  }
+  }
+</script>
 </body>
 </html>
--- a/narrowstyle.css
+++ b/narrowstyle.css
@ -341,6 +341,42 @@ button.minimize:hover {
  }
 }

+.audio-stream {
+  margin: 4rem 0% 0% 0%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.audio-stream > input {
+  margin: 0% 2rem 0% 2rem;
+}
+
+button.b-narrow {
+  box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
+  border: 0rem;
+  border-radius: 0.5rem 5rem 5rem 5rem;
+  line-height: 1rem;
+  text-align: center;
+  vertical-align: middle;
+  display: inline;
+  height: 2rem;
+  font-size: 1rem;
+  width: auto;
+  background-color: #393c56;
+  color: #ffe4fd;
+}
+.b-play::before {
+content: 'PLAY';
+}
+
+.b-pause::before {
+content: 'PAUSE';
+}

 /* SILVIO */