wavesurfer.js 6.5.0 → 7.0.0-alpha.0

package/src/html-init.js

@@ -1,241 +0,0 @@
-import loadScript from 'load-script';
-
-/**
- * @typedef {Object} InitParams
- * @property {WavesurferParams} [defaults={backend: 'MediaElement,
- * mediaControls: true}] The default wavesurfer initialisation parameters
- * @property {string|NodeList} containers='wavesurfer' Selector or NodeList of
- * elements to attach instances to
- * @property {string}
- * pluginCdnTemplate='//localhost:8080/dist/plugin/wavesurfer.[name].js' URL
- * template for the dynamic loading of plugins
- * @property {function} loadPlugin If set overwrites the default request function,
- * can be used to inject plugins differently.
- */
-/**
- * The HTML initialisation API is not part of the main library bundle file and
- * must be additionally included.
- *
- * The API attaches wavesurfer instances to all `<wavesurfer>` (can be
- * customised), parsing their `data-` attributes to construct an options object
- * for initialisation. Among other things it can dynamically load plugin code.
- *
- * The automatic initialisation can be prevented by setting the
- * `window.WS_StopAutoInit` flag to true. The `html-init[.min].js` file exports
- * the `Init` class, which can be called manually.
- *
- * Site-wide defaults can be added by setting `window.WS_InitOptions`.
- *
- * @example
- * <!-- with minimap and timeline plugin -->
- * <wavesurfer
- *   data-url="../media/demo.wav"
- *   data-plugins="minimap,timeline"
- *   data-minimap-height="30"
- *   data-minimap-wave-color="#ddd"
- *   data-minimap-progress-color="#999"
- *   data-timeline-font-size="13px"
- *   data-timeline-container="#timeline"
- * >
- * </wavesurfer>
- * <div id="timeline"></div>
- *
- * <!-- with regions plugin -->
- * <wavesurfer
- *   data-url="../media/demo.wav"
- *   data-plugins="regions"
- *   data-regions-regions='[{"start": 1,"end": 3,"color": "hsla(400, 100%, 30%, 0.5)"}]'
- * >
- * </wavesurfer>
- */
-class Init {
-    /**
-     * Instantiate Init class and initialize elements
-     *
-     * This is done automatically if `window` is defined and
-     * `window.WS_StopAutoInit` is not set to true
-     *
-     * @param {WaveSurfer} WaveSurfer The WaveSurfer library object
-     * @param {InitParams} params initialisation options
-     */
-    constructor(WaveSurfer, params = {}) {
-        if (!WaveSurfer) {
-            throw new Error('WaveSurfer is not available!');
-        }
-
-        /**
-         * cache WaveSurfer
-         * @private
-         */
-        this.WaveSurfer = WaveSurfer;
-
-        /**
-         * build parameters, cache them in _params so minified builds are smaller
-         * @private
-         */
-        const _params = (this.params = Object.assign(
-            {},
-            {
-                // wavesurfer parameter defaults so by default the audio player is
-                // usable with native media element controls
-                defaults: {
-                    backend: 'MediaElement',
-                    mediaControls: true
-                },
-                // containers to instantiate on, can be selector string or NodeList
-                containers: 'wavesurfer',
-                // @TODO insert plugin CDN URIs
-                pluginCdnTemplate:
-                    '//localhost:8080/dist/plugin/wavesurfer.[name].js',
-                // loadPlugin function can be overridden to inject plugin definition
-                // objects, this default function uses load-script to load a plugin
-                // and pass it to a callback
-                loadPlugin(name, cb) {
-                    const src = _params.pluginCdnTemplate.replace(
-                        '[name]',
-                        name
-                    );
-                    loadScript(src, { async: false }, (err, plugin) => {
-                        if (err) {
-                            // eslint-disable-next-line no-console
-                            return console.error(
-                                `WaveSurfer plugin ${name} not found at ${src}`
-                            );
-                        }
-                        cb(window.WaveSurfer[name]);
-                    });
-                }
-            },
-            params
-        ));
-        /**
-         * The nodes that should have instances attached to them
-         * @type {NodeList}
-         */
-        this.containers =
-            typeof _params.containers == 'string'
-                ? document.querySelectorAll(_params.containers)
-                : _params.containers;
-        /** @private */
-        this.pluginCache = {};
-        /**
-         * An array of wavesurfer instances
-         * @type {Object[]}
-         */
-        this.instances = [];
-
-        this.initAllEls();
-    }
-
-    /**
-     * Initialize all container elements
-     */
-    initAllEls() {
-        // iterate over all the container elements
-        Array.prototype.forEach.call(this.containers, el => {
-            // load the plugins as an array of plugin names
-            const plugins = el.dataset.plugins
-                ? el.dataset.plugins.split(',')
-                : [];
-
-            // no plugins to be loaded, just render
-            if (!plugins.length) {
-                return this.initEl(el);
-            }
-            // … or: iterate over all the plugins
-            plugins.forEach((name, i) => {
-                // plugin is not cached already, load it
-                if (!this.pluginCache[name]) {
-                    this.params.loadPlugin(name, lib => {
-                        this.pluginCache[name] = lib;
-                        // plugins were all loaded, render the element
-                        if (i + 1 === plugins.length) {
-                            this.initEl(el, plugins);
-                        }
-                    });
-                } else if (i === plugins.length) {
-                    // plugin was cached and this plugin was the last
-                    this.initEl(el, plugins);
-                }
-            });
-        });
-    }
-
-    /**
-     * Initialize a single container element and add to `this.instances`
-     *
-     * @param  {HTMLElement} el The container to instantiate wavesurfer to
-     * @param  {PluginDefinition[]} plugins An Array of plugin names to initialize with
-     * @return {Object} Wavesurfer instance
-     */
-    initEl(el, plugins = []) {
-        const jsonRegex = /^[[|{]/;
-        // initialize plugins with the correct options
-        const initialisedPlugins = plugins.map(plugin => {
-            const options = {};
-            // the regex to find this plugin attributes
-            const attrNameRegex = new RegExp('^' + plugin);
-            let attrName;
-            // iterate over all the data attributes and find ones for this
-            // plugin
-            for (attrName in el.dataset) {
-                const regexResult = attrNameRegex.exec(attrName);
-                if (regexResult) {
-                    const attr = el.dataset[attrName];
-                    // if the string begins with a [ or a { parse it as JSON
-                    const prop = jsonRegex.test(attr) ? JSON.parse(attr) : attr;
-                    // this removes the plugin prefix and changes the first letter
-                    // of the resulting string to lower case to follow the naming
-                    // convention of ws params
-                    const unprefixedOptionName =
-                        attrName
-                            .slice(plugin.length, plugin.length + 1)
-                            .toLowerCase() + attrName.slice(plugin.length + 1);
-                    options[unprefixedOptionName] = prop;
-                }
-            }
-            return this.pluginCache[plugin].create(options);
-        });
-        // build parameter object for this container
-        const params = Object.assign(
-            { container: el },
-            this.params.defaults,
-            el.dataset,
-            { plugins: initialisedPlugins }
-        );
-
-        // @TODO make nicer
-        el.style.display = 'block';
-
-        // initialize wavesurfer, load audio (with peaks if provided)
-        const instance = this.WaveSurfer.create(params);
-        const peaks = params.peaks ? JSON.parse(params.peaks) : undefined;
-        instance.load(params.url, peaks);
-
-        // push this instance into the instances cache
-        this.instances.push(instance);
-        return instance;
-    }
-}
-
-// if window object exists and window.WS_StopAutoInit is not true
-if (typeof window === 'object' && !window.WS_StopAutoInit) {
-    // call init when document is ready, apply any custom default settings
-    // in window.WS_InitOptions
-    if (document.readyState === 'complete') {
-        window.WaveSurferInit = new Init(
-            window.WaveSurfer,
-            window.WS_InitOptions
-        );
-    } else {
-        window.addEventListener('load', () => {
-            window.WaveSurferInit = new Init(
-                window.WaveSurfer,
-                window.WS_InitOptions
-            );
-        });
-    }
-}
-
-// export init for manual usage
-export default Init;

package/src/mediaelement-webaudio.js

@@ -1,77 +0,0 @@
-import MediaElement from './mediaelement';
-
-/**
- * MediaElementWebAudio backend: load audio via an HTML5 audio tag, but playback with the WebAudio API.
- * The advantage here is that the html5 <audio> tag can perform range requests on the server and not
- * buffer the entire file in one request, and you still get the filtering and scripting functionality
- * of the webaudio API.
- * Note that in order to use range requests and prevent buffering, you must provide peak data.
- *
- * @since 3.2.0
- */
-export default class MediaElementWebAudio extends MediaElement {
-    /**
-     * Construct the backend
-     *
-     * @param {WavesurferParams} params Wavesurfer parameters
-     */
-    constructor(params) {
-        super(params);
-        /** @private */
-        this.params = params;
-        /** @private */
-        this.sourceMediaElement = null;
-    }
-
-    /**
-     * Initialise the backend, called in `wavesurfer.createBackend()`
-     */
-    init() {
-        this.setPlaybackRate(this.params.audioRate);
-        this.createTimer();
-        this.createVolumeNode();
-        this.createScriptNode();
-        this.createAnalyserNode();
-    }
-    /**
-     * Private method called by both `load` (from url)
-     * and `loadElt` (existing media element) methods.
-     *
-     * @param {HTMLMediaElement} media HTML5 Audio or Video element
-     * @param {number[]|Number.<Array[]>} peaks Array of peak data
-     * @param {string} preload HTML 5 preload attribute value
-     * @private
-     */
-    _load(media, peaks, preload) {
-        super._load(media, peaks, preload);
-        this.createMediaElementSource(media);
-    }
-
-    /**
-     * Create MediaElementSource node
-     *
-     * @since 3.2.0
-     * @param {HTMLMediaElement} mediaElement HTML5 Audio to load
-     */
-    createMediaElementSource(mediaElement) {
-        this.sourceMediaElement = this.ac.createMediaElementSource(
-            mediaElement
-        );
-        this.sourceMediaElement.connect(this.analyser);
-    }
-
-    play(start, end) {
-        this.resumeAudioContext();
-        return super.play(start, end);
-    }
-
-    /**
-     * This is called when wavesurfer is destroyed
-     *
-     */
-    destroy() {
-        super.destroy();
-
-        this.destroyWebAudio();
-    }
-}