Caixa de som animada:
Descrição: Este projeto simula uma caixa de som com alto-falantes e uma corneta realistas, que reagem ao tocar de um arquivo de áudio carregado pelo usuário.
A caixa de som é estilizada com uma cor chocolate, e os alto-falantes possuem animações de pulsação que se ativam conforme a música é reproduzida. Além disso, há uma corneta posicionada acima dos alto-falantes, que também se anima junto com eles.A interface inclui um input oculto para seleção de arquivos de áudio, que é substituído por um ícone, tornando o design mais elegante. O nome da música selecionada é exibido, e há um controle de volume para que o usuário possa ajustar o som durante a reprodução.
Funcionalidades:
1 - Caixa de som com visual realista: A caixa de som é composta por quatro alto-falantes dispostos em duas colunas, com um design tridimensional, que simula profundidade e realismo. Uma corneta posicionada centralmente acima da primeira linha de alto-falantes, também com um efeito realista, simulando uma corneta de som verdadeira.
2 - Animação sincronizada com a música: Os alto-falantes e a corneta ficam animados (pulsando) apenas quando a música está tocando. A animação para automaticamente quando a música é pausada e reinicia ao continuar a reprodução.
3 - Carregamento de arquivos de áudio: O usuário pode selecionar um arquivo de áudio diretamente do seu dispositivo através de um input do tipo file oculto, que é substituído por um ícone. Após a seleção, o nome do arquivo de áudio é exibido abaixo do ícone, permitindo que o usuário veja a música escolhida.
4 - Controle de volume: Um controle deslizante de volume (input range) é adicionado para que o usuário possa ajustar o volume da música durante a reprodução.
5 - Design intuitivo e responsivo: A interface é simples e amigável, permitindo que o usuário interaja facilmente com a caixa de som, carregue suas músicas e controle a reprodução de forma intuitiva. O layout é centralizado e ajustável, funcionando tanto em dispositivos móveis quanto em desktop.
Benefícios:
- Criação de uma interface visual interativa que combina design estético com funcionalidade de áudio.
- Animações realistas que tornam a experiência de tocar música mais envolvente.
- Permite uma experiência personalizada ao tocar arquivos de áudio diretamente do dispositivo do usuário.
Melhorias Futuras:
- Adicionar suporte para listas de reprodução.
- Implementar efeitos sonoros adicionais, como eco ou equalizadores visuais.
- Melhorar o design dos controles de áudio com botões mais personalizados e efeitos visuais.
Veja a Caixa de som em funcionamento neste link. Caixa de Som Animada.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html.
<!DOCTYPE html>
<html lang= "pt-br" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title> Caixa de Som Animada </title>
<link rel= "stylesheet" href= "style.css" >
<link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >
</head>
<body>
<h1> Caixa de Som Animada </h1>
<div class= "audio-upload" >
<i class= "fas fa-file-audio fa-3x" id= "uploadIcon" ></i>
<input type= "file" id= "audioInput" accept= "audio/*" style= "display: none;" >
<p id= "songName" ></p>
</div>
<button id= "playButton" disabled > Tocar Áudio </button>
<div class= "volume-control" >
<label for= "volume" > Volume: </label>
<input type= "range" id= "volume" min= "0" max= "1" step= "0.01" value= "0.5" >
</div>
<audio id= "audio" controls style= "display: none;" </audio>
<div class= "caixa-som" >
<div class= "corneta" ></div>
< div class= "altofalantes" >
<div class= "altofalante" id= "a1" ></div>
<div class= "altofalante" id= "a2" ></div>
<div class= "altofalante" id= "a3" ></div>
<div class= "altofalante" id= "a4" </div>
</div>
</div>
<script src= "script.js" </script>
<footer>
<p> Desenvolvido por <a href="https://ninja1375.github.io/Meu-Portfolio/" target= "_blank" > Antônio Nascimento </a></p>
</footer>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
h1 {
color: #333;
}
.audio-upload {
margin-bottom: 20px;
cursor: pointer;
}
.audio-upload i {
color: #333;
cursor: pointer;
}
.audio-upload i:hover {
color: #007bff;
}
#songName {
margin-top: 10px;
font-size: 16px;
color: #333;
}
.volume-control {
margin-top: 20px;
}
.caixa-som {
width: 300px;
height: 400px;
background-color: #CD5C5C;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
margin: 0 auto;
border-radius: 10px;
position: relative;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
.altofalantes {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.altofalante {
width: 110px;
height: 110px;
background-color: #333;
border-radius: 50%;
margin: 20px;
position: relative;
box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.6),
0px 6px 8px rgba(0, 0, 0, 0.6);
transition: transform 0.1s ease-in-out;
}
.altofalante::before {
content: '';
position: absolute;
top: 15px;
left: 15px;
width: 80px;
height: 80px;
background-color: #555;
border-radius: 50%;
box-shadow: inset 0px 4px 6px rgba(0, 0, 0, 0.6),
0px 2px 4px rgba(0, 0, 0, 0.4);
}
.altofalante::after {
content: '';
position: absolute;
top: 35px;
left: 35px;
width: 40px;
height: 40px;
background-color: #777;
border-radius: 50%;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}
.corneta {
width: 200px;
height: 60px;
background: linear-gradient(145deg, #333 20%, #111 70%);
border-radius: 10px;
margin-bottom: 20px;
transform: scale(1);
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
}
.corneta::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 10px;
background-color: #444;
border-radius: 5px;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.6);
}
.corneta::after {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background-color: #111;
border-radius: 50%;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: green;
color: white;
cursor: pointer;
border-radius: 5px;
border: none;
}
button:disabled {
background-color: #D3D3D3;
cursor: not-allowed;
}
footer {
background-color: #D3D3D3;
color: white;
width: 100%;
text-align: center;
position: fixed;
padding: 5px;
bottom: 0;
left: 0;
right: 0;
margin-top: 20px;
}
footer p {
margin: 5px 0;
}
footer a {
color: #1E90FF;
text-decoration: none;
}
footer a:hover {
color: #FF6347;
}
footer a:active {
color: #32CD32;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const audioInput = document.getElementById('audioInput');
const uploadIcon = document.getElementById('uploadIcon');
const audio = document.getElementById('audio');
const playButton = document.getElementById('playButton');
const songName = document.getElementById('songName');
const volumeControl = document.getElementById('volume');
const speakers = document.querySelectorAll('.altofalante');
const corneta = document.querySelector('.corneta');
let audioContext;
let source;
let analyser;
uploadIcon.addEventListener('click', () => {
audioInput.click();
});
audioInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
audio.src = url;
playButton.disabled = false;
songName.textContent = `Música: ${file.name}`;
}
});
volumeControl.addEventListener('input', () => {
audio.volume = volumeControl.value;
});
playButton.addEventListener('click', () => {
if (audio.paused) {
audio.play().then(() => {
playButton.textContent = "Parar Áudio";
initializeAudioContext();
startSpeakerAnimation();
}).catch(error => {
console.log("Erro ao tentar reproduzir o áudio: ", error);
});
} else {
audio.pause();
playButton.textContent = "Tocar Áudio";
stopSpeakerAnimation();
}
});
function initializeAudioContext() {
if (!audioContext || audioContext.state === 'closed') {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
source = audioContext.createMediaElementSource(audio);
analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 256;
}
}
function startSpeakerAnimation() {
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
function animateSpeakers() {
analyser.getByteFrequencyData(dataArray);
const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
const scale = 1 + (average / 600);
speakers.forEach(speaker => {
speaker.style.transform = `scale(${scale})`;
});
corneta.style.transform = `scale(${scale})`;
if (!audio.paused) {
requestAnimationFrame(animateSpeakers);
}
}
animateSpeakers();
}
function stopSpeakerAnimation() {
speakers.forEach(speaker => {
speaker.style.transform = 'scale(1)';
});
corneta.style.transform = 'scale(1)';
}
4° Passo: Testar Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Comentários
Postar um comentário
Obrigado pelo seu feedback!