Skip to content
Browse files

bug fixes and typos

  • Loading branch information...
1 parent 77de019 commit 4bbcebdc0081e12e956be15cfbfa679a5ad10f4d @leegee committed
Showing with 24 additions and 12 deletions.
  1. +8 −6 Demo/index.html
  2. +16 −6 Source/PcmImage.js
View
14 Demo/index.html
@@ -97,12 +97,12 @@
<p>
As the sound is played, the graph changes colour to that
- set in <code>(data-)overlayclr<code>.
+ set in <code>(data-)overlayclr</code>.
</p>
<p>
The ability to play a sound can be disabled
- by setting <code>(data-)playable<code> to a false value.
+ by setting <code>(data-)playable</code> to a false value.
</p>
<p>
@@ -129,7 +129,7 @@
data-step='128'
></div>
</figure>
--->
+-->
<figure>
<figcaption>
@@ -161,7 +161,7 @@
<div id='soundtest4'
data-uri='pluck.wav'
class='pcmimg'
- style='width:500;height:500;background:steelblue'
+ style='position:relative;idth:100%;height:500;background:steelblue'
></div>
</figure>
@@ -193,18 +193,20 @@
</figure>
<figure>
- <figcaption>HTML with <code>data-step=256</code></figcaption>
+ <figcaption>HTML with <code>data-step=256</code> and
+ <code>data-strokestyle='green'</code>.</figcaption>
<div id='soundtest6'
class='pcmimg'
data-uri='pluck.wav'
data-step='256'
+ data-strokestyle='green'
></div>
</figure>
<figure>
<figcaption>HTML with <code>data-step=64</code> and a steelblue overlay, width of 1200px.</figcaption>
<div id='soundtest6'
- style='width:1200px'
+ style='width:1200px;background:#ddd;color:green'
class='pcmimg'
data-uri='pluck.wav'
data-step='64'
View
22 Source/PcmImage.js
@@ -83,7 +83,7 @@ var PcmImage = new Class({
this.options.background = this.options.background
|| this.element.getStyle('backgroundColor');
this.options.strokestyle = this.options.strokestyle || this.element.getStyle('color');
-
+
if (actx)
this.actx = actx;
else if (typeof AudioContext == "function")
@@ -94,12 +94,13 @@ var PcmImage = new Class({
if (this.options.playable){
// Convert colors to standard format to allow names and shorthand hex:
- var c = new Element('div',{styles:{color:this.options.overlayclr}}).getStyle('color')
+ var c = new Element('div',{styles:{color:this.options.overlayclr}}).getStyle('color')
this.overlay = {};
this.overlay.fg = {};
this.overlay.fg.r = parseInt( '0x'+c.substr(1,2) );
this.overlay.fg.g = parseInt( '0x'+c.substr(3,2) );
this.overlay.fg.b = parseInt( '0x'+c.substr(5,2) );
+ console.log( this.overlay);
}
if (this.options.asimg
@@ -193,10 +194,12 @@ var PcmImage = new Class({
var cd = [];
this.cctx.beginPath();
- this.cctx.strokestyle = this.options.strokestyle;
- this.cctx.linewidth = this.options.linewidth;
- this.cctx.moveTo( 0, this.height/2);
+ this.cctx.strokeStyle = this.options.strokestyle;
+ this.cctx.lineWidth = this.options.linewidth;
+ // XXX TODO UGLY HACK!
+ this.cctx.moveTo( 0, this.height/1.9);
+
for (var c=0; c < this.buffer.numberOfChannels; c++)
cd[c] = this.buffer.getChannelData( c );
@@ -288,10 +291,17 @@ var PcmImage = new Class({
);
this.overlayInterval = 50; // quater second update
- var overlaySteps = ((this.buffer.duration*1000) / this.overlayInterval )-1;
+ var overlaySteps = ((this.buffer.duration*1000) / this.overlayInterval );
this.overlay.inc = this.width / overlaySteps;
this.overlay.lastX = this.overlay.inc * -1;
this.overlay.thisX = 0;
+
+ this.overlay.inc /= 1.8; // nearly
+
+ console.log( this.width );
+ console.log( this.buffer.duration * 1000);
+ console.log( this.overlay.inc * this.overlayInterval);
+
this.renderTimer = this.overlayImg.periodical(
this.overlayInterval,
this

0 comments on commit 4bbcebd

Please sign in to comment.
Something went wrong with that request. Please try again.