Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 136
  • Last Modified:

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?
0
joyacv2
Asked:
joyacv2
1 Solution
 
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
 
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now