audio when an update occurs in a div

joyacv2 used Ask the Experts™

I want to make a sound when a change occurs inside a div tag, i have some formats for the audio (.ogg,.mp3,.wav). I don't want to show the player controls, only play the sound each time the div changes, any idea?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014

What changes?


Hi Gary,

I have a div that changes in a chat application,the div contains text inside, i want when an update occurs inside the div, then plays the sound
Owner (Aidellio)
Most Valuable Expert 2015
a div element doesn't have an update or change event.  You will need to do this in the code that updates the div.  Do you have access to that?  probably ajax.
Most Valuable Expert 2011
Top Expert 2016

This seems to work with modern browsers in a way that makes sense.  The audio is loaded by the browser but not played until the checkbox is clicked.  The horse noise is only played as the hidden div is made visible.

Demo here:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<!-- SEE -->

<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Page with jQuery fadeToggle()</title>

<script type="text/javascript" src=""></script>
        if ($("#at").is(':hidden')){


<audio id="aa"><source src="horse.mp3" type="audio/mp3" />(Horse whinny)</audio>
<div   id="at">This is initially hidden; toggled in and out of view via the checkbox.</div>
<input id="xa" type="checkbox" />Click me


Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial