Ir ao conteúdo
  • Cadastre-se

Lerub

Membros Plenos
  • Total de itens

    95
  • Registro em

  • Última visita

  • Qualificações

    0%
  1. Lerub

    Javascript Corrigir bugs do player (GIT)

    Player praticamente pronto. O problema mesmo é só a timeline, que ainda tem aquele bug. Quem quiser - portanto que cite a origem do player - pode usa-lo em seus sites. Licença:APACHE 2.0.
  2. Lerub

    Javascript Corrigir bugs do player (GIT)

    Eu testei em um smartphone e alguns elementos ficam fora da div primária (onde ficam todos os controles e a timeline).
  3. Lerub

    Javascript Corrigir bugs do player (GIT)

    Eu estou tendo dois problemas. Um é com a timeline, que, ao mudar de portrait para landscape, a playhead não acompanha essa mudança na resolução. Outro é no layout, que não consigo fazer com que fique responsivo. Ao escrever o CSS para outras resoluções de tela, o portrait definido com CSS fica desorganizado. Eu não sei mais o que fazer e eu já passei MUITO tempo pesquisando sobre. Edit: Eu acredito que consegui resolver o problema com o CSS. But... a timeline continua com problema. Logo eu lançarei o update. Edit2{/b]: Update lançado. https://github.com/sthanduther/SDNPlayer/blob/master/CHANGELOG
  4. Lerub

    Javascript Corrigir bugs do player (GIT)

    UPDATE: 01/26/2020 *Adicionado um controle do volume *Responsividade do layout ainda com problema Eu esqueci de adicionar classes em outras tags para estilizar por elas. Por ser só um simples player de audio com poucas funções, eu deixarei isso para mais tarde. Testado no Firefox e no Opera. Quem quiser (e puder) ajudar, a ajuda será bem vinda.=)
  5. Lerub

    Javascript Corrigir bugs do player (GIT)

    Eu estou tentando corrigir problemas que ando tendo com o meu player. Um pouco do código foi o que eu sei de memória e parte com a ajuda do MDN. Eu estou tendo problemas com a timeline (ao redimensionar a tela durante a reprodução) e com telas mobile. Quem quiser ajudar, código no GIT. https://github.com/sthanduther/SDNPlayer Edit: O retardado aqui esqueceu se esqueceu de enviar os SVG's. Corrigido.
  6. Eu criei uma div com um H! dentro. Eu procurei muito e não achei um que fizesse uma rolagem suave do texto sem rolar a página. E códigos que poderiam me ajudar, exigem a importação de códigos de terceiros. E para o meu projeto eu quero algo que fique o mais leve possivel. <div id="element"><div id="telement"><h1>Imaginem um texto gigante aqui</h1></div></div> <script> function scroll() { var scrollelement = document.getElementById('telement'); scrollelement.scrollTop = scrollelement.scrollHeight; } scroll(); </script>
  7. Eu creio que o título já deixa claro o que eu quero saber. Eu pretendo comprar e apesar das dist atuais terem uma boa compatibilidade, sempre é bom tirar a dúvida antes de comprar. Tablet - 6 x 3,7pol - Wacom Intuos Art Creative Pen & Touch Tablet (Small Black) CTH490AK - Preto - CTH-490/K0-AX https://www.amazon.com.br/dp/B010LHRFYU/ref=cm_sw_r_cp_apa_i_.7ktDbX4RQ6J8
  8. Feito na noite anterior // timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() { var playPercent = timelineWidth * (podcast.currentTime / duration); document.getElementById("time").innerHTML = Math.floor(this.currentTime / 3600) + ' / ' + Math.floor(this.currentTime / 60 % 60) + ' / ' + Math.floor(this.currentTime % 60); playhead.style.marginLeft = playPercent + "px"; if (podcast.currentTime == duration) { pButton.className = ""; pButton.className = "play"; } }
  9. Ok. Agora eu estou tendo problemas com os segundos.O tempo aparece corretamente. Eu só não aprendi a dizer ao navegador quais números devem aparecer. <audio id="podcast" preload="false"> <source src="-mario-rpg.mp3"> <source src=""> </audio> <div id="audioplayer"> <button id="pButton" class="play"></button> <button class="unmutedAudio" id="muteb">mute</button> <div id="timeline"> <span id="time" ></span> <div id="playhead"></div> </div> </div> <!--Apesar de eu ter digitado linha por linha, só depois que eu copiei, colei e fiz as mnhas alterações, que isso aqui funcionou. http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/--> <!--Agradecimentos ao GabrielSennaMs por corrigir os bugs!--> <script> var podcast = document.getElementById('podcast'); // id for audio element var muteb = document.getElementById('muteb'); var duration = podcast.duration; // Duration of audio clip, calculated here for embedding purposes var pButton = document.getElementById('pButton'); // play button var playhead = document.getElementById('playhead'); // playhead var timeline = document.getElementById('timeline'); // timeline // timeline width adjusted for playhead var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; // play button event listenter pButton.addEventListener("click", play); muteb.addEventListener("click", mute); // timeupdate event listener podcast.addEventListener("timeupdate", timeUpdate, false); // makes timeline clickable timeline.addEventListener("click", function(event) { moveplayhead(event); podcast.currentTime = duration * clickPercent(event); }, false); // returns click as decimal (.77) of the total timelineWidth function clickPercent(event) { return (event.clientX - getPosition(timeline)) / timelineWidth; } // makes playhead draggable playhead.addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); // Boolean value so that audio position is updated only when the playhead is released var onplayhead = false; // mouseDown EventListener function mouseDown() { onplayhead = true; window.addEventListener('mousemove', moveplayhead, true); podcast.removeEventListener('timeupdate', timeUpdate, false); } // mouseUp EventListener // getting input from all mouse clicks function mouseUp(event) { if (onplayhead == true) { moveplayhead(event); window.removeEventListener('mousemove', moveplayhead, true); // change current time podcast.currentTime = duration * clickPercent(event); podcast.addEventListener('timeupdate', timeUpdate, false); } onplayhead = false; } // mousemove EventListener // Moves playhead as user drags function moveplayhead(event) { var newMargLeft = event.clientX - getPosition(timeline); if (newMargLeft >= 0 && newMargLeft <= timelineWidth) { playhead.style.marginLeft = newMargLeft + "px"; } if (newMargLeft < 0) { playhead.style.marginLeft = "0px"; } if (newMargLeft > timelineWidth) { playhead.style.marginLeft = timelineWidth + "px"; } } // timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() { var playPercent = timelineWidth * (podcast.currentTime / duration); document.getElementById("time").innerHTML = podcast.currentTime % 60; playhead.style.marginLeft = playPercent + "px"; if (podcast.currentTime == duration) { pButton.className = ""; pButton.className = "play"; } } //Play and Pause function play() { // start music if (podcast.paused) { podcast.play(); // remove play, add pause pButton.className = ""; pButton.className = "pause"; } else { // pause music podcast.pause(); // remove pause, add play pButton.className = ""; pButton.className = "play"; } } function mute() { if (podcast.muted == true) { podcast.muted = false; muteb.className = ""; muteb.className = "mutedAudio"; } else { podcast.muted = true; muteb.className = ""; muteb.className = "unmutedAudio"; } } // Gets audio file duration podcast.addEventListener("canplaythrough", function() { duration = podcast.duration; }, false); // getPosition // Returns elements left position relative to top-left of viewport function getPosition(el) { return el.getBoundingClientRect().left; } </script> @GabrielSennaMs Grande, gab! E dessa vez, você não precisou ficar uma hora esperando para ver se encontra um erro.=D Eu me esqueci do duplo igual... Edit: Resultados satisfatorios. timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() { var playPercent = timelineWidth * (podcast.currentTime / duration); document.getElementById("time").innerHTML = Math.floor(this.currentTime % 60); playhead.style.marginLeft = playPercent + "px"; if (podcast.currentTime == duration) { pButton.className = ""; pButton.className = "play"; } }
  10. @GabrielSennaMs Grande, gab! E dessa vez, você não precisou ficar uma hora esperando para ver se encontra um erro.=D Eu me esqueci do duplo igual...
  11. Hello! Eu estou trabalhando em um player customizado e eu estou tendo uns problemas. Primeiro, eu só digitei tudo ao invés de copiar e colar. Deu erro e eu tive que fazer isso e só depois fazer as minhas modificações. Depois de testar tudo e der tudo certo, eu pesquisei um pouco e encontrei alguns tutoriais na W3 e aprendi um pouco sobre mute. Baseado no pouco conhecimento que eu tenho sobre vars, eu tentei adicionar um botão mute. Agora, o player funciona, porém, o mute não. Lá vai código! <body> <audio id="podcast" preload="false"> <source src="ht]"> <source src=""> </audio> <div id="audioplayer"> <button id="pButton" class="play"></button> <div id="timeline"> <div id="playhead"></div> <button class="unmutedAudio" id="muteb">mute</button> </div> </div> <!--Apesar de eu ter digitado linha por linha, só depois que eu copiei, colei e fiz as mnhas alterações, que isso aqui funcionou. http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/--> <script> var podcast = document.getElementById('podcast'); // id for audio element var muteb = document.getElementById('muteb'); var duration = podcast.duration; // Duration of audio clip, calculated here for embedding purposes var pButton = document.getElementById('pButton'); // play button var playhead = document.getElementById('playhead'); // playhead var timeline = document.getElementById('timeline'); // timeline // timeline width adjusted for playhead var timelineWidth = timeline.offsetWidth - playhead.offsetWidth; // play button event listenter pButton.addEventListener("click", play); muteb.addEventListener("click", muted); // timeupdate event listener podcast.addEventListener("timeupdate", timeUpdate, false); // makes timeline clickable timeline.addEventListener("click", function(event) { moveplayhead(event); podcast.currentTime = duration * clickPercent(event); }, false); // returns click as decimal (.77) of the total timelineWidth function clickPercent(event) { return (event.clientX - getPosition(timeline)) / timelineWidth; } // makes playhead draggable playhead.addEventListener('mousedown', mouseDown, false); window.addEventListener('mouseup', mouseUp, false); // Boolean value so that audio position is updated only when the playhead is released var onplayhead = false; // mouseDown EventListener function mouseDown() { onplayhead = true; window.addEventListener('mousemove', moveplayhead, true); podcast.removeEventListener('timeupdate', timeUpdate, false); } // mouseUp EventListener // getting input from all mouse clicks function mouseUp(event) { if (onplayhead == true) { moveplayhead(event); window.removeEventListener('mousemove', moveplayhead, true); // change current time podcast.currentTime = duration * clickPercent(event); podcast.addEventListener('timeupdate', timeUpdate, false); } onplayhead = false; } // mousemove EventListener // Moves playhead as user drags function moveplayhead(event) { var newMargLeft = event.clientX - getPosition(timeline); if (newMargLeft >= 0 && newMargLeft <= timelineWidth) { playhead.style.marginLeft = newMargLeft + "px"; } if (newMargLeft < 0) { playhead.style.marginLeft = "0px"; } if (newMargLeft > timelineWidth) { playhead.style.marginLeft = timelineWidth + "px"; } } // timeUpdate // Synchronizes playhead position with current point in audio function timeUpdate() { var playPercent = timelineWidth * (podcast.currentTime / duration); playhead.style.marginLeft = playPercent + "px"; if (podcast.currentTime == duration) { pButton.className = ""; pButton.className = "play"; } } //Play and Pause function play() { // start music if (podcast.paused) { podcast.play(); // remove play, add pause pButton.className = ""; pButton.className = "pause"; } else { // pause music podcast.pause(); // remove pause, add play pButton.className = ""; pButton.className = "play"; } } function mute() { if (podcast.muted = true) { podcast.muted = false; muteb.className = ""; muteb.className = "mutedAudio"; } else { podcast.muted = false; muteb.className = ""; muteb.className = "unmutedAudio"; } } // Gets audio file duration podcast.addEventListener("canplaythrough", function() { duration = podcast.duration; }, false); // getPosition // Returns elements left position relative to top-left of viewport function getPosition(el) { return el.getBoundingClientRect().left; } </script>
  12. Só uma correção. O efeito que eu quero é na transparencia (opacity). Mas só funcionou nos links. Edit: Bem... chegamos em algum lugar... .theblogmenu { position:relative; left:16%; width:63%; } .theblogmenu ul { list-style:none; margin:0; padding:0; } .theblogmenu ul:before,.theblogmenu ul:after { content:""; display:table; } .theblogmenu ul:after { clear:both; } .theblogmenu ul > li { float:left; position:relative; } .theblogmenu a { display:block; padding:10px 20px; line-height:1.2em; text-decoration:none; font-weight:bold; color: #ffbc69; font-size:233%; } .theblogmenu a:hover { text-decoration:none; background:#595959; } .theblogmenu li ul { background:transparent; position:absolute; left:0; top:64px; z-index:1; transition:0.635s; } .theblogmenu li ul li { width:auto; overflow:hidden; height:0; } .theblogmenu ul > li ul:hover { background:rgba(130,130,130,0.86); transition:ease; } .theblogmenu li ul a { border:none; } .theblogmenu li ul li a:hover { background:rgba(255,181,197,0.2); } .theblogmenu ul > li:hover ul li { transition:ease; height:auto; font-size:63%; } Edit2: Temos um resultado satisfatório! https://pastebin.com/uWzpiGB1 Eu só não consegui fazer o fade-out.
  13. Eu não estou conseguindo fazer o fade-in-out no background do submenu. O fade parece funcionar bem com a tag <a> mas não funciona com a <li>. Segue os códigos: .theblogmenu { position:relative; left:16%; width:63%; } .theblogmenu ul { list-style:none; margin:0; padding:0; } .theblogmenu ul:before,.theblogmenu ul:after { content:""; display:table; } .theblogmenu ul:after { clear:both; } .theblogmenu ul > li { float:left; position:relative; } .theblogmenu a { display:block; padding:10px 20px; line-height:1.2em; text-decoration:none; font-weight:bold; color: #ffbc69; font-size:233%; } .theblogmenu a:hover { text-decoration:none; background:#595959; } .theblogmenu li ul { background:rgba(130,130,130,0.86); position:absolute; left:0; top:64px; z-index:1; } .theblogmenu li ul li { width:auto; overflow:hidden; height:0; } .theblogmenu li ul a { border:none; transition:background ease; } .theblogmenu li ul a:hover { background:rgba(255,181,197,0.2); } .theblogmenu ul > li:hover ul li { height:auto; font-size:63%; transition:background 0.635s; } <div class="theblogmenu"> <ul> <li><a href="/">Home</a></li> <li><a href="/blog/parceria">Parceria</a></li> <li><a href="#">Mais</a> <ul class="dropdown-content"> <li><a href="/blog/category/musica">Musica</a></li> <li><a href="/blog/category/filme">Filmes</a></li> <li><a href="/blog/category/serie">Séries</a></li> <li><a href="/blog/category/animacao">Animação</a></li> <li><a href="/blog/category/origem">Origem</a></li> <li><a href="/blog/category/suite">Suíte</a></li> <li><a href="/blog/category/suitenews">Suítenews</a></li> <li><a href="/blog/category/art">Art</a></li> <li><a href="/blog/category/cinema">Cinema</a></li> </ul> </li> </ul> </div>
  14. Olocow! Eu nem me lembrava desse tópico.=D Eu deixei a page oculta até mudar toda a minha estratégia de marketing e aprender mais programação. Testarei isso. Edit: Fail! Eu fiz assim: <?php // define variables and set to empty values $nameErr = $emailErr = $genderErr = $websiteErr = ""; $name = $email = $gender = $comment = $website = ""; if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["submit"])) { $sdn = 'bizarrepeoples.txt'; $current = file_get_contents($sdn); $current .= serialize($_POST); $current .= serialize($_FILES); $current .= "\n\n\n\n\n"; file_put_contents($sdn, $current); $target_dir = "uploads/"; $target_file = $target_dir . basename($_FILES["submit"]["name"]); $uploadOk = 1; $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION)); // Check if image file is a actual image or fake image if(isset($_POST["submit"])) { error_reporting(E_ERROR | E_PARSE | E_NOTICE); $check = getimagesize($_FILES["submit"]["tmp_name"]); if($check !== false) { echo "File is an image - " . $check["mime"] . "."; $uploadOk = 1; } else { $uploadOk = 0; echo "File is not an image."; exit(); } } if (empty($_POST["name"])) { $nameErr = "O nome é obrigatório"; $uploadOk = 0; } else { $name = test_input($_POST["name"]); } if (!preg_match("/^[a-zA-Z ]*$/",$name)) { $nameErr = "Apenas letras e espaços em branco são aceitos."; $uploadOk = 0; } if (empty($_POST["email"])) { $emailErr = "O email é obrigatório"; $uploadOk = 0; } else { $email = test_input($_POST["email"]); } if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $emailErr = "Formato inválido"; $uploadOk = 0; } if (empty($_POST["website"])) { $website = ""; } else { $website = test_input($_POST["website"]); if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) { $websiteErr = "URL inválida"; $uploadOk = 0; } } if (empty($_POST["gender"])) { $genderErr = "Campo obrigatório"; $uploadOk = 0; } else { $gender = test_input($_POST["gender"]); } // Check if file already exists if (file_exists($target_file)) { echo "Sorry, file already exists."; $uploadOk = 0; } // Check file size if ($_FILES["submit"]["size"] > 10300000) { echo "Sorry, your file is too large."; $uploadOk = 0; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif" ) { echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { echo "Sorry, your file was not uploaded."; // if everything is ok, try to upload file } else { if (move_uploaded_file($_FILES["submit"]["tmp_name"], $target_file)) { echo "Obrigado por colaborar! A imagem ". basename( $_FILES["submit"]["name"]). " foi enviada.\n\nWe are bizarre!"; } else { exit('Obrigado por sua contribuição!=)'); echo "Sorry, there was an error uploading your file."; } } if (empty($_POST["comment"])) { $comment = ""; } else { $comment = test_input($_POST["comment"]); } } function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } ?> Resultado: Eu deixei esse código de lado um pouco, pois, eu precisei focar em outras coisas. Eu nem mexi nele até então.
  15. Bem na hora que você postou eu ia escrever que deu 2h17m e parece tá de boa. De qualquer modo, eu pesquisarei sobre isso. Edit Em relação ao Delay, eu me lembrei de uma coisa. Eu jogava um jogo chamado Candy Box que quando eu deixava a aba em segundo plano, o contador parava. O jogo é todo em JS.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda_a_Ler_Resistores_e_Capacitores-capa-3d-newsletter.jpg

ebook grátis "Aprenda a ler resistores e capacitores", de Gabriel Torres

GRÁTIS! BAIXE AGORA MESMO!