2

Estou desenvolvendo uma página que em apenas determinados textos tem áudio. Quero fazer com que o áudio do texto só comece a tocar quando eu chegar no texto. Segue mais ou menos como eu queria. (Não tenho muito conhecimento em javascript, se puderem me dá um help com essa questão.)

<audio src="audio/2.mp3" autoplay></audio>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum animi nobis voluptates aspernatur, impedit molestiae reiciendis. Nisi necessitatibus magnam voluptatem eaque, ut ullam et, sunt aperiam voluptatibus alias, ipsa nesciunt.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum animi nobis voluptates aspernatur, impedit molestiae reiciendis. Nisi necessitatibus magnam voluptatem eaque, ut ullam et, sunt aperiam voluptatibus alias, ipsa nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum animi nobis voluptates aspernatur, impedit molestiae reiciendis. Nisi necessitatibus magnam voluptatem eaque, ut ullam et, sunt aperiam voluptatibus alias, ipsa nesciunt.</p>
<audio src="audio/2.mp3" autoplay></audio>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum animi nobis voluptates aspernatur, impedit molestiae reiciendis. Nisi necessitatibus magnam voluptatem eaque, ut ullam et, sunt aperiam voluptatibus alias, ipsa nesciunt.</p>

1 Resposta 1

3

Você precisa definir uma Classe ou um id para a div que quer que inicie o áudio.

  <audio id = "audioDiv" src="audio/2.mp3"></audio>

Remova o AutoPlay do seu elemento

No Javascript você irá pegar essa classe ou id:

   //Se você colocar id
   audio = document.GetElementById("audioDiv")

ou

  //Se você colocar class
   audio = document.GetElementsByClassName("audioDiv")

Então você colocará essa condição em baixo:

  if (document.documentElement.scrollTop >= audio.offsetTop) {

    audio.play()

   }

Resultado do código testável:

    audio = document.GetElementById("audioDiv")
    onscroll = function()
    {
       if (document.documentElement.scrollTop <= audio.offsetTop) {

       audio.play();
       console.log("ligado")

    }else if (document.documentElement.scrollTop >= audio.offsetTop){

       audio.pause();
       console.log("desligado")
    }
  }

Explicando o código e como aplicar a sua situação:

A variavel Audio receberá o elemento que contém a mídia. O if irá verificar se a pagina no navegador estará numa posição menor que a posição do elemento Audio.

Você pode mudar o operador >= no if para obter outros resultados, como, por exemplo, mudar para <, que iniciará o audio quando o usuário passar por ele. Ai vai da sua necessidade.

A função onscroll irá fazer reproduzir o código toda vez que a pagina se mover. Ou seja, sempre que alguém rolar a pagina.

Observação sobre Class:

Se você for buscar o elemento pela Classe no javascript, ao final da linha de código você precisa definir um index para o elemento especifico, senão ele cria uma lista com todas as Classes existentes com o mesmo nome.

Ficará assim:

audio = document.getElementByClassName("audioDiv").item(0);

O 0 (zero) representa o primeiro elemento com a classe do nome audioDiv.

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 .