Add mute button, change slider

master
santic-zombie 5 years ago
parent c1bac8ba2a
commit b512cec38d
  1. 3
      css/msgbox.css
  2. 45
      css/scroll_text.css
  3. 62
      css/style.css
  4. 38
      css/volume.css
  5. 9
      index.html
  6. 43
      js/audio.js

@ -2,7 +2,8 @@
position: fixed; position: fixed;
padding: 10px; padding: 10px;
margin: 0px; margin: 0px;
width: 299px; width: auto;
height: auto;
top: 20px; top: 20px;
right: 20px; right: 20px;
text-align: center; text-align: center;

@ -0,0 +1,45 @@
@-webkit-keyframes scroll {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
}
@-moz-keyframes scroll {
0% {
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
}
@keyframes scroll {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0)
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 100%;
-webkit-animation: scroll 15s infinite linear;
-moz-animation: scroll 15s infinite linear;
animation: scroll 15s infinite linear;
}

@ -113,7 +113,6 @@ h1 {
} }
.btn-wrap { .btn-wrap {
//max-width: 250px;
margin: auto; margin: auto;
display: -webkit-flex; display: -webkit-flex;
display: -moz-flex; display: -moz-flex;
@ -122,52 +121,21 @@ h1 {
display: flex; display: flex;
} }
DIV { .mute_btn {
text-align: center width: 30px;
} height: 30px;
border-radius: 5px;
@-webkit-keyframes scroll { border: #f54e4e;
0% { background-color: #000;
-webkit-transform: translate(0, 0); color: #fff;
transform: translate(0, 0); transition: 0.5s ease all;
} outline: none;
100% { cursor: pointer;
-webkit-transform: translate(-100%, 0); text-align: center;
transform: translate(-100%, 0) margin: auto;
} justify-content : center;
}
@-moz-keyframes scroll {
0% {
-moz-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-moz-transform: translate(-100%, 0);
transform: translate(-100%, 0)
}
}
@keyframes scroll {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0)
}
}
.marquee {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
} }
.marquee span { DIV {
display: inline-block; text-align: center
padding-left: 100%;
-webkit-animation: scroll 15s infinite linear;
-moz-animation: scroll 15s infinite linear;
animation: scroll 15s infinite linear;
} }

@ -0,0 +1,38 @@
#volume {
width: 40%; /* Width of the outside container */
}
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 40%; /* Full-width */
height: 20px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #000;
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #000; /* Green background */
cursor: pointer; /* Cursor on hover */
}

@ -6,6 +6,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css"> <link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/msgbox.css"> <link rel="stylesheet" type="text/css" href="/css/msgbox.css">
<link rel="stylesheet" type="text/css" href="/css/scroll_text.css">
<link rel="stylesheet" type="text/css" href="/css/volume.css">
<title>My Test Radio</title> <title>My Test Radio</title>
<script <script
src="https://code.jquery.com/jquery-3.4.1.js" src="https://code.jquery.com/jquery-3.4.1.js"
@ -60,9 +62,10 @@
<br> <br>
<div> <div>
vol: <button id="mute" class="mute_btn">
<br> <i class="fas fa-volume-up"></i>
<input id="volume" type="range" min="0" max="10" value="2" step="0.1" /> </button>
<input id="volume" type="range" class="slider" min="0" max="10" value="1" step="0.1" />
</div> </div>
<div id="jGrowl"></div> <div id="jGrowl"></div>

@ -1,17 +1,19 @@
var stream_url = 'http://stream.santic-zombie.ru'; var stream_url = 'http://stream.santic-zombie.ru';
var audio = new Audio(stream_url); var audio = new Audio(stream_url);
audio.volume = 0.05;
audio.volume = 0.01;
var play = document.getElementById('play'); var play = document.getElementById('play');
play.addEventListener('click', function() { play.addEventListener('click', function() {
var MsgText = $('<div id="message-success"><p>Play</p></div>');
PopUpMsg(MsgText);
$("#PlayStat").text("Now playing"); $("#PlayStat").text("Now playing");
audio.play(); audio.play();
}, false); }, false);
var pause = document.getElementById('pause'); var pause = document.getElementById('pause');
pause.addEventListener('click', function() { pause.addEventListener('click', function() {
var MsgText = $('<div id="message-success"><p>Pause</p></div>');
PopUpMsg(MsgText);
$("#PlayStat").text("Paused"); $("#PlayStat").text("Paused");
audio.pause(); audio.pause();
}, false); }, false);
@ -20,14 +22,10 @@ $("#volume").mousemove(function(){
audio.volume = parseFloat(this.value / 10); audio.volume = parseFloat(this.value / 10);
}); });
var button = document.getElementById('buff'); var copyClipBoard = document.getElementById('buff');
button.addEventListener('click', function () { copyClipBoard.addEventListener('click', function () {
var MsgText = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>');
var MsgText = $('<div id="message-success"><p>Trackname copied to clipboard</p></div>'), PopUpMsg(MsgText);
MsgData = $('#jGrowl');
MsgData.html(MsgText).fadeIn();
setTimeout(function() {MsgData.fadeOut();}, 2000);
//нашли наш контейнер //нашли наш контейнер
var ta = document.getElementById('trackname'); var ta = document.getElementById('trackname');
//производим его выделение //производим его выделение
@ -44,4 +42,25 @@ button.addEventListener('click', function () {
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
}); });
//audio.muted = true; var mute = document.getElementById('mute');
mute.addEventListener('click', function() {
$(this)
.find("i")
.toggleClass('fas fa-volume-up')
.toggleClass('fas fa-volume-mute');
if (audio.muted === false) {
var MsgText = $('<div id="message-success"><p>Mute Sound</p></div>');
PopUpMsg(MsgText);
audio.muted = true;
} else {
var MsgText = $('<div id="message-success"><p>unmute Sound</p></div>');
PopUpMsg(MsgText);
audio.muted = false;
}
}, false);
function PopUpMsg(MsgText) {
const MsgData = $('#jGrowl');
MsgData.html(MsgText).fadeIn();
setTimeout(function() {MsgData.fadeOut();}, 2000);
}

Loading…
Cancel
Save