Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 38
Tutorial para Criar um Tocador Musical

Neste tutorial veremos como criar um Tocador Musical simples com apenas tr�s m�sicas, mas voc� poder� adicionar mais. Teremos os controles para execu��o, pause e avan�ar para frente e para tr�s.
Vejamos ent�o o exemplo:
Exemplo: Nesse exemplo vamos utilizar tr�s arquivos separados, um HTML, um CSS e um JavaScript. Voc� deve executar o arquivo html primeiro que ele chamar� os outros quando necess�rio. Voc� dever� criar uma pasta para as imagens (images) e outro para as m�sicas (music):
Arquivo tocadorMusical.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" /> <link rel="stylesheet" href="style.css" /> <title>Tocador Musical</title> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Tocador Musical</h1> <div class="music-container" id="music-container"> <div class="music-info"> <h4 id="title"></h4> <div class="progress-container" id="progress-container"> <div class="progress" id="progress"></div> </div> </div> <audio src="music/ukulele.mp3" id="audio"></audio> <div class="img-container"> <img src="images/ukulele.jpg" alt="music-cover" id="cover" /> </div> <div class="navigation"> <button id="prev" class="action-btn"> <i class="fas fa-backward"></i> </button> <button id="play" class="action-btn action-btn-big"> <i class="fas fa-play"></i> </button> <button id="next" class="action-btn"> <i class="fas fa-forward"></i> </button> </div> </div> <script src="script.js"></script> </body> </html>
Arquivo style.css:
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { box-sizing: border-box; } body { background-image: linear-gradient( 0deg, rgba(247, 147, 247, 1) 23.8%, rgba(252, 221, 121, 1) 92% ); height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Lato', sans-serif; margin: 0; } .music-container { background-color: #000aaa; border-radius: 15px; box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6); display: flex; padding: 20px 30px; position: relative; margin: 100px 0; z-index: 10; } .img-container { position: relative; width: 110px; } .img-container::after { content: ''; background-color: #fff0cc; border-radius: 50%; position: absolute; bottom: 100%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, 50%); } .img-container img { border-radius: 50%; object-fit: cover; height: 110px; width: inherit; position: absolute; bottom: 0; left: 0; animation: rotate 3s linear infinite; animation-play-state: paused; } .music-container.play .img-container img { animation-play-state: running; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .navigation { display: flex; align-items: center; justify-content: center; z-index: 1; } .action-btn { background-color: #fff000; border: 0; color: #dfdbaa; font-size: 20px; cursor: pointer; padding: 10px; margin: 0 20px; } .action-btn.action-btn-big { color: #cdc2aa; font-size: 30px; } .action-btn:focus { outline: 0; } .music-info { background-color: rgba(255, 200, 255, 0.5); border-radius: 15px 15px 0 0; position: absolute; top: 0; left: 20px; width: calc(100% - 40px); padding: 10px 10px 10px 150px; opacity: 0; transform: translateY(0%); transition: transform 0.3s ease-in, opacity 0.3s ease-in; z-index: 0; } .music-container.play .music-info { opacity: 1; transform: translateY(-100%); } .music-info h4 { margin: 0; } .progress-container { background: #fff000; border-radius: 5px; cursor: pointer; margin: 10px 0; height: 4px; width: 100%; } .progress { background-color: #fe8daa; border-radius: 5px; height: 100%; width: 0%; transition: width 0.1s linear; }
Arquivo script.js:
const musicContainer = document.getElementById('music-container'); const playBtn = document.getElementById('play'); const prevBtn = document.getElementById('prev'); const nextBtn = document.getElementById('next'); const audio = document.getElementById('audio'); const progress = document.getElementById('progress'); const progressContainer = document.getElementById('progress-container'); const title = document.getElementById('title'); const cover = document.getElementById('cover'); const currTime = document.querySelector('#currTime'); const durTime = document.querySelector('#durTime'); // T�tulos das M�sicas const songs = ['hey', 'summer', 'ukulele']; // Acompanhe a m�sica let songIndex = 2; // Carregar inicialmente os detalhes da m�sica no DOM loadSong(songs[songIndex]); // Atualizar detalhes da m�sica function loadSong(song) { title.innerText = song; audio.src = `music/${song}.mp3`; cover.src = `images/${song}.jpg`; } // Tocar a m�sica function playSong() { musicContainer.classList.add('play'); playBtn.querySelector('i.fas').classList.remove('fa-play'); playBtn.querySelector('i.fas').classList.add('fa-pause'); audio.play(); } // Pausa a m�sica function pauseSong() { musicContainer.classList.remove('play'); playBtn.querySelector('i.fas').classList.add('fa-play'); playBtn.querySelector('i.fas').classList.remove('fa-pause'); audio.pause(); } // M�sica anterior function prevSong() { songIndex--; if (songIndex < 0) { songIndex = songs.length - 1; } loadSong(songs[songIndex]); playSong(); } // Pr�xima m�sica function nextSong() { songIndex++; if (songIndex > songs.length - 1) { songIndex = 0; } loadSong(songs[songIndex]); playSong(); } // Atualiza barra de progresso function updateProgress(e) { const { duration, currentTime } = e.srcElement; const progressPercent = (currentTime / duration) * 100; progress.style.width = `${progressPercent}%`; } // Define barra de progresso function setProgress(e) { const width = this.clientWidth; const clickX = e.offsetX; const duration = audio.duration; audio.currentTime = (clickX / width) * duration; } // Obter dura��o e hora atual para a hora da m�sica function DurTime (e) { const {duration,currentTime} = e.srcElement; var sec; var sec_d; // Define os minutos do tempo atual let min = (currentTime==null)? 0: Math.floor(currentTime/60); min = min <10 ? '0'+min:min; // Define os segundos do tempo atual function get_sec (x) { if(Math.floor(x) >= 60){ for (var i = 1; i<=60; i++){ if(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) { sec = Math.floor(x) - (60*i); sec = sec <10 ? '0'+sec:sec; } } }else{ sec = Math.floor(x); sec = sec <10 ? '0'+sec:sec; } } get_sec (currentTime,sec); // Altera o tempo atual currTime.innerHTML = min +':'+ sec; // Define a dura��o em minutos let min_d = (isNaN(duration) === true)? '0': Math.floor(duration/60); min_d = min_d <10 ? '0'+min_d:min_d; function get_sec_d (x) { if(Math.floor(x) >= 60){ for (var i = 1; i<=60; i++){ if(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) { sec_d = Math.floor(x) - (60*i); sec_d = sec_d <10 ? '0'+sec_d:sec_d; } } }else{ sec_d = (isNaN(duration) === true)? '0': Math.floor(x); sec_d = sec_d <10 ? '0'+sec_d:sec_d; } } // Define a dura��o em segundos get_sec_d (duration); // Altera a dura��o DOM durTime.innerHTML = min_d +':'+ sec_d; }; // Ouvintes de eventos playBtn.addEventListener('click', () => { const isPlaying = musicContainer.classList.contains('play'); if (isPlaying) { pauseSong(); } else { playSong(); } }); // Muda a m�sica prevBtn.addEventListener('click', prevSong); nextBtn.addEventListener('click', nextSong); // Atualiza��o de hora/m�sica audio.addEventListener('timeupdate', updateProgress); // Clique na barra de progresso progressContainer.addEventListener('click', setProgress); // Fim da M�sica audio.addEventListener('ended', nextSong); // Hora da m�sica audio.addEventListener('timeupdate',DurTime);
Veja na imagem abaixo o resultado desse c�digo::

<< Tutorial para Criar o Jogo Breakout
Tutorial para Criar o Jogo da Forca >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino