Same functionality without having to remove classes?

Question

I have three HTML 5 audio elements on a page, each with a different ID (sound,1 sound2, sound3). I have a piece of code to trigger those sounds when a div block is clicked but I made some modifications so that there is no need to double click the same div block in order to trigger the code again. The problem is that the modification I made prohibits the code from pausing the audio.

Is there any way of having this same functionality but with the possibility of pausing the audio when the div block is clicked again?

<script type="text/javascript">
$(".play").on('click', function () {
  var $this = $(this);
  var id = $this.attr('id').replace(/area/, '');

  $.each($('audio'), function () {
    this.pause();
    $(".play").removeClass("active");
  });

  $this.toggleClass('active');
  if($this.hasClass('active')) {
    $('audio[id^="sound"]')[id-1].play();
  } else {
    $('audio[id^="sound"]')[id-1].pause();
  }
});
</script>

html as follows

<body class="body-2">
    <div class="viewport-div"><a id="muteaudio" href="#" class="mute w-inline-block"></a>
        <div class="image-div"><img src="image" loading="lazy" alt="" class="gif" /><a href="/vend" class="vending w-inline-block"></a><a id="2" href="#" class="link-block-3 play w-inline-block"></a><a id="1" href="#" class="link-block-1 play w-inline-block"></a><a id="3" href="#" class="link-block-4 play w-inline-block"></a><a href="#" class="recycle w-inline-block"></a><a href="#" class="prices w-inline-block"></a><a href="#" class="pinball w-inline-block"></a><a href="#" class="bubbles w-inline-block"></a><a href="#" class="arcade w-inline-block"></a></div>
    </div>
    <div class="w-embed w-script">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>>
        <script type="text/javascript">
            $(".play").on('click', function() {
                var $this = $(this);
                var id = $this.attr('id').replace(/area/, '');
                $.each($('audio'), function() {
                    this.pause();
                    $(".play").removeClass("active");
                });
                $this.toggleClass('active');
                if ($this.hasClass('active')) {
                    $('audio[id^="sound"]')[id - 1].play();
                } else {
                    $('audio[id^="sound"]')[id - 1].pause();
                }

            });
        </script>
        <script type="text/javascript">
        </script>
        <audio id="sound1" src="sound1.mp3"> </audio>
        <audio id="sound2" src="sound2.mp3"> </audio>
        <audio id="sound3" src="sound3.mp3"> </audio>
    </div>
    <div class="s-hero-nav-wrapper-2">
        <div data-collapse="medium" data-animation="over-right" data-duration="400" role="banner" class="nav-2 w-nav">
            <div class="c-1200-2 w-clearfix"><a href="#" class="nav-brand w-nav-brand"><img src="https://assets.website-files.com/60ae8c4857598e31ccef08c2/60af6746a2ede9432d6cdc33_NFTeaLand_logo.png" loading="lazy" width="998" alt="" class="image" /></a>
                <nav role="navigation" class="nav-menu-2 w-nav-menu"><a href="/" aria-current="page" class="nav-link-2 _1 w-nav-link w--current">page1</a><a href="/vend" class="nav-link-2 _1 w-nav-link">page2</a></nav>
                <div data-w-id="d6104950-09a0-2661-ce3e-80774ebb96bd" class="nav-menu-btn w-nav-button">
                    <div class="nav-menu-icon w-icon-nav-menu"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=60ae8c4857598e31ccef08c2" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://assets.website-files.com/60ae8c4857598e31ccef08c2/js/webflow.2a88899ee.js" type="text/javascript"></script>
    <!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>

@AlirezaAhmadi Sorry about that! Just added it as an edit. Hopefully, that clarifies this a bit. — Jorge Gutierrez Marco, Jul 31 '21 at 17:42

score 0 · Accepted Answer · answered Jul 31 '21 at 18:29

Note that you are removing the active class form all element that has paly class even from current element that has been clicked, by this line: $(".play").removeClass("active");.

So simply you need to check if the element is the current item you shouldn't remove active class:

 $.each($('audio'), function (e, el) {
     if ("sound" + (id-1) != el.id) {
         this.pause();
         el.classList.remove("active");
     }
 });

Here is working snippet:

$(".play").on('click', function (event) {
    var $this = $(this);
    var id = $this.attr('id').replace(/area/, '');
    $.each($('audio'), function (e, el) {
        if ("sound" + (id-1) != el.id) {
            this.pause();
            el.classList.remove("active");
        }
    });
    $this.toggleClass('active');
    if ($this.hasClass('active')) {
        $('audio[id^="sound"]')[id - 1].play();
    } else {
        $('audio[id^="sound"]')[id - 1].pause();
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<a id="2" href="#" class="link-block-3 play w-inline-block">sound 1</a>
        <a id="1" href="#" class="link-block-1 play w-inline-block">sound 2</a>
        <a id="3" href="#" class="link-block-4 play w-inline-block">sound 3</a>
        
<div class="w-embed w-script">
    <audio id="sound1" src="https://www.elated.com/res/File/articles/authoring/html/html5-audio/WhiteChristmas.mp3"> </audio>
    <audio id="sound2" src="https://www.elated.com/res/File/articles/authoring/html/html5-audio/WhiteChristmas.mp3"> </audio>
    <audio id="sound3" src="https://www.elated.com/res/File/articles/authoring/html/html5-audio/WhiteChristmas.mp3"> </audio>
</div>

Okay, that's interesting! Another question regarding your code, could it be possible to remove the double-clicking? Currently, if I click on the Link block for Sound1 and click in the Link Block of Sound2 to click again on sound1, I need to double click to switch between classes. that's why I thought removing the class would work :S — Jorge Gutierrez Marco, Jul 31 '21 at 18:42
@JorgeGutierrezMarco I didn't catch you. When you double click on a link which means you play and pause it! — Alireza Ahmadi, Jul 31 '21 at 18:46
Correct! Yeah, this is too complex for me. I think I fixed this with a button to toggle between mute/unmuted audio, so I think that will do for now :) — Jorge Gutierrez Marco, Jul 31 '21 at 18:58
See this https://stackoverflow.com/questions/14044761/how-to-mute-all-sound-in-a-page-with-js — Alireza Ahmadi, Jul 31 '21 at 19:01
@JorgeGutierrezMarco Or Try this. [...document.querySelectorAll('audio')].forEach(function(audio) { audio.muted = true; }); — Alireza Ahmadi, Jul 31 '21 at 19:04

Same functionality without having to remove classes?

1 Answers1