JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="test.css>">
    <script>
      document.addEventListener("DOMContentLoaded", () => {

        document.querySelectorAll('form').forEach(form => {
          const $img = form.querySelector('img');
          const $audio = form.querySelector('audio');

          $img.addEventListener('mouseover', () => {
            $audio.play()
          })

          $img.addEventListener('mouseout', () => {
            $audio.pause()
          })
        })

      });

    </script>
  </head>

  <body>
    <form name="button123" method="POST">
      <div class="container">
        <center>
          <img src="https://64.media.tumblr.com/6fb9cfba267395b9bd5a22f2b2018043/d76f3586589b592a-ce/s1280x1920/d31497e27d1f7000f9a2c07835510cf61a3c93d2.jpg" alt="Interface_01" style="width:40%;padding: 10px"></center>
      </div>
      <audio id="audioImagePlay" style="display:none">
        <source src="https://a.tumblr.com/tumblr_qn3ix1ojiI1z5nx53o1.mp3" type="audio/mpeg" />
      </audio>
    </form>



    <form name="mybutton1" method="POST">
      <div class="container">
        <center><img onmouseover="playAudio()" onmouseout="stopAudio()" src="https://64.media.tumblr.com/0a21eddf0834875f19d3953fb8494af6/74632a8a934364ec-d9/s1280x1920/7b65b9dccb8723818f77aa71ced2146e9c38554f.jpg" alt="Interface_02" style="width:40%;padding: 10px"></center>
      </div>
    </form>

    <audio id="audioImagePlay1" style="display:none">
      <source src="https://a.tumblr.com/tumblr_qn3iw5rlmN1z5nx53o1.mp3" type="audio/mpeg" />
    </audio>

    <form name="mybutton2" method="POST">
      <div class="container">
        <center><img onmouseover="playAudio()" onmouseout="stopAudio()"...

JavaScript

document.addEventListener("DOMContentLoaded", () => {

  document.querySelectorAll('form').forEach(form => {
    const $img = form.querySelector('img');
    const $audio = form.querySelector('audio');

    $img.addEventListener('mouseover', () => {
      $audio.play()
    })

    $img.addEventListener('mouseout', () => {
      $audio.pause()
    })
  })

});