add README

millmason · Apr 26, 2016 · 22592f4 · 22592f4
1 parent 5dabc08
commit 22592f4
Show file tree

Hide file tree

Showing 7 changed files with 174 additions and 11 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,44 @@
+# Wavy
+
+Make some waves -- see your favorite tracks in a new light.
+
+Wavy is a web application built using the Web Audio API and HTML5 Canvas for generating visual representations of sound files.
+
+[see Wavy live][heroku]
+
+[heroku]: http://jmsoper.github.io/audio_visualizer
+
+Wavy allows users to:
+
+- Play their own recordings
+- Play a sample track
+- Adjust the color or style of the visualization
+- See data on the track from the Web Audio API as represented by canvas
+
+###Welcome View
+![welcome]
+
+###Landing Page
+![landingPage]
+
+###Technical Details
+COMING SOON
+
+###Future Features
+* Users can create and listen to playlists
+* Offers more visualizations
+* Uses particles to generate touch-responsive visualizations
+* Allow for sound manipulation
+
+###To-Do:
+* [ ] buffer tracks to allow for more analysis
+* [ ] build waveform reader and rendering
+* [ ] provide slider bars to warp and manipulate tracks
+* [ ] make playlist interface
+* [ ] allow for storage of multiple tracks
+* [ ] implement buttons for moving between tracks
+* [ ] implement sequential playing
+
+
+[welcome]: ./welcome.png
+[landingPage]: ./landing.png
diff --git a/app.js b/app.js
@@ -16,12 +16,15 @@ window.onload = function() {
   	var audioInput = document.getElementById('audiofile');
 
     audioInput.addEventListener('change', function(event) {
-      stream = URL.createObjectURL(event.target.files[0]);
-      audio = new Audio();
-      console.log(audio);
-      audio.src = stream;
-      setup();
-    });
+      if (!audioContext || audioContext.state !== "running"){
+          stream = URL.createObjectURL(event.target.files[0]);
+          audio = new Audio();
+          console.log(audio);
+          audio.src = stream;
+          setup();
+        }
+      });
+
 
     var sample = document.getElementsByClassName('sample')[0];
 
@@ -185,4 +188,15 @@ window.onload = function() {
       display = "circles";
       console.log(display);
     })
+    var question = document.getElementsByClassName('help')[0];
+    var closeButton = document.getElementsByClassName('close')[0];
+    var modal = document.getElementsByClassName('modal')[0];
+
+    closeButton.addEventListener("click", function(){
+      modal.classList.add("closed");
+    })
+
+    question.addEventListener("click", function() {
+      modal.classList.remove("closed");
+    })
 };
diff --git a/index.html b/index.html
@@ -3,13 +3,31 @@
 <head>
 <meta charset=utf-8 />
 <title>Visualizer</title>
+ <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300' rel='stylesheet' type='text/css'>
 <script src="app.js" charset="utf-8"></script>
 <link href="style.css" rel="stylesheet" type="text/css"></link>
 <link rel="icon"
       type="image/png"
       href="favicon.ico">
 </head>
 <body>
+  <div class="modal">
+    <div class="opening">
+      <h1>audio visualizer</h1>
+      <div class="text">
+        <p> This is an audio visualization demo built with the Web Audio API.</p>
+        <p> An [options] button to the right opens a dropdown to select different display options, including a colorpicker, and cycling through colors or visualizations.</p>
+        <p> Click on the ? on the left at any time to return to this page.</p>
+      </div>
+      <div class="buttons">
+        <ul>
+          <li><a href="http://www.github.com/jmsoper">github repo</a></li>
+          <li><a href="http://www.juliasoper.com">personal site</a></li>
+          <li class="close"><a>CONTINUE</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
   <nav class="nav">
 
     <div class="button sample"><a>play sample track</a></div>

diff --git a/landing.png b/landing.png
diff --git a/style.css b/style.css
@@ -1,6 +1,21 @@
 ul {
   margin-top: 10px;
   padding: 0;
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: #555;
+}
+
+
+a:active {
+  color: #00688B;
+}
+
+html {
+  font-family: 'Lato', sans-serif;
 }
 
 li {
@@ -43,7 +58,7 @@ p:hover {
   padding: 5px 10px;
   max-width: 133px;
   color: white;
-  font-family: sans-serif;
+  font-family: 'Lato', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   font-size: 12px;
@@ -103,7 +118,7 @@ p:hover {
   padding: 5px 10px;
   max-width: 133px;
   color: white;
-  font-family: sans-serif;
+  font-family: 'Lato', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   font-size: 12px;
@@ -125,7 +140,6 @@ p:hover {
   list-style: none;
   letter-spacing: 1.6px;
   font-size: 14px;
-  font-weight: lighter;
   padding: 5px 10px;
   border-top: 1px solid white;
 }
@@ -189,8 +203,8 @@ p:hover {
   margin-right: 20px;
 }
 
-.options a:hover {
-  color: #555;
+.options li a:hover {
+  background-color: rgba(255,255,255, .5);
 }
 
 .options a:active {
@@ -212,3 +226,76 @@ p:hover {
 .controls {
   padding-top: 20px;
 }
+
+.modal {
+  position: absolute;
+  width: 100%;
+  background-color: rgba(255,255,255, .6);
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 1000;
+  font-family: 'Lato';
+}
+.help {
+  color: white;
+}
+
+.opening {
+  border: 3px solid white;
+  width: 25%;
+  margin: 50px auto;
+  padding: 25px;
+  background-color: rgba(255,255,255, .5);
+  color: #555;
+    position: relative;
+}
+
+.opening .text{
+  margin: 15px auto;
+}
+
+.opening h1 {
+  margin: 0 auto;
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+  padding-left: -20px;
+  padding-right: -20px;
+}
+
+.opening li {
+  display: inline-block;
+  margin: 0 6px;
+}
+
+.opening .buttons {
+  margin: 0 auto;
+}
+.opening a {
+  margin-top: 30px;
+  background-color: white;
+  padding: 5px 10px;
+  margin: 5px;
+  display: block;
+}
+
+.opening a:hover {
+  color: darkturquoise;
+}
+
+.close {
+  width: 93%;
+  margin-left: 30px;
+}
+
+.close a {
+  text-align: center;
+}
+
+.close:hover {
+  color: darkslategray;
+}
+
+.closed {
+  display: none;
+}
diff --git a/welcome.png b/welcome.png