audio when an update occurs in a div

Hi,

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?
LVL 1
joyacv2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
What changes?
0
joyacv2Author Commented:
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
0
RobOwner (Aidellio)Commented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
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: http://iconoun.com/demo/temp_joyacv2.php

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

<!-- SEE http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28506029.html#a40287719 -->

<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="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#at").hide();
    $("#xa").click(function(){
        if ($("#at").is(':hidden')){
            $("#aa").trigger("play");
        }
        $("#at").toggle();
    });
});
</script>

</head>
<body>

<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

</body>
</html>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.