3

Eu quero fazer um texto que quando clica toca algum áudio (mas que não abra em outra página) clicou na palavra tocou o áudio tenho esta dúvida em html eu já tentei fazer um link porém quando clica abre em outra aba. já tentei isto:

<a href="Algum áudio.mp3"> alguma coisa</a>
1
  • Eu alterei o título da questão no intuito de aumentar o alcance de sua pergunta, pois em quase dois anos teve apenas 72 visitas. Caso não esteja de acordo com a modificação a qualquer momento você poderá ir ao histórico da pergunta e reverter a modificação. Commented 13/10/2022 às 0:31

1 Resposta 1

2

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/-->

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .