3 files changed, 32 insertions, 5 deletions
diff --git a/app/client/live/player.js b/app/client/live/player.js
index d4831e2..3fd33e8 100644
--- a/app/client/live/player.js
+++ b/app/client/live/player.js
@@ -1,12 +1,19 @@
 import { store } from '../store'
 import Whammy from './whammy'
 import types from '../types'
-import pix2wav from '../audio/pix2wav'
+import * as pix2wav from '../audio/pix2wav'
 
 let fps = 0, last_frame
-let recording = false, saving = false
+let recording = false, saving = false, synthesizing = false
 let videoWriter
 
+export function startSynthesizing(){
+  synthesizing = true
+}
+export function stopSynthesizing(){
+  synthesizing = false
+}
+
 export function startRecording(){
   videoWriter = new Whammy.Video(10)
   recording = true
@@ -46,6 +53,10 @@ export function onFrame (data) {
     URL.revokeObjectURL(url)
     const ctx = canvas.getContext('2d-lodpi')
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    if (synthesizing) {
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      pix2wav.play({ imageData })
+    }
     if (recording) {
       console.log('record frame')
       videoWriter.add(canvas)
diff --git a/app/client/modules/pix2wav/pix2wav.tasks.js b/app/client/modules/pix2wav/pix2wav.tasks.js
index 95c26f2..b273346 100644
--- a/app/client/modules/pix2wav/pix2wav.tasks.js
+++ b/app/client/modules/pix2wav/pix2wav.tasks.js
@@ -12,7 +12,7 @@ export const live_task = (sequence, checkpoint) => dispatch => {
     dataset: sequence,
     checkpoint,
     opt: {
-      poll_delay: 1.0,
+      poll_delay: 0.2,
     }
   }
   console.log(task)
diff --git a/app/client/modules/pix2wav/views/pix2wav.live.js b/app/client/modules/pix2wav/views/pix2wav.live.js
index 551bcda..bc34356 100644
--- a/app/client/modules/pix2wav/views/pix2wav.live.js
+++ b/app/client/modules/pix2wav/views/pix2wav.live.js
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import {
-  ParamGroup, Param, Player,
+  ParamGroup, Param, Player, Group,
   Slider, Select, Button, Loading
 } from '../../../common/'
 
@@ -14,6 +14,8 @@ import * as queueActions from '../../../queue/queue.actions'
 import * as pix2wavTasks from '../pix2wav.tasks'
 import * as pix2wavActions from '../pix2wav.actions'
 
+import * as playerActions from '../../../live/player'
+
 class Pix2WavLive extends Component {
   constructor(props){
     super()
@@ -83,7 +85,21 @@ class Pix2WavLive extends Component {
     // console.log('sequence', this.props.opt)
     return (
       <div className='app pix2wav centered'>
-        <Player width={256} height={256} />
+        <div className='row'>
+          <div className='column'>
+            <Player width={256} height={256} />
+          </div>
+          <div className='params column audioParams'>
+            <Group title='Audio playback'>
+              <Button title='Start playback'
+                onClick={() => playerActions.startSynthesizing()}
+              >Start</Button>
+              <Button title='Stop playback'
+                onClick={() => playerActions.stopSynthesizing()}
+              >Stop</Button>
+            </Group>
+          </div>
+        </div>
         <div className='params row'>
           <div className='column'>
             <ParamGroup