ビジュアライザにrequestAnimationFrameを使う

joker1007 · Jul 15, 2014 · bd68902 · bd68902
1 parent 25c3c04
commit bd68902
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 26 deletions.
diff --git a/app/assets/javascripts/backbone/models/recorder.js.coffee b/app/assets/javascripts/backbone/models/recorder.js.coffee
@@ -98,28 +98,16 @@ Seirenes.module "Models", (Models, App, Backbone, Marionette, $, _) ->
       @video.currentTime = 0
       @video.play()
 
-      musicLevelCanvasView = new App.Views.MusicLevelCanvasView(canvas: document.getElementById("music-level"), analyzer: musicAnalyser)
-      micLevelCanvasView = new App.Views.MicLevelCanvasView(canvas: document.getElementById("mic-level"), analyzer: micAnalyser)
+      @musicLevelCanvasView = new App.Views.MusicLevelCanvasView(canvas: document.getElementById("music-level"), analyzer: musicAnalyser)
+      @micLevelCanvasView = new App.Views.MicLevelCanvasView(canvas: document.getElementById("mic-level"), analyzer: micAnalyser)
 
-      musicSpectrumCanvas = document.getElementById("music-spectrum")
-      musicSpectrum = new Models.Spectrum()
-      musicSpectrum.setChartImage("/assets/spectrum-music.png")
-      micSpectrumCanvas = document.getElementById("mic-spectrum")
-      micSpectrum = new Models.Spectrum()
-      micSpectrum.setChartImage("/assets/spectrum-mic.png")
+      @musicSpectrumCanvasView = new App.Views.SpectrumCanvasView(canvas: document.getElementById("music-spectrum"), analyzer: musicAnalyser, imagePath: "/assets/spectrum-music.png")
+      @micSpectrumCanvasView = new App.Views.SpectrumCanvasView(canvas: document.getElementById("mic-spectrum"), analyzer: micAnalyser, imagePath: "/assets/spectrum-mic.png")
 
-      musicLevelCanvasView.start()
-      micLevelCanvasView.start()
-
-      @timer = setInterval ->
-        musicFreq = new Uint8Array(musicAnalyser.frequencyBinCount)
-        micFreq = new Uint8Array(micAnalyser.frequencyBinCount)
-        musicAnalyser.getByteFrequencyData(musicFreq)
-        micAnalyser.getByteFrequencyData(micFreq)
-
-        musicSpectrum.draw(musicSpectrumCanvas, musicFreq)
-        micSpectrum.draw(micSpectrumCanvas, micFreq)
-      , 50
+      @musicLevelCanvasView.start()
+      @micLevelCanvasView.start()
+      @musicSpectrumCanvasView.start()
+      @micSpectrumCanvasView.start()
 
     captureFail: (s) ->
       alert("マイクが利用できません")
@@ -128,6 +116,10 @@ Seirenes.module "Models", (Models, App, Backbone, Marionette, $, _) ->
       @video.pause()
       @video.currentTime = 0
       clearInterval(@timer)
+      @musicLevelCanvasView.stop()
+      @micLevelCanvasView.stop()
+      @musicSpectrumCanvasView.stop()
+      @micSpectrumCanvasView.stop()
       @recorder.stop()
       @micStream.stop()
       @recorder.exportWAV (blob) =>

diff --git a/app/assets/javascripts/backbone/views/level_canvas_view.js.coffee b/app/assets/javascripts/backbone/views/level_canvas_view.js.coffee
@@ -22,16 +22,13 @@ Seirenes.module "Views", (Views, App, Backbone, Marionette, $, _) ->
     grad: ->
 
     start: ->
-      @updateCanvas()
+      @analyzer.getByteTimeDomainData(@buffer)
+      @renderSignal(@buffer[0])
+      @req = requestAnimationFrame(_.bind(@start, @))
 
     stop: ->
       cancelAnimationFrame(@req)
 
-    updateCanvas: ->
-      @analyzer.getByteTimeDomainData(@buffer)
-      @renderSignal(@buffer[0])
-      @req = requestAnimationFrame(_.bind(@updateCanvas, @))
-
     renderInit: ->
       @ctx.beginPath()
       @ctx.moveTo(0, @HEIGHT / 2)

diff --git a/app/assets/javascripts/backbone/views/spectrum_canvas_view.js.coffee b/app/assets/javascripts/backbone/views/spectrum_canvas_view.js.coffee
@@ -0,0 +1,30 @@
+#= require ../app
+
+Seirenes.module "Views", (Views, App, Backbone, Marionette, $, _) ->
+  Views.SpectrumCanvasView = Marionette.View.extend
+    WIDTH: 512
+    HEIGHT: 256
+    BAR_WIDTH: 3
+
+    initialize:(canvas: @canvas, analyzer: @analyzer, imagePath: imagePath) ->
+      @buffer = new Uint8Array(@analyzer.frequencyBinCount)
+      @ctx = @canvas.getContext("2d")
+      @image = new Image()
+      @image.src = imagePath
+
+    start: ->
+      @ctx.clearRect(0, 0, @canvas.width, @canvas.height)
+      @analyzer.getByteFrequencyData(@buffer)
+      len = @buffer.length
+      for i in [0..len-1]
+        x = (i / len) * @canvas.width
+        y = (1 - (@buffer[i] / 255)) * @canvas.height
+        @ctx.drawImage(
+          @image,
+          0, y, @BAR_WIDTH, @canvas.height - y,
+          x, y, @BAR_WIDTH, @canvas.height - y,
+        )
+      @req = requestAnimationFrame(_.bind(@start, @))
+
+    stop: ->
+      cancelAnimationFrame(@req)