-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
69 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,5 @@ | ||
# / webaudio-examples-main/violent-theremin / # | ||
violent theremin example | ||
# violent-theremin | ||
|
||
Violent theremin uses the Web Audio API to generate sound, and HTML5 canvas for a bit of pretty visualization. The colours generated depend on the pitch and gain of the current note, which are themselves dependant on the mouse pointer position. | ||
|
||
You can [view the demo](http://mdn.github.io/webaudio-examples/violent-theremin/) live here. |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width" /> | ||
<title>Violent Theremin</title> | ||
<link href="styles/normalize.css" rel="stylesheet" type="text/css" /> | ||
<link href="styles/app.css" rel="stylesheet" type="text/css" /> | ||
</head> | ||
<body> | ||
<p class="start-message"> | ||
Click on the browser window or press the tab key to start the app. | ||
</p> | ||
|
||
<div class="app-contents"> | ||
<h1>Violent Theremin</h1> | ||
|
||
<button class="mute" data-muted="false">Mute</button> | ||
<button class="clear">Clear screen</button> | ||
<p class="control-message"> | ||
Use mouse or arrow keys to control theremin. | ||
</p> | ||
|
||
<canvas class="canvas"> | ||
Your browser does not support HTML5 canvas | ||
</canvas> | ||
</div> | ||
|
||
<!-- Below is your custom application script --> | ||
|
||
<script src="scripts/app.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
{ | ||
"version": "0.1", | ||
"name": "Violent Theremin", | ||
"description": "A sample MDN app that uses Web Audio API to generate an audio tone, the pitch and volume of which is varied by the movement of the mouse and control keys. It also uses HTML5 Canvas to generate some visualizations.", | ||
"launch_path": "/index.html", | ||
"icons": { | ||
"60": "app-icons/icon-60.png", | ||
"128": "app-icons/icon-128.png" | ||
}, | ||
"developer": { | ||
"name": "Chris Mills", | ||
"url": "https://developer.mozila.org" | ||
}, | ||
"locales": { | ||
"es": { | ||
"description": "A sample MDN app that uses Web Audio API to generate an audio tone, the pitch and volume of which is varied by the movement of the mouse and control keys. It also uses HTML5 Canvas to generate some visualizations.", | ||
"developer": { | ||
"url": "https://developer.mozila.org" | ||
} | ||
}, | ||
"it": { | ||
"description": "A sample MDN app that uses Web Audio API to generate an audio tone, the pitch and volume of which is varied by the movement of the mouse and control keys. It also uses HTML5 Canvas to generate some visualizations.", | ||
"developer": { | ||
"url": "https://developer.mozila.org" | ||
} | ||
} | ||
}, | ||
"default_locale": "en", | ||
"permissions": {}, | ||
"orientation": "landscape" | ||
} |