HTML and CSS Reference
In-Depth Information
that asks the user to record their voice using
getUserMedia
, and then within the ad they can customize their voice
to sound like a chipmunk or like they're underwater. You can do some amazing things with the Web Audio API,
including creating a variety of sounds for games (
http://html5rocks.com/en/tutorials/webaudio/games
)
or
even creating something like a guitar effects board (
http://dashersw.github.com/pedalboard.js
). For some
other really great examples, visit
http://html5audio.org
,
and be sure to check the support by going to
Web Notifications API
Server-sent events allow for notifications to be sent from a server to a client (browser) in the form of DOM events. If
you are you familiar with Growl (
http://growl.info
)
, the Apple notification center, or push notifications on your
mobile device, you'll quickly understand what these server-side events can do. Well, now directly from within the
browser, you can perform that similar behavior when a user visits your web content. This can be really beneficial if
you're a content owner and a user is on your page; you can send them an alert to refresh the page when an update
is ready. Also, if you're a news broadcaster, this would be really useful to use if you want to push up-to-date news
information to the user on your site. Take a look at working with the Web Notifications API in Listing 12-9.
Listing 12-9.
Server Events API Example
Client Code:
<!DOCTYPE html>
<html>
<body>
<h1>Server:</h1>
<div id="output"></div>
<script>
if (typeof(EventSource)!=="undefined") {
var source = new EventSource("sample.php");
source.onmessage=function(event) {
document.getElementById("output").innerHTML += "New " + event.type + " " + event.data + "<br/>";
};
} else {
document.getElementById("output").innerHTML="No Support";
}
</script>
</body>
</html>
Here is the server code:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: John Percival's time is: {$time}\n\n";
flush();
?>
