varia/web-narrowcast
14
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

added style audio stream

Browse Source
This commit is contained in:
JoanaChicau 2021-03-22 16:00:47 +01:00
parent 108304a19c
commit d27ff8bfc9
2 changed files with 70 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <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 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 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> </head>
<body> <body>
@ -59,8 +60,20 @@
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> chat.vvvvvvaria.org</a> <a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> chat.vvvvvvaria.org</a>
</div> </div>
<!-- AUDIO STREAM --> <!-- AUDIO STREAM
<audio controls loop="" class="audio" src="http://w-i-t-m.net:8001/meander" type="audio/mp3"> </audio> <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 --> <!-- lil face -->
<div class="lil-face loading"> <div class="lil-face loading">
@ -198,5 +211,25 @@ function dragMoveListener (event) {
var player = videojs("#player"); var player = videojs("#player");
</script> </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> </body>
</html> </html>

36
narrowstyle.css
View File

@ -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 */ /* SILVIO */