Trigger Sound before going to new page-CodePudding

so I'm very new to HTML/CSS and still have not learn anything from Javascript (but I have sort of an idea of how it works). I have this proyect to deliver to my school where I need to make a page, I was thinking of making a portfolio similar to a game but I want the person to click a a custom button a made and before it redirects it to the new page, it can make a custom sound for it.

    <header headerIndex>
  <audio id="selectaudio" preload="auto">
    <source  src="./audio/selectsound.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <a href="./pages/welcome.html"  id="playAudio">Lets Begin!</a>
    </header>

So this is my code here, nothing special at all. How can I make it do the audio sound before moving onto the new page called "welcome.html".

If there is any javascript needed, I can add it as I will try to understand what it does haha. Thank you!

CodePudding user response：

let audio = document.getElementById("selectAudio");
function bell() {
   audio.play();
}     
let playAudio = document.getElementById("playAudio").onclick = bell();

I think this should help, I am also new with JavaScript

CodePudding user response：

I think you need a little time for the sound to be played before you redirect to another page.

This is how I would do it (Jquery needed):

<a onClick="return makeSound('www.example.cmo');" href="#">Click on me!</div>

And JS

function makeSound(url) {
  event.preventDefault();
  
    var audio = new Audio('https://freetestdata.com/wp-content/uploads/2021/09/Free_Test_Data_500KB_WAV.wav');
    audio.play();
  
  setTimeout(function() {
     window.location.href = url;
}, 1000);
}

https://codepen.io/yortem/pen/gOzbYLb