Audio only start when I reach a certain div

Question

I’m developing a page that only has audio in certain texts. I want to make sure that the audio of the text only starts playing when I get to the text. It follows more or less as I wanted. (I don’t have much knowledge in javascript, if you can give me a help with this question.)

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

Answer 1

You need to define a Class or a id to the div that wants audio to start.

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

Remove Autoplay from your element

In Javascript you will get this class or id:

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

or

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

Then you’ll put that condition down:

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

    audio.play()

   }

Result of testable code:

    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")
    }
  }

Explaining the code and how to apply your situation:

The variable Audio will receive the element containing the media. The if will verify that the page in the browser will be in a position less than the position of the Audio element.

You can change the operator >= in the if for other results, such as switching to <, that will start the audio when the user goes through it. There goes your need.

The function onscroll will play the code every time the page moves. That is, whenever someone scrolls the page.

Comment on Class:

If you search for the element by the Class in javascript, at the end of the code line you need to define an index for the specific element, otherwise it creates a list with all Classes existing under the same name.

Will stay like this:

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

0 (zero) represents the first element with the audioDiv class name.