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 #
ou javascript: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 é Robobozo?<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/-->