O elemento HTML <a>
, ou elemento âncora, com o atributo href cria um hyperlink nas páginas web. Veja a orientação a respeito do uso desses elementos como se fossem botões:
Elementos âncora são frequentemente usados como botões falsos, definindo seu atributo
href
como#
oujavascript:void(0)
para evitar que a página seja atualizada e, em seguida, ouvindo seus eventos de clique .Esses valores de
href
falsos causam um comportamento inesperado ao copiar/arrastar links, abrir links em uma nova guia/janela, marcar como favoritos ou quando o JavaScript estiver carregando, apresentar erros ou estiver desabilitado. Eles também transmitem semântica incorreta para tecnologias assistivas, como leitores de tela.Use um em vez disso. Em geral, você deve usar apenas um hiperlink para navegação em uma URL real.
Font: MDN- Elemento onclick events
Então use um elemento <button>
estilizado para tocar um audio embutido com o elemento <audio>
e acionado pelo método HTMLMediaElement.play()
const button = document.querySelector("button");
const audio = document.querySelector("audio");
button.addEventListener("click", function() {
audio.play()
});
button {
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
color: blue;
cursor: pointer;
text-decoration: none;
}
button:hover{
text-decoration: underline;
}
<span>Você sabe o que é RobozzoRobobozo?<br> Clique <button>aqui</button> para descobrir.</span>
<audio src="https://incompetech.com/music/royalty-free/mp3-royaltyfree/Robobozo.mp3">
Seu navegador não suporta o elemento<code>audio</code>.
</audio>
<!-- Robobozo Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License
http://creativecommons.org/licenses/by/3.0/-->