Science, Tech, Math › Computer Science How to Play a Sound on Click or Rollover Use dynamic HTML to play sounds Share Flipboard Email Print Monty Rakusen / Getty Images Science, Tech, Math PHP Programming Perl Python Java Programming Javascript Programming Delphi Programming C & C++ Programming Ruby Programming Visual Basic View More By Jennifer Kyrnin Jennifer Kyrnin Writer University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. Learn about our Editorial Process Updated on March 12, 2020 By using dynamic HTML attributes and sounds, you can create a web page that acts more like an application. Add Sound When a Customer Clicks Something Create a script that adds sound effects when a customer clicks something using the attribute and when a customer rolls over something using the attribute. Test these effects in different browsers, as not all web browsers handle on mouseover and on click attributes on elements other than links. Place the following script in the head of your HTML document: <script language="javascript" type="text/javascript">function playSound(soundfile) {document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\"loop=\"false\" />";}</script> Place Sound in an Empty Span The JavaScript places an embed element inside an empty span element when the script is initiated. So, you need to add the following span tag somewhere within the body of your HTML page, preferably near the top of the document: <span id="dummy"></span> Call the Script With an Attribute Add an element to generate the sound on click or on mouseover. Call the script with one of these attributes. Replace UrlToSoundFile with the full URL to the sound file you'd like it to play: <a href="#" onclick="playSound('UrlToSoundFile');">Click here to hear a sound</a><p onmouseover="playSound('UrlToSoundFile');">Mouse over this text to hear a sound</p> Here is the entire HTML document, playing the sound of a bluejay. The sound file is stored in the same directory as the HTML page: <!doctype html><html><head><meta charset="ISO-8859-1" /><title>Example of How to Play a Sound on Click or on MouseOver</title><script language="javascript" type="text/javascript">function playSound(soundfile) { document.getElementById("dummy").innerHTML= "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";}</script></head><body><span id="dummy"></span><p><a href="#" onclick="playSound('zbluejay.wav');">Click here to hear a bird sing</a></p><p onmouseover="playSound('zbluejay.wav');">Or you can put your mouse over this paragraph to hear the same bird sound.</p></body></html> Cite this Article Format mla apa chicago Your Citation Kyrnin, Jennifer. "How to Play a Sound on Click or Rollover." ThoughtCo, Sep. 30, 2021, thoughtco.com/play-sound-on-click-or-rollover-3469484. Kyrnin, Jennifer. (2021, September 30). How to Play a Sound on Click or Rollover. Retrieved from https://www.thoughtco.com/play-sound-on-click-or-rollover-3469484 Kyrnin, Jennifer. "How to Play a Sound on Click or Rollover." ThoughtCo. https://www.thoughtco.com/play-sound-on-click-or-rollover-3469484 (accessed March 23, 2023). copy citation