We help IT Professionals succeed at work.

audio when an update occurs in a div

joyacv2
joyacv2 asked
on
156 Views
Last Modified: 2014-08-27
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?
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
What changes?

Author

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
Owner (Aidellio)
CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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

Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.