added web audio

samdutton · Sep 6, 2012 · f0c1802 · f0c1802 · asgs · Dec 16, 2017
1 parent 61adac1
commit f0c1802
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 15 deletions.
diff --git a/css/main.css b/css/main.css
@@ -77,7 +77,7 @@ border: none;
 p {
 color: #eee;
 font-size: 18px;
-line-height: 1em;
+line-height: 1.2em;
 }
 
 p#data {

diff --git a/index.html b/index.html
@@ -47,18 +47,16 @@ <h1>simpl.info</h1>
   <a href="softhyphen/index.html" title="Soft hyphen (&amp;shy;) example">Hyphenation (soft hyphen)</a>
   <a href="iframe/index.html" title="iframe element example">&lt;iframe&gt;</a>
   <a href="bigimage/index.html" title="Example of an image with large file size">Image: a big one (20MB)</a>
-  <a href="indexeddb/index.html" title="IndexedDB example">IndexedDB</a>
+  <!-- <a href="indexeddb/index.html" title="IndexedDB example">IndexedDB</a> -->
   <a href="localstorage/index.html" title="localStorage">localStorage</a>
-<!-- media queries -->
   <a href="pagevisibility/index.html" title="Page Visibility API example">Page Visibility API</a>
   <a href="peerconnection/index.html" title="PeerConnection example">PeerConnection</a>
   <a href="postmessage/index.html" title="postMessage() example">postMessage()</a>
   <a href="sessionstorage/index.html" title="sessionStorage example">sessionStorage</a>
   <a href="track/index.html" title="Track element">&lt;track&gt;</a>
   <a href="video/index.html" title="Video element">&lt;video&gt;</a>
-<!-- web audio -->
+  <a href="webaudio/index.html" title="Web Audio">Web Audio</a>
   <a href="webfonts/index.html" title="Web fonts">Web Fonts</a>
-<!-- webgl -->
   <a href="stnetnibew/index.html" title="Web Intents example">Web Intents</a>
   <a href="webrtc/index.html" title="WebRTC">WebRTC</a>
   <a href="websql/index.html" title="WebRTC">WebSQL</a>

diff --git a/ssi.html b/ssi.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+
+<title>Untitled</title>
+
+<style type="text/css">
+</style>
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+<script type="text/javascript">
+$(document).ready(function() {
+
+});
+</script>
+
+<script type="text/javascript">
+
+</script>
+
+</head>
+
+<body>
+
+<div id="container">
+<!--#echo var="DATE_LOCAL" -->
+</div><!-- container -->
+
+</body>
+
+</html>
diff --git a/webaudio/audio/animalSounds.mp3 b/webaudio/audio/animalSounds.mp3
diff --git a/webaudio/audio/animalSounds.ogv b/webaudio/audio/animalSounds.ogv
diff --git a/webaudio/index.html b/webaudio/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+<title>Web Audio</title>
+<link rel="stylesheet" href="../css/main.css" />
+</head>
+<body>
+<div id="container">
+
+<h1><a href="../index.html" title="simpl.info home page">simpl.info</a> Web Audio</h1>
+
+<audio autoplay controls>
+	<source src="audio/animalSounds.ogv" type="audio/ogg" />
+	<source src="audio/animalSounds.mp3" type="audio/mp3" />
+	This browser does not support the audio element.
+</audio>
+
+<p>For more information about Web Audio see <a href="http://www.html5rocks.com/en/tutorials/webaudio/intro/" title="HTML5 Rocks tutorial: Getting started with the Web Audio API">Getting started with the Web Audio API</a>.</p>
+
+<script src="js/main.js"></script>
+
+<a href="view-source:http://simpl.info/webaudio" title="View source for this page" id="viewSource">View source</a>
+</div> 
+<script src="../js/lib/ga.js"></script>
+</body>
+</html>
diff --git a/webaudio/js/main.js b/webaudio/js/main.js
@@ -0,0 +1,36 @@
+// create an AudioContext
+// create an audio source node
+// connect it to a filter node
+// connect that a gain node
+// play sound!
+
+// cope with browser differences
+var context;
+if (typeof webkitAudioContext === "function") {
+  context = new webkitAudioContext();
+} else if (typeof AudioContext === "function") {
+  context = new AudioContext();
+} else {
+  alert("Sorry! Web Audio is not supported by this browser");
+}
+
+// use the audio element to create the source node
+var audioElement = document.querySelector("audio");
+var sourceNode = context.createMediaElementSource(audioElement);
+
+// connect the source node to a filter node
+var filterNode = context.createBiquadFilter();
+// see https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
+filterNode.type = 1; // HIGHPASS 
+// cutoff frequency: for HIGHPASS, audio is attenuated below this frequency
+filterNode.frequency.value = 1760; 
+sourceNode.connect(filterNode);
+
+// connect the filter node to a gain node (to change audio volume)
+var gainNode = context.createGainNode();
+// default is 1 (no change); less than 1 means audio is attenuated, and vice versa
+gainNode.gain.value = 0.5; 
+filterNode.connect(gainNode);
+
+// connect the gain node to the destination (i.e. play the sound)
+gainNode.connect(context.destination);
diff --git a/websql/index.html b/websql/index.html
@@ -4,6 +4,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>WebSQL</title>
 <link rel="stylesheet" href="../css/main.css">
+
   <style>
   button {
     width: 60px;
@@ -31,7 +32,11 @@
     color: #ccc;
     padding: 0 15px 0 15px;
   }
+  p#data {
+    height: 150px;
+  }
   </style>
+
 </head>
 <body>
 <div id="container">

diff --git a/websql/js/main.js b/websql/js/main.js
@@ -33,8 +33,9 @@ function handleError(transaction, error) {
   return false;
 }
 
+var dataElement = document.getElementById("data");
 function log(message){
-  document.getElementById("data").innerHTML += message + "<br /><br />";
+  dataElement.innerHTML = message + "<br /><br />" + dataElement.innerHTML;
 }
 
 

diff --git a/xhr/index.html b/xhr/index.html
@@ -11,17 +11,10 @@
   <h1><a href="../index.html" title="simpl.info home page">simpl.info</a> XMLHttpRequest (aka AJAX)</h1>
 
   <p>This page gets the following data from <a href="data.json" title="Data file in JSON format">data.json</a>:</p>
+
   <p id="data"></p>
 
-  <script type="text/javascript">
-  var xhr = new XMLHttpRequest();
-  xhr.open('GET', 'data.json');
-  xhr.onload = function(event) {
-    var data = JSON.parse(this.response);
-    document.querySelector("#data").innerHTML = JSON.stringify(data);
-  }
-  xhr.send();
-  </script>
+  <script src="js/main.js"></script>
 
 <a href="view-source:http://simpl.info/xhr" title="View source for this page" id="viewSource">View source</a>
 </div> 

diff --git a/xhr/js/main.js b/xhr/js/main.js
@@ -0,0 +1,19 @@
+var xhr = new XMLHttpRequest();
+xhr.open("GET", "data.json");
+
+xhr.onreadystatechange = function() {
+  if (xhr.readyState === 4 && xhr.status === 200) {
+    var data = JSON.parse(xhr.responseText);
+    document.querySelector("#data").innerHTML = JSON.stringify(data);
+  }
+}
+
+/* 
+// can do this in Chrome, Firefox, etc.:
+xhr.onload = function(event) {
+  var data = JSON.parse(this.response);
+  document.querySelector("#data").innerHTML = JSON.stringify(data);
+}
+*/
+
+xhr.send();