From aaa54a2ff9ce568f7871c13b6791fc38ff744154 Mon Sep 17 00:00:00 2001
From: Martin Spencer
Date: Wed, 23 Nov 2016 11:06:25 +0100
Subject: [PATCH 001/573] Es6 (#863)
* added .editorconfig
* babel and webpack configuration
* updating dependencies for webpack and babel, removed grunt, updated scripts property
* moved plugins file to src directory
* refactored utils as es6 modules
* removed use strict statement
* import backends and drawers as es6 modules and cache them in the wavesurfer constructor object
* es6 imports and exports
* Removed AudioElement backward compatibility
* updated karma to run with webpack
* added plugin system to the core library
* moved the style function to the util library, backward compatibility reference
* updated references to assets in the example html
* removed Gruntfile.js
* plugin boilerplate for cursor, elan, microphone, minimap and timeline plugins
* formatting for cursor, elan, microphone, minimap and timeline plugins
* caching of even handlers in cursor plugin, added destroy method
* added drawer-created and backend-created events to the core module
* minimap destroy function, onCreatedDrawer callback for correct timing
* replaced tabs with spaces in elan and minimap plugins
* timeline _onReady and _onRedraw event callbacks for correct timing
* cursor _onDrawerCreated for correct timing
* microphone _onBackendCreated callback for correct timing
* region plugin: moving Region definition above the Regions definition
* region plugin: adding boilerplate code, moving static methods into the proper object
* region plugin: updated variable references
* region plugin: formatting and indentation
* region plugin: _onCreatedBackend calllback for proper timing, updated variable references
* spectrogram plugin: move FFT definition to the top
* plugin methods in the core library return this so we can use chaining
* minimap plugin: rename created-drawer event to drawer-created event
* cursor plugin: fixed wrong reference to wavesurfer drawer
* elan plugin: added extends observer property
* spectrogram plugin: added plugin boilerplate
* spectrogram plugin: indentation
* wavesurfer init function returns this to support chaining
* elan plugin: added destroy function
* spectrogram plugin: added _onReady callback for proper timing, fixed linting issues, updated remaining wrong variable references
* .eslint config
* replaced initRegions with generic initPlugin('regions') in regions plugin
* microphone extends observer
* update public-facing (in html) example code with new api
* update example code with new api
* added cursor plugin example
* update public-facing (in html) example code with new api
* added plugin system example
* region plugin: uses ready event as init event, wavesurfer.enableDragSelection does not reset region plugin
* comments in core module
* removed webpack-dev-server --env.plugins script
* umdNamedDefine property in webpack babel, so amd modules are named
* updated editorconfig for 4 spaces indentation
* updated .travis.yml to use the new build system
* annotation example, removed legacy js code
* removed debugging statement and empty variable definition
* microphone plugin: removed wrong static function
* uniform indentation with 4 spaces
* Updated download links on the example pages, added download attribute to link, fixed wrong download url on microphone page
* tests for the plugin api
* added jasmine core, missing dev dependency
* test index now just calls all files with .spec.js in that dir
* added node_js version in .travis.yml
* tests files are queried from karma.config.js manually, not by requiring them dynamically from an index.js
* downloading fresh chrome browser before travis testing
* removed chrome installing in travis config, only node v 4.2
* removed invalid outputPath option from webpack config
---
.babelrc | 13 +
.editorconfig | 11 +
.eslintrc.js | 256 ++
.travis.yml | 9 +-
Gruntfile.js | 164 -
example/angular-material/index.html | 2 +-
example/angular/index.html | 2 +-
example/annotation/app.js | 46 +-
example/annotation/index.html | 8 +-
example/audio-element/index.html | 8 +-
example/cursor/index.html | 106 +
example/cursor/main.js | 25 +
example/elan/app.js | 39 +-
example/elan/index.html | 6 +-
example/equalizer/index.html | 2 +-
example/equalizer/main.js | 2 +-
example/microphone/app.js | 33 +-
example/microphone/index.html | 44 +-
example/mute/index.html | 2 +-
example/panner/index.html | 6 +-
example/playlist/index.html | 2 +-
example/plugin-system/app.js | 116 +
example/plugin-system/index.html | 188 ++
example/plugin-system/transcripts/001z.mp3 | Bin 0 -> 352154 bytes
example/plugin-system/transcripts/001z.xml | 2866 +++++++++++++++++
example/regions/app.js | 46 +-
example/regions/index.html | 41 +-
example/spectrogram/app.js | 27 +-
example/spectrogram/index.html | 27 +-
example/split-channels/index.html | 4 +-
example/timeline/app.js | 26 +-
example/timeline/index.html | 33 +-
example/video-element/index.html | 19 +-
example/video-element/main.js | 4 +-
example/zoom/index.html | 8 +-
karma.conf.js | 21 +-
package.json | 35 +-
plugin/wavesurfer.cursor.js | 62 -
plugin/wavesurfer.elan.js | 252 --
plugin/wavesurfer.microphone.js | 312 --
plugin/wavesurfer.minimap.js | 213 --
plugin/wavesurfer.spectrogram.js | 435 ---
plugin/wavesurfer.timeline.js | 281 --
spec/plugin-api.spec.js | 102 +
spec/util.spec.js | 2 +
spec/wavesurfer.spec.js | 2 +
src/drawer.canvas.js | 13 +-
src/drawer.js | 18 +-
src/drawer.multicanvas.js | 12 +-
src/mediaelement.js | 12 +-
src/plugin/cursor.js | 82 +
src/plugin/elan.js | 266 ++
src/plugin/microphone.js | 321 ++
src/plugin/minimap.js | 239 ++
.../plugin/regions.js | 323 +-
src/plugin/spectrogram.js | 452 +++
src/plugin/timeline.js | 297 ++
src/util.js | 152 -
src/util/ajax.js | 39 +
src/util/extend.js | 16 +
src/util/get-id.js | 8 +
src/util/index.js | 7 +
src/util/max.js | 15 +
src/util/min.js | 15 +
src/util/observer.js | 73 +
src/util/style.js | 16 +
src/wavesurfer.js | 171 +-
src/webaudio.js | 34 +-
webpack.config.babel.js | 152 +
69 files changed, 6298 insertions(+), 2343 deletions(-)
create mode 100644 .babelrc
create mode 100644 .editorconfig
create mode 100644 .eslintrc.js
delete mode 100644 Gruntfile.js
create mode 100644 example/cursor/index.html
create mode 100644 example/cursor/main.js
create mode 100644 example/plugin-system/app.js
create mode 100644 example/plugin-system/index.html
create mode 100644 example/plugin-system/transcripts/001z.mp3
create mode 100644 example/plugin-system/transcripts/001z.xml
delete mode 100755 plugin/wavesurfer.cursor.js
delete mode 100644 plugin/wavesurfer.elan.js
delete mode 100644 plugin/wavesurfer.microphone.js
delete mode 100644 plugin/wavesurfer.minimap.js
delete mode 100644 plugin/wavesurfer.spectrogram.js
delete mode 100644 plugin/wavesurfer.timeline.js
create mode 100644 spec/plugin-api.spec.js
create mode 100644 src/plugin/cursor.js
create mode 100644 src/plugin/elan.js
create mode 100644 src/plugin/microphone.js
create mode 100644 src/plugin/minimap.js
rename plugin/wavesurfer.regions.js => src/plugin/regions.js (64%)
mode change 100755 => 100644
create mode 100644 src/plugin/spectrogram.js
create mode 100644 src/plugin/timeline.js
delete mode 100644 src/util.js
create mode 100644 src/util/ajax.js
create mode 100644 src/util/extend.js
create mode 100644 src/util/get-id.js
create mode 100644 src/util/index.js
create mode 100644 src/util/max.js
create mode 100644 src/util/min.js
create mode 100644 src/util/observer.js
create mode 100644 src/util/style.js
create mode 100644 webpack.config.babel.js
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..6ba8347a5
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,13 @@
+{
+ "presets": [
+ ["es2015"]
+ ],
+ "plugins": [
+ "add-module-exports"
+ ],
+ "env": {
+ "test": {
+ "plugins": [ "istanbul" ]
+ }
+ }
+}
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..48a18f15f
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,11 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..fec02b541
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,256 @@
+module.exports = {
+ "env": {
+ "browser": true,
+ "commonjs": true,
+ "es6": true
+ },
+ "extends": "eslint:recommended",
+ "parserOptions": {
+ "sourceType": "module"
+ },
+ "rules": {
+ "accessor-pairs": "error",
+ "array-bracket-spacing": "off",
+ "array-callback-return": "error",
+ "arrow-body-style": "error",
+ "arrow-parens": "off",
+ "arrow-spacing": [
+ "error",
+ {
+ "after": true,
+ "before": true
+ }
+ ],
+ "block-scoped-var": "off",
+ "block-spacing": [
+ "error",
+ "always"
+ ],
+ "brace-style": [
+ "error",
+ "1tbs",
+ {
+ "allowSingleLine": true
+ }
+ ],
+ "callback-return": "off",
+ "camelcase": "error",
+ "class-methods-use-this": "error",
+ "comma-dangle": "error",
+ "comma-spacing": [
+ "error",
+ {
+ "after": true,
+ "before": false
+ }
+ ],
+ "comma-style": [
+ "error",
+ "last"
+ ],
+ "complexity": "error",
+ "computed-property-spacing": [
+ "error",
+ "never"
+ ],
+ "consistent-return": "off",
+ "consistent-this": "off",
+ "curly": "error",
+ "default-case": "off",
+ "dot-location": "off",
+ "dot-notation": "error",
+ "eol-last": "error",
+ "eqeqeq": "off",
+ "func-call-spacing": "error",
+ "func-name-matching": "error",
+ "func-names": [
+ "error",
+ "never"
+ ],
+ "func-style": "off",
+ "generator-star-spacing": "error",
+ "global-require": "error",
+ "guard-for-in": "off",
+ "handle-callback-err": "error",
+ "id-blacklist": "error",
+ "id-length": "off",
+ "id-match": "error",
+ "indent": "off",
+ "init-declarations": "off",
+ "jsx-quotes": "error",
+ "key-spacing": "off",
+ "keyword-spacing": [
+ "off",
+ {
+ "after": true,
+ "before": true
+ }
+ ],
+ "line-comment-position": "off",
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "lines-around-comment": "off",
+ "lines-around-directive": "error",
+ "max-depth": "error",
+ "max-len": "off",
+ "max-lines": "off",
+ "max-nested-callbacks": "error",
+ "max-params": "off",
+ "max-statements": "off",
+ "max-statements-per-line": "off",
+ "multiline-ternary": "off",
+ "new-cap": "error",
+ "new-parens": "off",
+ "newline-after-var": "off",
+ "newline-before-return": "off",
+ "newline-per-chained-call": "off",
+ "no-redeclare": "off",
+ "no-unused-vars": "off",
+ "no-console": "off",
+ "no-alert": "error",
+ "no-array-constructor": "error",
+ "no-bitwise": "off",
+ "no-caller": "error",
+ "no-catch-shadow": "error",
+ "no-confusing-arrow": "error",
+ "no-continue": "error",
+ "no-div-regex": "error",
+ "no-duplicate-imports": "error",
+ "no-else-return": "off",
+ "no-empty-function": "off",
+ "no-eq-null": "off",
+ "no-eval": "error",
+ "no-extend-native": "error",
+ "no-extra-bind": "off",
+ "no-extra-label": "error",
+ "no-extra-parens": "off",
+ "no-floating-decimal": "error",
+ "no-implicit-coercion": "off",
+ "no-implicit-globals": "error",
+ "no-implied-eval": "error",
+ "no-inline-comments": "off",
+ "no-inner-declarations": [
+ "error",
+ "functions"
+ ],
+ "no-invalid-this": "off",
+ "no-iterator": "error",
+ "no-label-var": "error",
+ "no-labels": "error",
+ "no-lone-blocks": "error",
+ "no-lonely-if": "error",
+ "no-loop-func": "error",
+ "no-magic-numbers": "off",
+ "no-mixed-operators": "off",
+ "no-mixed-requires": "error",
+ "no-multi-spaces": "off",
+ "no-multi-str": "error",
+ "no-multiple-empty-lines": "off",
+ "no-native-reassign": "error",
+ "no-negated-condition": "off",
+ "no-negated-in-lhs": "error",
+ "no-nested-ternary": "error",
+ "no-new": "error",
+ "no-new-func": "error",
+ "no-new-object": "error",
+ "no-new-require": "error",
+ "no-new-wrappers": "error",
+ "no-octal-escape": "error",
+ "no-param-reassign": "off",
+ "no-path-concat": "error",
+ "no-plusplus": "off",
+ "no-process-env": "error",
+ "no-process-exit": "error",
+ "no-proto": "error",
+ "no-prototype-builtins": "error",
+ "no-restricted-globals": "error",
+ "no-restricted-imports": "error",
+ "no-restricted-modules": "error",
+ "no-restricted-properties": "error",
+ "no-restricted-syntax": "error",
+ "no-return-assign": "error",
+ "no-script-url": "error",
+ "no-self-compare": "error",
+ "no-sequences": "error",
+ "no-shadow": "off",
+ "no-shadow-restricted-names": "error",
+ "no-spaced-func": "error",
+ "no-sync": "error",
+ "no-tabs": "off",
+ "no-template-curly-in-string": "error",
+ "no-ternary": "off",
+ "no-throw-literal": "off",
+ "no-trailing-spaces": "error",
+ "no-undef-init": "error",
+ "no-undefined": "off",
+ "no-underscore-dangle": "off",
+ "no-unmodified-loop-condition": "error",
+ "no-unneeded-ternary": "error",
+ "no-use-before-define": "error",
+ "no-useless-call": "error",
+ "no-useless-computed-key": "error",
+ "no-useless-concat": "error",
+ "no-useless-constructor": "error",
+ "no-useless-escape": "error",
+ "no-useless-rename": "error",
+ "no-useless-return": "error",
+ "no-var": "off",
+ "no-void": "error",
+ "no-warning-comments": "off",
+ "no-whitespace-before-property": "error",
+ "no-with": "error",
+ "object-curly-newline": "off",
+ "object-curly-spacing": "off",
+ "object-property-newline": "off",
+ "object-shorthand": "off",
+ "one-var": "off",
+ "one-var-declaration-per-line": "error",
+ "operator-assignment": "off",
+ "operator-linebreak": "off",
+ "padded-blocks": "off",
+ "prefer-arrow-callback": "off",
+ "prefer-const": "error",
+ "prefer-numeric-literals": "error",
+ "prefer-reflect": "off",
+ "prefer-rest-params": "off",
+ "prefer-spread": "error",
+ "prefer-template": "off",
+ "quote-props": "off",
+ "quotes": [
+ "error",
+ "single"
+ ],
+ "radix": "off",
+ "require-jsdoc": "error",
+ "rest-spread-spacing": "error",
+ "semi": "error",
+ "semi-spacing": "error",
+ "sort-imports": "off",
+ "sort-keys": "off",
+ "sort-vars": "off",
+ "space-before-blocks": "off",
+ "space-before-function-paren": "off",
+ "space-in-parens": [
+ "error",
+ "never"
+ ],
+ "space-infix-ops": "off",
+ "space-unary-ops": "off",
+ "spaced-comment": "off",
+ "strict": "error",
+ "symbol-description": "error",
+ "template-curly-spacing": "error",
+ "unicode-bom": [
+ "error",
+ "never"
+ ],
+ "valid-jsdoc": "off",
+ "vars-on-top": "off",
+ "wrap-iife": "error",
+ "wrap-regex": "error",
+ "yield-star-spacing": "error",
+ "yoda": "off"
+ }
+};
diff --git a/.travis.yml b/.travis.yml
index 93ef71058..4c0e42d22 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,10 +1,13 @@
+sudo: required
+dist: trusty
language: node_js
-sudo: false
+node_js:
+ - "4.2"
before_install:
- - npm install -g grunt-cli
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
install: npm install
script:
- - grunt
+ - npm run test
+ - npm run build
diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644
index e34ff2ecd..000000000
--- a/Gruntfile.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/*global module:false*/
-module.exports = function (grunt) {
- var path = require('path');
-
- // Project configuration.
- grunt.initConfig({
- // Metadata.
- pkg: grunt.file.readJSON('package.json'),
- banner: '/*! <%= pkg.title || pkg.name %> <%= pkg.version %> (<%= new Date().toGMTString() %>)\n' +
- '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
- '* @license <%= pkg.license %> */',
- // Task configuration.
- clean : {
- build: [ 'dist' ]
- },
- concat: {
- options: {
- stripBanners: true
- },
- dist: {
- src: [
- 'src/wavesurfer.js',
- 'src/util.js',
- 'src/webaudio.js',
- 'src/mediaelement.js',
- 'src/drawer.js',
- 'src/drawer.*.js',
- 'src/html-init.js'
- ],
- dest: 'dist/wavesurfer.js'
- }
- },
- connect: {
- options: {
- base: '.',
- port: 9000,
- // Change this to '0.0.0.0' to access the server from outside.
- hostname: 'localhost',
- keepalive: true
- }
- },
- /* The build has three steps:
- - concatenation (wavesurfer.js)
- - UMD wrapping (wavesurfer.js)
- - uglification (wavesurfer.min.js) */
- umd: {
- main: {
- options: {
- src: '<%= concat.dist.dest %>',
- dest: 'dist/wavesurfer.js',
- amdModuleId: 'wavesurfer',
- objectToExport: 'WaveSurfer',
- globalAlias: 'WaveSurfer'
- }
- },
- plugins: {
- src: 'plugin/*.js',
- dest: 'dist',
- deps: {
- 'default': [ 'WaveSurfer' ],
- amd: [ 'wavesurfer' ],
- cjs: [ 'wavesurfer.js' ],
- global: [ 'WaveSurfer' ]
- }
- }
- },
- uglify: {
- options: {
- banner: '<%= banner %>'
- },
- dist: {
- options: {
- sourceMap: 'dist/wavesurfer.min.js.map',
- sourceMapRoot: '/'
- },
- src: '<%= umd.main.options.dest %>',
- dest: 'dist/wavesurfer.min.js'
- },
- plugins: {
- files: [{
- expand: true,
- cwd: 'dist',
- src: 'plugin/*.js',
- dest: 'dist/',
- rename: function (dest, src) {
- if (src.indexOf('.min.js') == -1) {
- return dest + src.replace('.js', '.min.js');
- }
- return dest + src;
- }
- }]
- }
- },
- jshint: {
- options: {
- curly: true,
- eqeqeq: false,
- eqnull: true,
- quotmark: 'single',
- browser: true,
- // Missing "use strict" statement.
- strict: false,
- globals: {
- WaveSurfer: true,
- Promise: true
- }
- },
- ignore_warning: {
- options: {
- '-W004': true,
- // Expected an assignment or function call and instead saw an expression
- '-W030': true,
- // {a} used out of scope
- '-W038': true,
- // Use '!==' to compare with ''
- '-W041': true,
- '-W056': true,
- // Missing '()' invoking a constructor.
- '-W058': true,
- '-W079': true,
- // Use the function form of 'use strict'
- '-W097': true
- },
- src: [ '<%= concat.dist.src %>', 'plugin/*.js', 'spec/*.spec.js' ]
- }
- },
- jscs: {
- src: [ '<%= concat.dist.src %>', 'plugin/*.js', 'spec/*.spec.js' ],
- options: {
- config: '.jscsrc',
- fix: false, // Autofix code style violations when possible.
- requireCurlyBraces: [ 'if' ]
- }
- },
- karma: {
- e2e: {
- configFile: 'karma.conf.js'
- }
- }
- });
-
- // ==========================================================================
- // TASKS
- // ==========================================================================
-
- // These plugins provide necessary tasks.
- grunt.loadNpmTasks('grunt-contrib-concat');
- grunt.loadNpmTasks('grunt-contrib-uglify');
- grunt.loadNpmTasks('grunt-contrib-jshint');
- grunt.loadNpmTasks('grunt-karma');
- grunt.loadNpmTasks('grunt-contrib-connect');
- grunt.loadNpmTasks('grunt-umd');
- grunt.loadNpmTasks('grunt-jscs');
- grunt.loadNpmTasks('grunt-contrib-clean');
-
- // Default task.
- grunt.registerTask('default', [
- 'clean', 'jshint', 'jscs', 'concat', 'umd', 'uglify', 'test'
- ]);
-
- // Dev
- grunt.registerTask('dev', [ 'clean', 'concat', 'uglify', 'jscs', 'connect' ]);
- grunt.registerTask('test', [ 'karma:e2e' ]);
-};
diff --git a/example/angular-material/index.html b/example/angular-material/index.html
index f288f6086..bd7962463 100644
--- a/example/angular-material/index.html
+++ b/example/angular-material/index.html
@@ -15,7 +15,7 @@
-
+
diff --git a/example/angular/index.html b/example/angular/index.html
index a93a81349..045acc781 100644
--- a/example/angular/index.html
+++ b/example/angular/index.html
@@ -17,7 +17,7 @@
-
+
diff --git a/example/annotation/app.js b/example/annotation/app.js
index 01b1c3353..a16f65e09 100644
--- a/example/annotation/app.js
+++ b/example/annotation/app.js
@@ -1,24 +1,36 @@
/**
* Create a WaveSurfer instance.
*/
-var wavesurfer = Object.create(WaveSurfer);
+var wavesurfer;
/**
* Init & load.
*/
document.addEventListener('DOMContentLoaded', function () {
// Init wavesurfer
- wavesurfer.init({
+ wavesurfer = window.WaveSurfer.create({
container: '#waveform',
height: 100,
pixelRatio: 1,
scrollParent: true,
normalize: true,
minimap: true,
- backend: 'MediaElement'
+ backend: 'MediaElement',
+ plugins: [
+ window.WaveSurfer.regions(),
+ window.WaveSurfer.minimap({
+ height: 30,
+ waveColor: '#ddd',
+ progressColor: '#999',
+ cursorColor: '#999'
+ }),
+ window.WaveSurfer.timeline({
+ container: "#wave-timeline"
+ })
+ ]
});
- wavesurfer.util.ajax({
+ window.WaveSurfer.util.ajax({
responseType: 'json',
url: 'rashomon.json'
}).on('success', function (data) {
@@ -29,11 +41,12 @@ document.addEventListener('DOMContentLoaded', function () {
});
/* Regions */
- wavesurfer.enableDragSelection({
- color: randomColor(0.1)
- });
wavesurfer.on('ready', function () {
+ wavesurfer.enableDragSelection({
+ color: randomColor(0.1)
+ });
+
if (localStorage.regions) {
loadRegions(JSON.parse(localStorage.regions));
} else {
@@ -70,25 +83,6 @@ document.addEventListener('DOMContentLoaded', function () {
});
- /* Minimap plugin */
- wavesurfer.initMinimap({
- height: 30,
- waveColor: '#ddd',
- progressColor: '#999',
- cursorColor: '#999'
- });
-
-
- /* Timeline plugin */
- wavesurfer.on('ready', function () {
- var timeline = Object.create(WaveSurfer.Timeline);
- timeline.init({
- wavesurfer: wavesurfer,
- container: "#wave-timeline"
- });
- });
-
-
/* Toggle play/pause buttons. */
var playButton = document.querySelector('#play');
var pauseButton = document.querySelector('#pause');
diff --git a/example/annotation/index.html b/example/annotation/index.html
index 8eb95634a..fdc8c9095 100644
--- a/example/annotation/index.html
+++ b/example/annotation/index.html
@@ -15,12 +15,12 @@
-
+
-
-
-
+
+
+
diff --git a/example/audio-element/index.html b/example/audio-element/index.html
index 9da244b47..7f92c66df 100644
--- a/example/audio-element/index.html
+++ b/example/audio-element/index.html
@@ -14,9 +14,9 @@
-
+
-
+
@@ -62,9 +62,7 @@ How to Enable the Fallback
-
var wavesurfer = Object.create(WaveSurfer);
-
-wavesurfer.init({
+var wavesurfer = WaveSurfer.create({
container: document.querySelector('#wave'),
backend: 'MediaElement'
});
diff --git a/example/cursor/index.html b/example/cursor/index.html
new file mode 100644
index 000000000..d8681e8f6
--- /dev/null
+++ b/example/cursor/index.html
@@ -0,0 +1,106 @@
+
+
+
+
+ wavesurfer.js | Cursor Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Cursor plugin
+
+
Shows a cursor on the waveform.
+
+
+
var wavesurfer = WaveSurfer.create({
+ container: document.querySelector('#waveform'),
+ plugins: [
+ WaveSurfer.cursor()
+ ]
+});
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/cursor/main.js b/example/cursor/main.js
new file mode 100644
index 000000000..1f01ad315
--- /dev/null
+++ b/example/cursor/main.js
@@ -0,0 +1,25 @@
+'use strict';
+
+// Create an instance
+var wavesurfer = {};
+
+// Init & load audio file
+document.addEventListener('DOMContentLoaded', function () {
+
+ wavesurfer = window.WaveSurfer.create({
+ container: document.querySelector('#waveform'),
+ plugins: [
+ window.WaveSurfer.cursor()
+ ]
+ });
+
+
+ // Load audio from URL
+ wavesurfer.load('../media/demo.wav');
+
+
+ // Play button
+ var button = document.querySelector('[data-action="play"]');
+
+ button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
+});
diff --git a/example/elan/app.js b/example/elan/app.js
index 200faac3f..be4ce2817 100644
--- a/example/elan/app.js
+++ b/example/elan/app.js
@@ -12,7 +12,18 @@ document.addEventListener('DOMContentLoaded', function () {
loaderColor : 'purple',
cursorColor : 'navy',
selectionColor: '#d0e9c6',
- loopSelection : false
+ loopSelection : false,
+ plugins: [
+ window.WaveSurfer.elan({
+ url: 'transcripts/001z.xml',
+ container: '#annotations',
+ tiers: {
+ Text: true,
+ Comments: true
+ }
+ }),
+ window.WaveSurfer.regions()
+ ]
};
if (location.search.match('scroll')) {
@@ -47,28 +58,16 @@ document.addEventListener('DOMContentLoaded', function () {
// Init wavesurfer
wavesurfer.init(options);
- // Init ELAN plugin
- var elan = Object.create(WaveSurfer.ELAN);
-
- elan.init({
- url: 'transcripts/001z.xml',
- container: '#annotations',
- tiers: {
- Text: true,
- Comments: true
- }
- });
-
- elan.on('ready', function (data) {
+ wavesurfer.elan.on('ready', function (data) {
wavesurfer.load('transcripts/' + data.media.url);
});
- elan.on('select', function (start, end) {
+ wavesurfer.elan.on('select', function (start, end) {
wavesurfer.backend.play(start, end);
});
- elan.on('ready', function () {
- var classList = elan.container.querySelector('table').classList;
+ wavesurfer.elan.on('ready', function () {
+ var classList = wavesurfer.elan.container.querySelector('table').classList;
[ 'table', 'table-striped', 'table-hover' ].forEach(function (cl) {
classList.add(cl);
});
@@ -76,7 +75,7 @@ document.addEventListener('DOMContentLoaded', function () {
var prevAnnotation, prevRow, region;
var onProgress = function (time) {
- var annotation = elan.getRenderedAnnotation(time);
+ var annotation = wavesurfer.elan.getRenderedAnnotation(time);
if (prevAnnotation != annotation) {
prevAnnotation = annotation;
@@ -86,13 +85,13 @@ document.addEventListener('DOMContentLoaded', function () {
if (annotation) {
// Highlight annotation table row
- var row = elan.getAnnotationNode(annotation);
+ var row = wavesurfer.elan.getAnnotationNode(annotation);
prevRow && prevRow.classList.remove('success');
prevRow = row;
row.classList.add('success');
var before = row.previousSibling;
if (before) {
- elan.container.scrollTop = before.offsetTop;
+ wavesurfer.elan.container.scrollTop = before.offsetTop;
}
// Region
diff --git a/example/elan/index.html b/example/elan/index.html
index d4c38db2b..b8b724334 100644
--- a/example/elan/index.html
+++ b/example/elan/index.html
@@ -15,13 +15,13 @@
-
+
-
+
-
+
diff --git a/example/equalizer/index.html b/example/equalizer/index.html
index 6781e802b..7033af936 100644
--- a/example/equalizer/index.html
+++ b/example/equalizer/index.html
@@ -14,7 +14,7 @@
-
+
diff --git a/example/equalizer/main.js b/example/equalizer/main.js
index 6212c7321..3a61f0c06 100644
--- a/example/equalizer/main.js
+++ b/example/equalizer/main.js
@@ -77,7 +77,7 @@ document.addEventListener('DOMContentLoaded', function () {
});
input.style.display = 'inline-block';
input.setAttribute('orient', 'vertical');
- wavesurfer.drawer.style(input, {
+ wavesurfer.util.style(input, {
'webkitAppearance': 'slider-vertical',
width: '50px',
height: '150px'
diff --git a/example/microphone/app.js b/example/microphone/app.js
index 6c5420b0c..459fef26a 100644
--- a/example/microphone/app.js
+++ b/example/microphone/app.js
@@ -1,39 +1,36 @@
'use strict';
// Create an instance
-var wavesurfer = Object.create(WaveSurfer);
+var wavesurfer;
// Init & load
document.addEventListener('DOMContentLoaded', function () {
- var options = {
- container : '#waveform',
- waveColor : 'black',
- interact : false,
- cursorWidth : 0
- };
var micBtn = document.querySelector('#micBtn');
// Init wavesurfer
- wavesurfer.init(options);
-
- // Init Microphone plugin
- var microphone = Object.create(WaveSurfer.Microphone);
- microphone.init({
- wavesurfer: wavesurfer
+ wavesurfer = window.WaveSurfer.create({
+ container : '#waveform',
+ waveColor : 'black',
+ interact : false,
+ cursorWidth : 0,
+ plugins: [
+ window.WaveSurfer.microphone()
+ ]
});
- microphone.on('deviceReady', function() {
+
+ wavesurfer.microphone.on('deviceReady', function() {
console.info('Device ready!');
});
- microphone.on('deviceError', function(code) {
+ wavesurfer.microphone.on('deviceError', function(code) {
console.warn('Device error: ' + code);
});
// start/stop mic on button click
micBtn.onclick = function() {
- if (microphone.active) {
- microphone.stop();
+ if (wavesurfer.microphone.active) {
+ wavesurfer.microphone.stop();
} else {
- microphone.start();
+ wavesurfer.microphone.start();
}
};
});
diff --git a/example/microphone/index.html b/example/microphone/index.html
index bbc832407..da6f4e94c 100644
--- a/example/microphone/index.html
+++ b/example/microphone/index.html
@@ -13,10 +13,10 @@
-
+
-
+
@@ -53,14 +53,13 @@ Installation
- - add the Microphone plugin script tag
- - create a
WaveSurfer instance
- - create a
Microphone instance
+ - add the Microphone plugin to the plugins property of the wavesurfer options
+ - create a new instance of wavesurfer by using the create function
- control the Microphone using the
start, stopDevice, play, pause, stop and togglePlay methods
- Download the plugin (3.2 KB)
+ Download the plugin
@@ -68,45 +67,40 @@ Installation
Quick Start
@@ -190,7 +184,7 @@ Events
Fork me on GitHub
-
+
+
diff --git a/example/panner/index.html b/example/panner/index.html
index 142962a86..b8234e659 100644
--- a/example/panner/index.html
+++ b/example/panner/index.html
@@ -15,7 +15,7 @@
-
+
@@ -82,9 +82,7 @@ 1. Initialize wavesurfer.js
Create a WaveSurfer instance and load an audio clip.