Merge pull request katspaugh#424 from thijstriemstra/master

Fixes for katspaugh#422 and katspaugh#306
maxehnert · Apr 1, 2015 · 560798c · 560798c
2 parents 33704ac + 0979564
commit 560798c
Show file tree

Hide file tree

Showing 15 changed files with 52 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ Interactive navigable audio visualization using
 [Web Audio](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)
 and Canvas.
 
-![Screenshot](/example/screenshot.png?raw=true "Screenshot")
+![Screenshot](example/screenshot.png?raw=true "Screenshot")
 
 ### Browser support
 wavesurfer.js works only in modern browsers supporting Web Audio
@@ -15,8 +15,6 @@ graphics).  You can also try
 [wavesurfer.swf](https://github.com/laurentvd/wavesurfer.swf) which is
 a Flash-based fallback with graphics.
 
-
-
 ### API in examples
 
 Create an instance:
@@ -51,6 +49,10 @@ wavesurfer.load('example/media/demo.wav');
 
 See the example code [here](/example/main.js).
 
+For a list of other projects using wavesurfer.js, check out
+[the wiki](https://github.com/katspaugh/wavesurfer.js/wiki/Projects)
+where you can also add your own project.
+
 ### WaveSurfer Options
 
 | option | type | default | description |
@@ -194,6 +196,33 @@ General events:
  * `over` - When mouse moves over the region.  Callback will receive a `MouseEvent`.
  * `leave` - When mouse leaves the region.  Callback will receive a `MouseEvent`.
 
+# Development
+
+[![npm version](https://img.shields.io/npm/v/wavesurfer.js.svg?style=flat)](https://www.npmjs.com/package/wavesurfer.js)
+[![npm](https://img.shields.io/npm/dm/wavesurfer.js.svg)]()
+[![Build Status](https://travis-ci.org/katspaugh/wavesurfer.js.svg?branch=master)](https://travis-ci.org/katspaugh/wavesurfer.js)
+
+Install `grunt-cli` using npm:
+
+```
+npm install -g grunt-cli
+```
+
+Install development dependencies:
+
+```
+npm install
+```
+
+Build a minified version of the library and plugins. This command also checks
+for code-style mistakes:
+
+```
+grunt
+```
+
+Generated files are placed in the `dist` directory.
+
 # Credits
 
 Initial idea by [Alex Khokhulin](https://github.com/xoxulin). Many

diff --git a/example/annotation/index.html b/example/annotation/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/audio-element/index.html b/example/audio-element/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/elan/index.html b/example/elan/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/equalizer/index.html b/example/equalizer/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/microphone/index.html b/example/microphone/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/panner/index.html b/example/panner/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/playlist/index.html b/example/playlist/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/spectrogram/app.js b/example/spectrogram/app.js
@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', function () {
     }());
 
     wavesurfer.on('ready', function () {
-        // Init Timeline plugin
+        // Init spectrogram plugin
         var spectrogram = Object.create(WaveSurfer.Spectrogram);
 
         spectrogram.init({

diff --git a/example/spectrogram/index.html b/example/spectrogram/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />
@@ -97,7 +97,7 @@ <h4>Quick Start</h4>
     });
 });
 
-wavesurfer.load('example/media/demo.mp3');</code></pre>
+wavesurfer.load('example/media/demo.wav');</code></pre>
                     </p></noindex>
 
                     <br />

diff --git a/example/split-channels/index.html b/example/split-channels/index.html
@@ -2,12 +2,12 @@
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-        <title>wavesurfer.js | Media Element Example</title>
+        <title>wavesurfer.js | Split Channel Example</title>
 
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/example/timeline/index.html b/example/timeline/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="../css/style.css" />
         <link rel="stylesheet" href="../css/ribbon.css" />

diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
         <link href="data:image/gif;" rel="icon" type="image/x-icon" />
 
         <!-- Bootstrap -->
-        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
+        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 
         <link rel="stylesheet" href="example/css/style.css" />
         <link rel="stylesheet" href="example/css/ribbon.css" />
@@ -88,7 +88,7 @@ <h1 itemprop="name">wavesurfer.js</h1>
                 <div class="col-lg-6">
                     <h4>Web Audio Waveform Visualizer</h4>
 
-                    <p itemprop="about">Customizable waveform audio visualization built on top of Web Audio API and HTML5 Canvas. With <strong>wavesurfer.js</strong> you can create a cute <a href="https://www.toytalk.com/editors-picks/">HTML5 audio player</a> or <a href="http://moduscreate.com/touch-dj-a-sencha-touch-dj-app/">a sophisticated DJ application</a>.</p>
+                    <p itemprop="about">Customizable waveform audio visualization built on top of Web Audio API and HTML5 Canvas. With <strong>wavesurfer.js</strong> you can create anything from an HTML5 audio player to a sophisticated DJ application. For a list of other projects using wavesurfer.js, check out <a href="https://github.com/katspaugh/wavesurfer.js/wiki/Projects">the wiki</a> where you can also add your own project.</p>
 
                     <h4>Compatibility</h4>
 
@@ -97,7 +97,7 @@ <h4>Compatibility</h4>
                     <h4>Download</h4>
 
                     <p>
-                        <a class="btn btn-large btn-success" href="dist/wavesurfer.min.js" itemprop="downloadUrl">Download <strong>wavesurfer.min.js</strong> (18 KB)</a>
+                        <a class="btn btn-large btn-success" href="dist/wavesurfer.min.js" itemprop="downloadUrl">Download <strong>wavesurfer.min.js</strong> (20 KB)</a>
                     </p>
                 </div>
 
@@ -122,7 +122,7 @@ <h4>Quick Start</h4>
 
                     <h4>Documentation</h4>
 
-                    <p>The full list of options and methods can be found in <a href="https://github.com/katspaugh/wavesurfer.js/blob/master/README.md">README</a>.</p>
+                    <p>The full list of options and methods can be found in the <a href="https://github.com/katspaugh/wavesurfer.js/blob/master/README.md">README</a> file.</p>
                 </div>
             </div>
 

diff --git a/src/drawer.canvas.js b/src/drawer.canvas.js
@@ -22,6 +22,7 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.Canvas, {
                 bottom: 0,
                 overflow: 'hidden',
                 width: '0',
+                display: 'none',
                 boxSizing: 'border-box',
                 borderRightStyle: 'solid',
                 borderRightWidth: this.params.cursorWidth + 'px',
@@ -44,6 +45,8 @@ WaveSurfer.util.extend(WaveSurfer.Drawer.Canvas, {
         this.waveCc.canvas.height = this.height;
         this.style(this.waveCc.canvas, { width: width + 'px'});
 
+        this.style(this.progressWave, { display: 'block'});
+
         if (this.progressCc) {
             this.progressCc.canvas.width = this.width;
             this.progressCc.canvas.height = this.height;

diff --git a/src/drawer.js b/src/drawer.js
@@ -108,7 +108,6 @@ WaveSurfer.Drawer = {
 
         // if the cursor is currently visible...
         if (!immediate && -half <= offset && offset < half) {
-            // we'll limit the "re-center" rate.
             // we'll limit the "re-center" rate.
             var rate = 5;
             offset = Math.max(-rate, Math.min(rate, offset));