Question 221522 in Html Question posted in
Some basic documentation can be found here.

Html – Sound after click the button and modal window opening

I would like to make a sound after clicking on a button and opening a modal window, I would be grateful for help, no form data is sent to the server, this is just a visual improvement, like clicking on the submit button and the sound of sending a message or email

<button class="rent-yacht-send-button" type="submit" data-modal-open>
          Send<svg class="send-arrows-icon" width="18" height="8">
            <use href="../img/icons.svg#icon-arrow-right"></use>
          </svg>
        </button>
      </form>
    </div>
    <!-- Modal window  -->
    <div class="backdrop is-hidden" data-modal>
      <div class="modal-window">
        <button class="modal-btn" type="button" data-modal-close>
          <svg class="icon-modal" width="24" height="24">
            <use href="../img/icons.svg#icon-close-modal"></use>
          </svg>
        </button>
        <picture>
          <source media="(min-width:768px)" srcset="./img/rent/[email protected] 1x, ./img/rent/[email protected] 2x" />
          <source
            media="(min-width:320px)"
            srcset="./img/rent/[email protected] 1x, ./img/rent/[email protected] 2x"
          />
          <img src="./img/rent/[email protected]" alt="Thanks for confirming your order" class="modal-image" />
        </picture>
        <h3 class="modal-heading">Thank You</h3>
        <p class="modal-p"
          >Thank you for choosing Yacht Adventures, your booking details have been received and our team will be in
          touch shortly to confirm your reservation and provide any additional information or assistance you may
          need.</p
        >
      </div>
    </div>

I found several scripts but they work crookedly, or do not perform their function at all

Tags:

3

Answers


  1. 0

    you can use this code : Jsfiddle

    <button id="buzzButton">Click me to hear buzz</button>


// Function to create a buzz sound
  function buzzSound() {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    oscillator.type = 'sine'; // You can also try 'square', 'sawtooth', or 'triangle'
    oscillator.frequency.setValueAtTime(400, audioContext.currentTime);
    oscillator.connect(audioContext.destination);
    oscillator.start();
    oscillator.stop(audioContext.currentTime + 0.1); // Adjust the duration of the buzz sound here (in seconds)
  }

  // Add event listener to the button
  const buzzButton = document.getElementById('buzzButton');
  buzzButton.addEventListener('click', function(event) {
    event.preventDefault();
    buzzSound();
  });
    Login or Signup to reply.
  2. 0

    Add an audio tag and set the audio url to it’s src value. Then

    let btn = document.getElementById(Id);
let audio = document.getElementById(audioid);
btn.onclick = () => {
  audio.play();
}
    Login or Signup to reply.
  3. 0

    The OP is missing the required JavaScript, plus the HTML is incomplete — there’s no <form> tag, only the end tag </form>. Normally I’d leave a comment, but I’m bored. Details are commented in example below.

    // Reference <form> by #id or [name]
const form = document.forms.main;

// Create an Audio Object
const fart = new Audio("https://soundbible.com/mp3/Wont Start Fart-SoundBible.com-1643093672.mp3");

/** 
 * Register the "submit" event to the <form>
 * When the <button>Open</button> is clicked, the 
 * "submit" event is triggered and the event handler
 * open(event) is called.
 */
form.onsubmit = open;

/**
 * This event handler passes the Event Object by 
 * default.
 * line 1. Stops the default behavior of <form> when
 *         "submit" event is triggered.
 * line 2. Plays MP3 file.
 * line 3. Opens the <dialog> (for demo purposes).
 */
function open(event) {
  event.preventDefault();
  fart.play();
  document.querySelector("dialog").showModal();
}
    form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
    <form id="main">
  <button>Open</button>
</form>

<dialog>
  <form method="dialog">
    <h1>💩</h1>
    <button>OK</button>
  </form>
</dialog>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search