CSS Saga do player para audio

Lerub · 30 de novembro de 2020

Eu já criei alguns posts para tentar solucionar problemas com o meu player. E este será dedicado para resolver todos os probemas que surgirem. Assim eu não fico criando posts a cada problema que tenho.

Só é ruim o fato do prefixo ser obrigatório. Pois, apesar de hoje eu ter problemas com o CSS, amanhã poderá ser o JS.

Eu consegui criar um layout bacana em landscape, mas não consigo deixa-lo responsivo. Em portrait eu não consigo reposicionar os elementos.

Segue o código:

/*Isso foi feito por um retardado feliz conhecido como Lera*/

@media only screen and (orientation: portrait) {
#timeline {
margin-right:80em;
min-width:100%;
}

body {
font-size:2em;
}

 .ppmbtn {
top:0;
left:-20em;
}

.plist {
min-width:100%;
top:21em;
}

.ptitle {
position:absolute;
top:41em;
}



}

body {
max-width:1920px;
overflow:hidden;
}

	.podplayer {
		border:#cd919e solid;

max-height:768px;
display:inline-block;

		/*		text-align:center;*/
	}



.podplayer .podbanner { max-width:66%; float:right;  margin-top:3%;}


	 .podplayer .podbanner img {
		max-width:100%;
}

 .ppmbtn {

	width:42%;
	position:relative;
	top:58em;
	left:45em;

}

	#pButton {
		width:12em;
		height:7em;
		background-size:11em 7em;
	background-repeat:no-repeat;
		bottom:62em;
/*	left:14%;*/
	position:relative;

		}
	.playbutton {

		background:url("./svg/play.svg");
		}


	.pause {
		background-image:url("./svg/pause.svg");
	}

	#muteb {
		width:6em;
		height:5em;
		background-size:154% 110%;
		background-repeat:no-repeat;
		position:relative;
		bottom:68em;
		left:28em;
	}

	.mutebutton {
		background:url("./svg/muteb.svg");
	}

	.unmutebutton {
		background-image:url("./svg//unmuteb.svg");
	}





	#timeline {
		left:43em;
		bottom:33em;
		width:600px;
		float:left;
		height:50px;
		background: rgba(112,128,142,0.9);
		position:relative;
	}

	#playhead {
	width:0;
	height:50px;
	float:left;
	background: rgba(255,193,193,0.6);
	position:relative;

	}

	#d1 {
		 display: block;
	    height: 100%;
	    background-color: rgba(255,0,0, 0.3);
	    width: 0;
	}

	#downloaded {
		width:0;
		height:50px;
		background-color: rgba(255,193,193, 0.3);
		position:relative;
		/*bottom:51px;	*/
	}

	.ctime {
		background:rgba(112,128,144,1);
		color:#ffe4e1;
	/*	left:22%;*/
		position:relative;
	}

	.pdur {
		background-color:rgba(112,128,144,1);
		font-weight:bold;
		color:#ffe4e1;
		left:10em;
		position:relative;
	}

	.time {

		position:relative;
		left:46.5em;
		top:14em;
		z-index:1;
		width:38%;
	}

	.ctime, .pdur {
		font-size:200%;
	}


	.vol {
		-webkit-appearance:none;
		background:rgba(105,105,105,0.6);
		position:relative;
		bottom:61em;
		left:21em;
		z-index:1;
	}


	.vol::-moz-range-thumb {
	background:#ffe4e1;
}


.ptitle h1 {

	color:#ffe4e1;
	background: rgba(112,128,144,0.6);
word-wrap:break-word;
display:inline;
	
}

.ptitle {
position:relative;
top:15em;
right:42em;

	overflow:auto;
height:20em;
}
	




.plist {
	background-color: #bebebe;
	position:relative;

	overflow: auto;
	height:24em;
	width:34%;
	bottom:14em;
}

.plist ul li {
	line-height:1.3em;
	list-style:none;
}

.plist ul li span {
	background:#708090;	
	font-weight:bold;
	color:#eee9e9;
}

.plist ul li span:active {
	  background-color: rgba(255,193,193, 0.3);
}


@font-face {
	font-family:aforever;
	src:url(fonts/amiga4ever-pro.ttf);
}

.Watermark {
position:relative;
right:17.5em;
top:1.2em;
font-size:143%;
color:#cd919e;
opacity:0.4;
font-family:aforever;
}

<!doctype html>
<html>
	<head>
	<title>Um player HTML5 com Javascript</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="includes/podplayer.css">



</head>
<body>
	<!--Isso foi feito por um retardado feliz conhecido como Lera-->

	<audio id="podcast" preload="auto">
		<source id="audio1" src="https://mcdn.podbean.com/mf/web/7qc7qp/MRG485_Voz_do_Robo_Papa_tapa.mp3" class="podsource">

	</audio>
	<div id="audioplayer" class="podplayer">

		<div class="podbanner"><img src="file:///run/media/lera/b1a4b0ee-bd95-4c39-a19c-5cb0e0ee5f4b/png's/bannerpostfeb2018.png" alt="podbanner"></div>	

	
		<div class="time">
		<span id="ctime" class="ctime">0:0:0</span>
		<span id="duration" class="pdur">0:0:0</span>
		</div>
		
		<input type="range" min="0" max="1" step="0.01"  class="vol" id="volu">
		<div class="ppmbtn">
		<div id="pButton" class="playbutton"></div>
		<div id="muteb" class="mutebutton"></div>
		</div>
<div id="playlist" class="plist"><ul><li><span onclick="playFLAC()">Play FLAC</span></li>
				<li><span onclick="playMP3()">PlayMP3</span></li></ul></div>

	
	<div id="timeline">	
			<div id="playhead" ></div>
			<div id="d1">
			<div id="downloaded"></div>
			</div>


	<div class="Watermark"><strong>SDNPlayer 20201128</strong></div>

<div id="podtitle" class="ptitle"><h1 id="podtitleh1">wwwwww w w w wwwww ww ww wwww ww wwwww www w wwwww ww ww wwwwwww w wwwwwww wwww www ww wwww www wwwwww wwwww wwww ww wwwww ww w www w w wwwwwww ww ww ww www ww wwwwww w ww wwwwww wwwwwwwww wwww ww</h1></div>



		</div>

	</div>

<script src="includes/player.js"></script>
</body>
</html>

Lerub · 1 de dezembro de 2020

Eu já tentei de N formas e o portrait continua o mesmo. Vou compartilhar um link para a Pastebin e no mesmo, e incluírei o CSS.

Senha:

fSMjsgJKE5

https://pastebin.com/Pe4aEX67

Adriano_web · 1 de dezembro de 2020

@Lerub orientation: portrait a altura tem que ser maior ou igual à largura, ou seja, se sua tela tiver 600 de largura o portrait será usado em seu dispositivo se a altura for menor ou igual a isto. Tente usar o max-width para poder especificar uma largura limite

Lerub · 2 de dezembro de 2020

Deu na mesma. Eu não consigo posicionar os controles sem tirar o banner do lugar. E os controles nem ficam na DIV do player.

/*Isso foi feito por um retardado feliz conhecido como Lera*/

@media only screen and (max-width: 360px) {
body {
font-size:2em;
text-align:center;
}


.plist {
min-width:100%;

}


.controls {
top:11em;
min-width:100%;
margin-right:40em;
position:absolute;
}

.podplayer .podbanner {width:100%; float:left; top:2em;}

}

Lerub · 2 de dezembro de 2020

Resultado até agoa:

Pass: NN0Cd8aL7P

https://pastebin.com/pjzrCmu4

Edit:

Estou tendo avanços. Logo mais eu publicarei os resultados.

Lerub · 2 de dezembro de 2020

Eu agora estou tendo problema para posicionar na resolução, padrão (landscape) de smartphones.

/*Isso foi feito por um retardado feliz conhecido como Lera*/

@media only screen and (max-width: 740px) {

body {
text-align:center;
}

.Watermark strong{
font-size:0.6em;
position:absolute;
}

.podplayer .podbanner {min-width:100%; top:00.4em;}

    .podplayer {
width:100%;
overflow:auto;
}

.controls {
min-width:100%;
margin-left:-44em;
margin-top:-33em;
position:absolute;
}

.controls #timeline {
width:100%;
margin-top:-19em;
}

.ptitle {
font-size:0.7em;
top:-70em;
position:absolute;
}

.plist {
min-width:100%;
top:4em;
}

.time {
min-width:100%;
margin-top:-11em;
}

}

Lerub · 2 de dezembro de 2020

Ok. Fiz uma gambiarra, mas deu certo.

/*Isso foi feito por um retardado feliz conhecido como Lera*/

@media only screen and (max-width: 740px) {

body {
text-align:center;
}

.Watermark strong{
font-size:0.6em;
position:absolute;
}

.podplayer .podbanner {min-width:100%; top:00.4em;}

    .podplayer {
width:100%;
overflow:auto;
}

.controls {
min-width:100%;
margin-left:-44em;
margin-top:-49em;
position:absolute;
}

.controls #timeline {
width:100%;
margin-top:-27em;
}

.ptitle {
font-size:0.7em;
top:-70em;
position:absolute;
}

.plist {
min-width:100%;
top:0.3em;

}

.time {
min-width:100%;
margin-bottom:51em;
margin-left:-62em;
}

.vol {
width:45%;
margin-left:-29em;
top:-20.8em;
}

}

Lerub · 2 de dezembro de 2020

Ok. Aoora os botões de Play e Mute foram pro espaço.

Pass: nsYeYZ21Ld

https://pastebin.com/gPSKSJRE

Resolução 1024 (width).

Adriano_web · 3 de dezembro de 2020

@Lerub Não sei muito qual é a ideia, mas para demonstrar um documento responsivo eu inseri flex-box no CSS se quiser pode pegar o código do exemplo que fiz: https://www.w3schools.com/code/tryit.asp?filename=GLAE7MFUQRNJ