Choo Weekly 49/17: Networking, Audio Playback & Speech Synthesis

Writing to you from Japan

Surprise! Another Choo weekly 🎉. This edition is brought to you from Tokyo, Japan.

This time around we’re highlighting some great modules created by Yerko Palma. We’ll be talking about browser networking, speech synthesis & audio playback. Oh, and more docs! Strap in, and let’s go!

If this is your first time you’re hearing about Choo: we’re the tiny frontend framework you’ve always wanted to use. True story. Check out create-choo-app to have your first application working 5 minutes from now.

Documentation

The first few pieces of documentation have been written! We got:

• Views — Everything on how to render to the DOM.
• Stores — Dive deep into Choo’s data abstraction.
• Routing —Straight forward routing for projects of any size (wip).

Now that the basic guides are done, we can start work on some of the more in-depth ones. At the top of our list are Forms, with Data Management coming in as a close second. Components are a high priority too, but we have to land a patch before we can start expanding on how to use it properly. Stay tuned!

Networking

Most web apps talk to servers. And by doing to so they require to use the network.

YerkoPalma/choo-sse

YerkoPalma/choo-websocket

Sound in the browser

Not all websites make use of sound — and that’s probably a good thing. It can be hard to get things right at times. But when done carefully, adding sound can be a great way to enrich a site’s experience.

Some sites are entirely based around playing audio. For example soundcloud.com and audiograph.xyz.

Thanks to choo-audio, playing audio with Choo is not hard either:

var choo = require('choo')
var app = choo()
app.use(require('choo-audio')())
app.use((state, emitter) => {
  emitter.emit('audio:load', '/assets/music.wav')
  emitter.emit('audio:play')
  setTimeout(emitter.emit, 1000, 'audio:pause')
})

YerkoPalma/choo-audio

Speech Synthesis and Voice Recognition

designbetter.co recently created a rich series of articles recently, bundled together to form an online library. Not only is the site brimming with illustrations & animations — each chapter is available as an audiobook too.

Press “listen to chapter” to turn the site into an audio book

However, not everyone is in a position to have professional voice actors read out their work. Luckily thanks to advances such as Google’s WaveNet paper speech, synthesis is becoming a lot better (check it out, the demos are seriously cool!).

And as audio synthesis technology advances, so will the implementations that power browser APIs. You can use the speech APIs with Choo, today:

var choo = require('choo')
var app = choo()
app.use(require('choo-tts')())
app.use(require('choo-stt')())
app.use((state, emitter) => {
  emit('stt:start')
  emit('tts:speak', 'I'm listening!')
  emitter.on('stt:result', (res) => {
    emit('tts:speak', res)
  })
})

YerkoPalma/choo-stt

YerkoPalma/choo-tts

Wrapping up

Thanks all for making it this far. There won’t be a Choo Weekly next week, but we’ll be back the week after. We hope you enjoyed reading up about some of the cool third party modules we have in our ecosystem. Perhaps even enough to take them for a spin? We definitely hope so!

It was good catching up again. Happy hacking!

If you’re working on something cool using Choo, let us know on @4kilobytes or Freenode#choo ✌️.