Audio on Scroll

Audio on scroll in a DIV

In code below sound starts playing when 30% of the third block is visible.

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body { margin: 0; padding: 0; }
    </style>
  </head>
  <body>
    <audio src="/sound.wav"></audio>
    <div style="height: 100%; background: #ff5555">first page</div>
    <div style="height: 100%; background: #55ff55">second page</div>
    <div id="d3" style="height: 100%; background: #5555ff">third page</div>
    <script>
     const el = document.querySelector("audio");
     let playing = false;
     window.addEventListener('scroll', (e) => {
       const scroll = e.target.body.scrollTop;
       const rect = document.getElementById("d3").getBoundingClientRect();
       const top = rect.top;
       if (!playing && top > rect.height / 3) {
         el.play();
         playing = true;
       } else if (top < rect.height / 3) {
         el.pause();
         playing = false;
       }
     });
    </script>
  </body>
</html>

Update after comments:

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      body { margin: 0; padding: 0; }
    </style>
  </head>
  <body>
    <div id="d1" style="height: 100%; background: #ff5555">first page</div>
    <div id="d2" style="height: 100%; background: #55ff55">second page</div>
    <div id="d3" style="height: 100%; background: #5555ff">third page</div>
    <script>
     const soundfiles = ["sound.wav", "sound2.wav", "sound.wav"];
     const divIds = ["d1", "d2", "d3"];
     const els = soundfiles.map((filename, index) => {
       const el = document.createElement("audio");
       el.src = "/" + filename;
       document.body.appendChild(el);
       return el;
     })
     const playing = new Array(divIds.length).fill(false);
     window.addEventListener('scroll', (e) => {
       const scroll = e.target.body.scrollTop;
       const rects = divIds.map(id => document.getElementById(id).getBoundingClientRect());
       const tops = rects.map(rect => rect.top);
       tops.forEach((top, ind) => {
         if (!playing[ind] && top <= rects[ind].height * 2 / 3 && top > - rects[ind].height * 1 / 3) {
           els[ind].play();
           playing[ind] = true;
         } else if (playing[ind] && (top > rects[ind].height * 2 / 3 || top < -rects[ind].height * 1 / 3)) {
           els[ind].pause();
           playing[ind] = false;
         }
       });
     });
    </script>
  </body>
</html>

Audio on scroll

var playing = false;
var audioElm = $('#soundTour').get(0);
$(window).scroll(function() {
  var pageScroll = $(window).scrollTop();
  if(!playing && pageScroll > 500 && pageScroll < 3000){
    audioElm.play();
    playing = true;
  }else if(pageScroll > 3000 || pageScroll < 500){
    audioElm.pause();
    playing = false;
  }
});

You need to add some conditions.
(I define the variables outside for performance matters, as jQuery scroll has really bad performance, that gets even worse on phones).

Pen: http://codepen.io/vandervals/pen/KpWzVJ

Disable/Enable audio on scroll event

// Scrool div anchorvar danceEl = $("#employee-dance");var danceElOffset = danceEl.offset().top;var danceElHeight = danceEl.height();var myAudio = document.getElementById("myAudio");
var $w = $(window).scroll(function() {  if ($w.scrollTop() >= danceElOffset && $w.scrollTop() <= (danceElOffset + danceElHeight)) {    myAudio.play();    myAudio.volume = 0.2;  } else {    myAudio.pause();    myAudio.volume = 0;  }
});

#employee,#employee-dance,#down-text {  height: 700px;}#employee {  background: green;}#employee-dance {  background: red;}#down-text {  background: orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><section id="employee"></section><section id="employee-dance">  <audio loop id="myAudio">    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">  </audio></section><section id="down-text"></section>

mute unmute sound with jQuery on scroll

You need to use the volume property, not set the muted attribute. Try this:

$(window).scroll(function() {
    $('audio').prop('volume', $(this).scrollTop() > 1 ? 0 : 1);
});

Updated Codepen

Audio on Scroll

Audio on scroll in a DIV

Audio on scroll

Disable/Enable audio on scroll event

mute unmute sound with jQuery on scroll

Related Topics

Leave a reply