joyacv2
asked on
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?
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?
What changes?
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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>