po prostu działa, chodziło mi o slider głośności, żałosny w przypadku ... (@mszuriam)

po prostu działa, chodziło mi o slider głośności, żałosny w przypadku domyślnego. Przykłady z neta nie działały, to sie wku... i sam..XD

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML5 Audio with playlists - jsFiddle demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<style type='text/css'>
/* volume slider*/

.slidecontainer {
width: 100%;
}

.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #04aa6d;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04aa6d;
cursor: pointer;
}
/* start slideToggle */
#panel, #flip { width: 450px;padding: 2px;text-align: center;background-color: #5db0e6;border: solid 1px #c3c3c3;margin: auto;border-radius: 10px;font-weight: bold;text-shadow: 11px -1px 6px rgba(255, 255, 255, 1);}.zoom:hover { transform: scale(1.3,1.3);transition: all .8s ease-in-out;}

#panel {width: 425px;padding: 12px;display: none;text-align: left;margin: auto;}
/* end slideToggle */

/* start playlist */
#playlist,audio{background:#666;width:400px;padding:10px;border-radius: 10px;font-weight: bold;text-shadow: 11px -1px 6px rgba(255, 255, 255, 1); }
.active a{color:#eeeedd;text-decoration:none;border-radius: 10px; }
li a{color:#5db0e6;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;
transition: all .4s ease-in-out;
transform: scale(1.05,1.07);
/* Change these numbers to suit your needs */
-webkit-transform: scale(1.05,1.07);
-moz-transform: scale(1.05,1.07);
-ms-transform: scale(1.05,1.07);
-o-transform: scale(1.05,1.07); }
ul {list-style-type: none;}
/* end playlist */
</style>
</head>

<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");});});
</script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .50;
audio[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[curr<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML5 Audio with playlists - jsFiddle demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<style type='text/css'>
/* volume slider*/

.slidecontainer {
width: 100%;
}

.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider:hover {
opacity: 1;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #04aa6d;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #04aa6d;
cursor: pointer;
}
/* start slideToggle */
#panel, #flip { width: 450px;padding: 2px;text-align: center;background-color: #5db0e6;border: solid 1px #c3c3c3;margin: auto;border-radius: 10px;font-weight: bold;text-shadow: 11px -1px 6px rgba(255, 255, 255, 1);}.zoom:hover { transform: scale(1.3,1.3);transition: all .8s ease-in-out;}

#panel {width: 425px;padding: 12px;display: none;text-align: left;margin: auto;}
/* end slideToggle */

/* start playlist */
#playlist,audio{background:#666;width:400px;padding:10px;border-radius: 10px;font-weight: bold;text-shadow: 11px -1px 6px rgba(255, 255, 255, 1); }
.active a{color:#eeeedd;text-decoration:none;border-radius: 10px; }
li a{color:#5db0e6;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;
transition: all .4s ease-in-out;
transform: scale(1.05,1.07);
/* Change these numbers to suit your needs */
-webkit-transform: scale(1.05,1.07);
-moz-transform: scale(1.05,1.07);
-ms-transform: scale(1.05,1.07);
-o-transform: scale(1.05,1.07); }
ul {list-style-type: none;}
/* end playlist */
</style>
</head>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
current = 0;
audio = $('audio');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
audio[0].volume = .50;
audio[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, audio[0]);});
audio[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];}
run($(link),audio[0]);});}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
audio[0].load();
audio[0].play();}});//]]>
//volume super css
function thisVolume(volumevalue)
{var myvideo = document.getElementById("audio");
document.getElementById("vol").innerHTML=volumevalue;
myvideo.volume = volume_value / 100;}

//toggle
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");});});
</script>

<div>Round Range Slider 🔈 ⇒     ⇐ <div>
<p>głośność: <span id="vol"></span></p>
<font size="22"></font>

<div class="slidecontainer">
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="thisVolume(this.value)" onchange="thisVolume(this.value)" class="slider" id="myRange">

</div>
<hr />

<br />

<div class="zoom" id="flip"><strong>⇒ RADIO ⇐ </strong></div>
<div id="panel">

<audio id="audio" preload="auto" controls="" type="audio/mpeg">
<source type="audio/mp3" src="#" >Sorry, your browser does not support HTML5 audio.</audio>

<ul id="playlist">

<li class="active"><a href="https://stream.chillsynth.fm/spacesynth.ogg"><img src="https://i.ytimg.com/vi/5-anTj1QrWs/maxresdefault.jpg" alt="spacesynth" height="40" width="40"> chillsynth.fm - spacesynth (ogg)</a></li>

<li class="active"><a href="https://stream.open.fm/378"><img src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Radio357_logotype.jpg" alt="radio 357" height="35" width="40"> Radio 357 (aac)</a></li>

<li class="active"><a href="http://radio4.cdm-radio.com:8020/stream64k-AAC-Chill_autodj"><img src="https://www.radio.pl/images/broadcasts/86/fd/16612/1/c300.png" alt="Chillout" height="40" width="40"> Costa Del Mar - Chillout (aac)</a></li>

<li class="active"><a href="https://streaming.radio5.com.pl:8888/radio5suwalki"><img src="https://radio5.com.pl/wp-content/uploads/2023/04/logo_new5.png" alt="radio5suwalki192mp3" height="40" width="40"> Radio 5 Suw 192mp3</a></li>

<li class="active"><a href="https://live.radioart.com/fVocal_chillout.mp3"><img src="https://www.radio.pl/images/broadcasts/7c/d8/105476/1/c300.png" alt="Radio Art - Vocal Chillout" height="40" width="40"> Radio Art - Vocal Chillout 96</a></li>
<li class="active"><a href="#">test</a>
</ul></div>

</body>

</html>

#programowanie #chwalesie

Aktywne Wpisy

Aktywne Znaleziska

Blokada polsko-ukraińskiej granicy. Zapowiada ją jedna z rolniczych organizacji

Paragwaj. 32-tygodniowa dziewczynka ożyła na własnym pogrzebie...

Zakaz dla Google. Bezprecedensowy wyrok polskiego sądu

Radio ZET przeprasza i usuwa skandaliczny tekst o Krzysztofie Stanowskim…

Największy skandal pedofilski. Kuria broni biskupa.

Popularne tagi