I have been scouring the internet, trying to find a way to play a short wav file on a button click. I want to put a total of 10 buttons on my homepage that would each play a different short sound.
I am building my site in WordPress. It seems like this should be easy but I don't know HTML or JavaScript. I suspect I could do this if I had those skills, and if I knew how to insert code into my WordPress theme. I tried inserting 10 audio players onto the page, each playing their own sound, but it was a bulky, awkward way to handle this.
I found this code in a different post on this site, but I don't know where to put it or how to expand it to multiple buttons, each playing a different wav file.
var button = document.querySelector('button'),
audio = null;
button.addEventListener('click', handler, false);
function handler() {
audio = new Audio('https://www.gnu.org/music/FreeSWSong.ogg');
audio.play();
}
<button>Play</button>
Your assistance would be greatly appreciated.
Explanation of your code
I will give a brief explanation to what the code you posted does, as well as point out some things that are worth noting.
document.querySelector('button')selects the first button in the entire document and assigns it to thebuttonvariable.button.addEventListener('click', handler, false);adds a listener tobuttonto executehandler. Here we run into a JavaScript peculiarity that is not obvious. We are referencinghandlereven though we haven't declared it yet. But fear not.Note that
handler()is declared usingfunction. This means that it will be what is called hoisted to the top of the scope. This can be loosely described as saying that the script will behave as if the following was written at the top of the script instead of where it is now.What you posted was
JavaScript. This isHTML. It won't work if you place them together like this. TheJavaScriptengine will come across this and say "I have no idea what this is", throw an error and refuse to do anything else afterwards.To put
JavaScriptandHTMLin the same place, you can put theJavaScriptin a<script>tag in the HTML.A webpage that plays different sounds for different buttons
A reworked example would be something like this:
This is a working webpage, you can copy past this into a text editor, save it with a
.htmlextension and open it in your browser.The first thing to note is that I've put the audio in
<audio>tags. These are HTML tags and so the browser will start loading them when the webpage is loaded, instead of when the buttons are clicked, as in your question. This has a massive performance impact. Instead of downloading the song each time a user clicks a button, they are downloaded once, when they load the page.In JavaScript, we then write code that for each of our buttons, when clicked, we play the sound.
This is the gist of how to play a sound when a button is clicked on a website. How to implement it in WordPress is a different question. You probably put it in a
footer.phptemplate for your theme.Some advice
What you ask isn't the most trivial to implement. Especially not on a WordPress site, which has it's own intricacies and complications. If you're new to web development, maybe try an easier problem first.
I realize you didn't ask for an opinion but think twice about the user experience of playing sounds when pressing buttons. It's not certain they will like it. I would recommend against playing an entire song, especially the Free Software Song.