Skip to content

Month: March 2014

Mote.io Now Supports Spotify + New Pandora Stations

Published by ianjennings on March 31, 2014

The hackers are at it again! Rutgers student, Waynce Change or @wyc on github put together a Spotify remote! This remote works with the web player.

Now you can search, play, pause, backtrack and skip songs on Spotify Web with your phone. I know one person in particular who’s going to be very happy about this!

Chrome will update the extension to the latest version automatically, but if you need to install it head over to the Chrome Web Store.

That brings us to a total of a dozen remotes! We started with just 6 remotes at launch, and although we’ve both created and lost remotes along the way, the current list of supported sites stands strong!

The full list of remotes include:

  • Vimeo
  • Hype machine
  • Google Play music
  • Grooveshark
  • Youtube
  • Pandora
  • Soundcloud
  • Rdio
  • Tunein radio
  • Twitch.tv
  • Last.fm
  • Spotify web

Remember, you can make your own remote or improve existing ones by contributing to the Mote.io Chrome Extension. Hackers like you are responsible for making the last half dozen remotes.

I’m also excited to announce, a very highly requested feature, the ability to change Pandora stations!

Pandora is the most popular remote by far, and the ability to create new stations is the most common feature request.

Now when you synchronize your phone with the Mote.io extension and Pandora, you’ll get a search bar where you can type the name of an artist to use for a new station. Get the update from the Chrome Web Store.

That’s everything for now! Make sure to follow me or the Mote.io account on Twitter for more updates.

Create a Speech to Text Chat Room with Wit and PubNub

Published by ianjennings on March 21, 2014

Today I’m going to show you how to add Speech to Text functionality to a chat room using Wit. Wit is a natural language processing API, meaning it takes raw audio input and processes it into data developers can use.

This walkthrough is also available via video. Follow along with the instructions below. Additionally, you can check out the full speech to text chat demo here.

Speech To Text Chat

First, we need a chat room.

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

Let’s start with the Chat in 10 lines of lines of code tutorial. I’ve embedded the full example here. You can play around with the chat room by typing a message in the input field and pressing “Enter” or “Return.”

See the Pen PubNub Chat in 10 lines of Code by Ian Jennings (@ianjennings) on CodePen.

When sending your message, a publish action is made on the PubNub network using the PubNub Javascript SDK. All clients that are subscribed to the same channel will receive that message.

Here we take the value from the input box and publish it to our ‘chat’ channel.

Subscribing to the channel is just as easy. Supply the channel name and a function to call when a message is received.

Here we subscribe to the same ‘chat’ channel and append add the text to the chat output when we receive a message.

Now that we’ve got our chat example, let’s add speech to text voice recognition! We’re going to combine Wit’s Microphone example with our chat example.

Note: Microphone relies on WebRTC, which works on Chrome, Firefox and Opera right now. Safari and IE don’t support WebRTC yet.

Follow the directions on the Wit site to set up your Microphone example or skip ahead to the fun part and play with my hosted demo.

speech to text

Press the microphone button then say “send a message” and then your message. You should see the following appear below the microphone icon.

The first result is the parsed intent that you programmed Wit to recognize. The second is the message_body, the parsed message for that intent.

Note, when you use your own API key, you’ll need to train Wit to use your own intents like my “send a message” intent.

Now let’s combine the two demos to create a speech to text chat room!

All we need to do is hook up the mic.onresult results to a PubNub publish. Then, whatever message gets returned by Wit will be published to chat!

speech to text

Check out the full working demo here or browse the source.

There are all sorts of improvements that can be made to this demo. We can support more intents like “who’s here” or show who’s talking by combining more Wit and PubNub features. An expanded demo is coming soon.

Concerned siblings

Published by ianjennings on March 21, 2014

Because margins collapse, the elements need not be concerned with their siblings.

Whenever you work with CSS, it is important that the properties and values you assign to a class are only relevant to that specific class and never in relation to a sibling.

For example you never want to add more margin-top to an element because it is “too close to the header.” The correct approach would be to add more margin-bottom to the header.

Character Development

Published by ianjennings on March 17, 2014

A couple months ago I made a spreadsheet called “Friends.”

I listed all the people I wanted to spend time and put them in a spreadsheet. I still feel dirty about it.

image

The truth is, it solved a problem that was becoming a larger and larger issue for me last year. My friends were becoming a victim of my inability to keep up with the intense networking system in NY.

To set the stage here, there’s all sorts of funny stuff going on.

  • Personally I’ve been tricked into interviewing for jobs or “wined and dined” in hopes I would be willing to pick up a contract gig at a cheap price.
  • A friend recently told me that he couldn’t trust the advice of a mentor because he didn’t know if he was using him to orchestrate his uprising as an industry figure.
  • Another friend who is more interested in the food he’s eating than the people he meets, but feels it’s his responsibility to continue networking.
  • I’ve been given advice “do this favor” so that this person owes you something in return.

Personally I’m not interested in playing this game.

Announcing the PubNub Console for Google Chrome

Published by ianjennings on March 13, 2014

Our goal at PubNub to make it as easy as possible to start developing realtime apps. Today we are happy to announce the first release of the PubNub Console for Google Chrome.

The PubNub Console is a Google Chrome extension. Once installed, it adds an additional tab especially for PubNub in Google Chrome’s developer tools. You can learn more about developer tools, including how to open the multi-tabbed window with Chrome DevTools for Google Developers.

Want to see it in action and learn more? Check out the video below:

The extension monitors PubNub traffic on the page you are inspecting. Whenever the page publishes or receives a message it shows up in the console for that channel.

PubNubConsoleChrome2

Channel tabs are added to the menu on the left when messages are published or subscribed to on the page. You can click on a channel to filter PubNub traffic for that specific channel.

It includes a few special features that makes it easy to develop with realtime messages from protocols like Websockets when using the PubNub JavaScript SDK:

  • All output is JSON formatted and color coded for improved dev & debugging happiness.
  • Channel output can be cleared by clicking “Clear Output” so you can reset the screen and start fresh.
  • If Storage & Playback is enabled on your PubNub account, you can load the previous two minutes of messages in a channel by clicking “Previous 2 minutes.” You can continue clicking this to go back in time.  The next release will add some additional timespan options for more control of stored messages.
  • Data persists through navigation so you can refresh the page to see every message PubNub generates.

Additional Chrome WebSocket Tools

If you need a more detailed view of what’s happening behind the scenes, all raw PubNub traffic is available for inspection through the “Network” tab. There is quite a lot of noise here which is why we were inspired to build the new PubNub Chrome Console for you.

PubNubChromeConsole4

If you would like to publish data to a PubNub stream, make presence calls, or experiment with PAM or SSL the PubNub Developer Console offers a fully featured way to interact with PubNub channels.

PubNubDevConsole PubNubChromeConsoleRound

Be sure to tweet @sw1tch or @PubNub with feedback and feature requests for the PubNub Console for Google Chrome. Stay tuned because we are already working on the next feature upgrades to the PubNub Console for Chrome Developers!