<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#toggleButton {
background: none;
border: none;
cursor: pointer;
}
#muteImg {
display: none;
}
</style>
</head>
<body>
<div class="container">
<audio id="meuAudio" loop>
<source src="https://meuaudio.mp3" type="audio/mpeg">
</audio>
<button id="toggleButton">
<img id="playImg" src="play.svg" alt="Play">
<img id="muteImg" src="silenciar.svg" alt="Silenciar" style="display: none;">
</button>
</div>
<script>
const audio = document.getElementById('meuAudio');
const playImg = document.getElementById('playImg');
const muteImg = document.getElementById('muteImg');
const toggleButton = document.getElementById('toggleButton');
let muted = false;
toggleButton.addEventListener('click', toggleMute);
toggleButton.addEventListener('touchstart', toggleMute);
function toggleMute(event) {
event.preventDefault();
muted = !muted;
if (muted) {
audio.volume = 0;
playImg.style.display = 'inline';
muteImg.style.display = 'none';
} else {
audio.volume = 1;
playImg.style.display = 'none';
muteImg.style.display = 'inline';
if (audio.paused) {
audio.play();
}
}
}
</script>
</body>
</html>
leo-colera
Zerinho
Registrado
1 Mensagem
0 Curtidas
Problemas com cliques em botão, Javascript e ios.
#1 Por leo-colera
13/04/2024 - 21:28
Olá! Estou precisando de uma ajuda e não entendo onde estou errando. Qual o caso?!... Um único botão com apenas duas funções em html, css e js integrados, tocar audio que vem de site externo e silenciar esse audio. Esse botão é um play/silenciar. Ele abre em silêncio, junto com o site (por questão de conveniência, vai que o volume está alto e tals...) e o botão precisa ser clicado para tocar. Aí já está o primeiro problema pois o javascript só é chamado no segundo clique e não no primeiro clique como deveria ser. O que está errado? ... Já no IOS tem mais uma questão. O som não silencia quando clicado pra silenciar. Isso só está acontecendo no ios. O que eu resolvo aqui?... O código é esse abaixo e está funcionando, mas com este problemas citados (clique duplo para chamar o JS pela primeira vez e no ios não silencia quando clicado, o ícone muda quando clicado, mas o audio não silencia). Ahh... Só testei no Chrome, Android e IOS.... Valendo pix de 30 mangos pela resolução desses problemas nesse código. Sei que é baixo, mas é o que posso!... Obrigado, gente!...
