From 22592f444da95e794c1a4d612d2ab37bf30d41f8 Mon Sep 17 00:00:00 2001 From: jmsoper Date: Tue, 26 Apr 2016 15:36:15 -0400 Subject: [PATCH] add README --- .DS_Store | Bin 6148 -> 6148 bytes README.md | 44 ++++++++++++++++++++++++ app.js | 26 ++++++++++---- index.html | 18 ++++++++++ landing.png | Bin 0 -> 69902 bytes style.css | 97 +++++++++++++++++++++++++++++++++++++++++++++++++--- welcome.png | Bin 0 -> 318417 bytes 7 files changed, 174 insertions(+), 11 deletions(-) create mode 100644 README.md create mode 100644 landing.png create mode 100644 welcome.png diff --git a/.DS_Store b/.DS_Store index d0ede42409e3c129292930a07cc6650151350968..27334b515b0d608ba0d8a5c4fd204147d9ed61f1 100644 GIT binary patch delta 73 zcmZoMXfc@J&&a(oU^gQp_hud@Z$@oSh9Cx421f=L245hp$B@gA;+d15oRpKF#K6EH Zz`(#51f*yD2ZGH3%&jb&**X650|13x6NLZ( delta 32 ocmZoMXfc@J&&ahgU^gQp*Jd6jZ^q4?%yldi3ye0ibNuB80HSLN>Hq)$ diff --git a/README.md b/README.md new file mode 100644 index 0000000..141380b --- /dev/null +++ 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 index 6890308..8d16dfb 100644 --- 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 index ee60063..712f4e3 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Visualizer + +
+
+

audio visualizer

+
+

This is an audio visualization demo built with the Web Audio API.

+

An [options] button to the right opens a dropdown to select different display options, including a colorpicker, and cycling through colors or visualizations.

+

Click on the ? on the left at any time to return to this page.

+
+
+ +
+
+