Marc Hawkins

Marc Hawkins

1st Lootcrate

Marc Hawkins

In spite of it.

Marc Hawkins

Visualize Audio from MP3

1 min read

Using the HTML 5 Canvas element to render out a visualization from an mp3 file.

A few notes

  • script loads an mp3 file into an AudioContext object
  • 2 sound analyzers created to capture left/right audio channel data
  • as audio file plays, the audio channel is analyzed and written, as a gradient, to the canvas element 
  • only works in browsers supporting the AudioContext object (Chrome, Safari, Firefox, Opera)
  • heavily influenced by the work of jos dirksen

For this test, click the "Play" button and an audio file will begin playing. The left and right sound channel volume will be reflected in the left and right bars in the canvas element.

Check out the code on GitHub.

Marc Hawkins

Natural Language Dates

1 min read

Using the datejs library to process natural language speech and return a specific date, and speak the result with the html 5 speech synthesis api.

A few notes

  • there seems to be a few bugs when combining relative dates ("today", "tomorrow") with times; all times seem to render as AM
  • slight bug with the speech as it sometimes says "XX third" but also says "t" "h" (ordinal is repeated)
  • this speech portion of this demo works on the desktop and Android versions of Chrome
  • the date is based on the user's system clock

For this test, click a relative date from the list. The specific date you requested will be displayed in the text field and will be spoken to you.

Check out the code on GitHub.

Marc Hawkins

Voice Commands - Time Test

1 min read

Using annyang javascript library to capture a command, process it and speak the result with the html 5 speech synthesis api.

A few notes

  • this demo works on the desktop and Android versions of Chrome
  • the 'time' is based on the user's system clock

For this test, click Listen and ask "What time is it?" (after clicking "allow" to grant microphone access). Click Stop to stop listening. After a moment, the page should tell you the current time.

Check out the code on GitHub.