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