audio when an update occurs in a div

Posted on 2014-08-26
Last Modified: 2014-08-27

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?
Question by:joyacv2
    LVL 58

    Expert Comment

    What changes?
    LVL 1

    Author Comment

    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
    LVL 42

    Accepted Solution

    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.
    LVL 107

    Expert Comment

    by:Ray Paseur
    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


    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Suggested Solutions

    What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now