A Shiny app based on annyang that responds to voice input

README.md

See https://yihui.shinyapps.io/voice for the live demo. Make sure you have turned on your microphone and allow the web browser to have access to it. Credits go to annyang and also to @wch for showing me a minimal Shiny example. You can do four things on the scatterplot using your voice input:

• say "title something" to change the plot title, e.g. title good morning
• say "color a color name" to change the color, e.g. color blue
• say "bigger" or "smaller" to change the size of points
• say "regression" to add a linear regression line

app.R

library(shiny)
shinyApp(
  ui = fluidPage(
    singleton(tags$head(
      tags$script(src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.4.0/annyang.min.js"),
      includeScript('init.js')
    )),
    div(
      style = 'display: block; margin: auto; width: 100%; max-width: 500px',
      plotOutput('foo'),
      helpText(
        'You are recommended to use Google Chrome to play with this app.',
        'To change the title, say something that starts with "title", e.g.',
        '"title I love the R language", or "title Good Morning".',
        'To change the color of points, say something that starts with "color",',
        'e.g. color "blue", or color "green". When the app is unable to recognize the color,',
        'the points will turn gray.',
        'To add a regression line, say "regression".',
        'To make the points bigger or smaller, say "bigger" or "smaller".'
      ),
      helpText(HTML(
        'The source code of this app is <a href="https://gist.github.com/yihui/8556ec9ef5572885c176">on Github</a>.',
        'You may also see <a href="http://vimeo.com/yihui/shiny-voice">my demo</a> of playing with this app.'
      ))
    )
  ),
  server = function(input, output) {
    lm_line = reactive({
      input$yes
      fit = lm(dist ~ speed, data = cars)
      lines(cars$speed, predict(fit, cars), lwd = 2)
    })
    output$foo = renderPlot({
      col = input$color
      if (length(col) == 0 || !(col %in% colors())) col = 'gray'
      plot(cars, main = input$title, col = col, cex = input$bigger, pch = 19)
      lm_line()
    })
  }
)

init.js

var initVoice = function() {
if (annyang) {
  var bigger = 1;
  Shiny.onInputChange('title', 'say title something');
  Shiny.onInputChange('color', 'black');
  Shiny.onInputChange('bigger', 1);
  Shiny.onInputChange('yes', 'no');
  var commands = {
    'title *title': function(title) {
      Shiny.onInputChange('title', title);
    },
    'color :color': function(color) {
      Shiny.onInputChange('color', color);
    },
    'bigger': function() {
      bigger += 1;
      Shiny.onInputChange('bigger', bigger);
    },
    'smaller': function() {
      if (bigger >= 1.5) {
        bigger -= 1;
        Shiny.onInputChange('bigger', bigger);
      }
    },
    'regression': function() {
      Shiny.onInputChange('yes', Math.random());
    }
  };
  annyang.addCommands(commands);
  annyang.start();
  }
};

$(function() {
  setTimeout(initVoice, 10);
});