@checksub_team/peaks_timeline 1.4.17

package/src/waveform-builder.js

@@ -0,0 +1,458 @@
+/**
+ * @file
+ *
+ * Defines the {@link WaveformBuilder} class.
+ *
+ * @module waveform-builder
+ */
+
+ define([
+  'waveform-data',
+  './utils'
+  ], function(
+    WaveformData,
+    Utils) {
+  'use strict';
+
+  var isXhr2 = ('withCredentials' in new XMLHttpRequest());
+
+  /**
+   * Creates and returns a WaveformData object, either by requesting the
+   * waveform data from the server, or by creating the waveform data using the
+   * Web Audio API.
+   *
+   * @class
+   * @alias WaveformBuilder
+   *
+   * @param {Peaks} peaks
+   */
+
+  function WaveformBuilder(peaks) {
+    this._peaks = peaks;
+  }
+
+  /**
+   * Options for requesting remote waveform data.
+   *
+   * @typedef {Object} RemoteWaveformDataOptions
+   * @global
+   * @property {String=} arraybuffer
+   * @property {String=} json
+   */
+
+  /**
+   * Options for supplying local waveform data.
+   *
+   * @typedef {Object} LocalWaveformDataOptions
+   * @global
+   * @property {ArrayBuffer=} arraybuffer
+   * @property {Object=} json
+   */
+
+  /**
+   * Options for the Web Audio waveform builder.
+   *
+   * @typedef {Object} WaveformBuilderWebAudioOptions
+   * @global
+   * @property {AudioContext} audioContext
+   * @property {AudioBuffer=} audioBuffer
+   * @property {Number=} scale
+   * @property {Boolean=} multiChannel
+   */
+
+  /**
+   * Options for [WaveformBuilder.init]{@link WaveformBuilder#init}.
+   *
+   * @typedef {Object} WaveformBuilderInitOptions
+   * @global
+   * @property {RemoteWaveformDataOptions=} dataUri
+   * @property {LocalWaveformDataOptions=} waveformData
+   * @property {WaveformBuilderWebAudioOptions=} webAudio
+   * @property {Boolean=} withCredentials
+   * @property {Array<Number>=} zoomLevels
+   */
+
+  /**
+   * Callback for receiving the waveform data.
+   *
+   * @callback WaveformBuilderInitCallback
+   * @global
+   * @param {Error} error
+   * @param {WaveformData} waveformData
+   */
+
+  /**
+   * Loads or creates the waveform data.
+   *
+   * @private
+   * @param {WaveformBuilderInitOptions} options
+   * @param {WaveformBuilderInitCallback} callback
+   */
+
+  WaveformBuilder.prototype.init = function(options, callback) {
+    if ((options.dataUri && (options.webAudio || options.audioContext)) ||
+        (options.waveformData && (options.webAudio || options.audioContext)) ||
+        (options.dataUri && options.waveformData)) {
+      // eslint-disable-next-line max-len
+      callback(new TypeError('Peaks.init(): You may only pass one source (webAudio, dataUri, or waveformData) to render waveform data.'));
+      return;
+    }
+
+    if (options.audioContext) {
+      // eslint-disable-next-line max-len
+      this._peaks.options.deprecationLogger('Peaks.init(): The audioContext option is deprecated, please pass a webAudio object instead');
+
+      options.webAudio = {
+        audioContext: options.audioContext
+      };
+    }
+
+    if (options.objectUrl) {
+      return this._buildWaveformDataFromObjectUrl(options, callback);
+    }
+    else if (options.dataUri) {
+      return this._getRemoteWaveformData(options, callback);
+    }
+    else if (options.waveformData) {
+      return this._buildWaveformFromLocalData(options, callback);
+    }
+    else if (options.webAudio) {
+      if (options.webAudio.audioBuffer) {
+        return this._buildWaveformDataFromAudioBuffer(options, callback);
+      }
+      else {
+        return this._buildWaveformDataUsingWebAudio(options, callback);
+      }
+    }
+    else {
+      // eslint-disable-next-line max-len
+      callback(new Error('Peaks.init(): You must pass an audioContext, or dataUri, or waveformData to render waveform data'));
+    }
+  };
+
+  /* eslint-disable max-len */
+
+  /**
+   * Fetches waveform data, based on the given options.
+   *
+   * @private
+   * @param {Object} options
+   * @param {String|Object} options.dataUri
+   * @param {String} options.dataUri.arraybuffer Waveform data URL
+   *   (binary format)
+   * @param {String} options.dataUri.json Waveform data URL (JSON format)
+   * @param {String} options.defaultUriFormat Either 'arraybuffer' (for binary
+   *   data) or 'json'
+   * @param {WaveformBuilderInitCallback} callback
+   *
+   * @see Refer to the <a href="https://github.com/bbc/audiowaveform/blob/master/doc/DataFormat.md">data format documentation</a>
+   *   for details of the binary and JSON waveform data formats.
+   */
+
+  /* eslint-enable max-len */
+
+  WaveformBuilder.prototype._getRemoteWaveformData = function(options, callback) {
+    var self = this;
+    var dataUri = null;
+    var requestType = null;
+    var url;
+
+    if (Utils.isObject(options.dataUri)) {
+      dataUri = options.dataUri;
+    }
+    else if (Utils.isString(options.dataUri)) {
+      // Backward compatibility
+      dataUri = {};
+      dataUri[options.dataUriDefaultFormat || 'json'] = options.dataUri;
+    }
+    else {
+      callback(new TypeError('Peaks.init(): The dataUri option must be an object'));
+      return;
+    }
+
+    ['ArrayBuffer', 'JSON'].some(function(connector) {
+      if (window[connector]) {
+        requestType = connector.toLowerCase();
+        url = dataUri[requestType];
+
+        return Boolean(url);
+      }
+    });
+
+    if (!url) {
+      // eslint-disable-next-line max-len
+      callback(new Error('Peaks.init(): Unable to determine a compatible dataUri format for this browser'));
+      return;
+    }
+
+    var xhr = self._createXHR(url, requestType, options.withCredentials, function(event) {
+      if (this.readyState !== 4) {
+        return;
+      }
+
+      if (this.status !== 200) {
+        callback(
+          new Error('Unable to fetch remote data. HTTP status ' + this.status)
+        );
+
+        return;
+      }
+
+      var waveformData = WaveformData.create(event.target.response);
+
+      if (waveformData.channels !== 1 && waveformData.channels !== 2) {
+        callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
+        return;
+      }
+
+      callback(null, waveformData);
+    },
+    function() {
+      callback(new Error('XHR Failed'));
+    });
+
+    xhr.send();
+  };
+
+  /* eslint-disable max-len */
+
+  /**
+   * Creates a waveform from given data, based on the given options.
+   *
+   * @private
+   * @param {Object} options
+   * @param {Object} options.waveformData
+   * @param {ArrayBuffer} options.waveformData.arraybuffer Waveform data (binary format)
+   * @param {Object} options.waveformData.json Waveform data (JSON format)
+   * @param {WaveformBuilderInitCallback} callback
+   *
+   * @see Refer to the <a href="https://github.com/bbc/audiowaveform/blob/master/doc/DataFormat.md">data format documentation</a>
+   *   for details of the binary and JSON waveform data formats.
+   */
+
+  /* eslint-enable max-len */
+
+  WaveformBuilder.prototype._buildWaveformFromLocalData = function(options, callback) {
+    var waveformData = null;
+    var data = null;
+
+    if (Utils.isObject(options.waveformData)) {
+      waveformData = options.waveformData;
+    }
+    else {
+      callback(new Error('Peaks.init(): The waveformData option must be an object'));
+      return;
+    }
+
+    if (Utils.isObject(waveformData.json)) {
+      data = waveformData.json;
+    }
+    else if (Utils.isArrayBuffer(waveformData.arraybuffer)) {
+      data = waveformData.arraybuffer;
+    }
+
+    if (!data) {
+      // eslint-disable-next-line max-len
+      callback(new Error('Peaks.init(): Unable to determine a compatible waveformData format'));
+      return;
+    }
+
+    try {
+      var createdWaveformData = WaveformData.create(data);
+
+      if (createdWaveformData.channels !== 1 && createdWaveformData.channels !== 2) {
+        callback(new Error('Peaks.init(): Only mono or stereo waveforms are currently supported'));
+        return;
+      }
+
+      callback(null, createdWaveformData);
+    }
+    catch (err) {
+      callback(err);
+    }
+  };
+
+  /**
+   * Creates waveform data using the Web Audio API.
+   *
+   * @private
+   * @param {Object} options
+   * @param {AudioContext} options.webAudio.audioContext
+   * @param {WaveformBuilderInitCallback} callback
+   */
+
+  WaveformBuilder.prototype._buildWaveformDataUsingWebAudio = function(options, callback) {
+    var self = this;
+
+    var audioContext = window.AudioContext || window.webkitAudioContext;
+
+    if (!(options.webAudio.audioContext instanceof audioContext)) {
+      // eslint-disable-next-line max-len
+      callback(new TypeError('Peaks.init(): The webAudio.audioContext option must be a valid AudioContext'));
+      return;
+    }
+
+    var webAudioOptions = options.webAudio;
+
+    if (webAudioOptions.scale !== options.zoomLevels[0]) {
+      webAudioOptions.scale = options.zoomLevels[0];
+    }
+
+    // If the media element has already selected which source to play, its
+    // currentSrc attribute will contain the source media URL. Otherwise,
+    // we wait for a canplay event to tell us when the media is ready.
+
+    var mediaSourceUrl = self._peaks.player.getCurrentSource();
+
+    if (mediaSourceUrl) {
+      self._requestAudioAndBuildWaveformData(
+        mediaSourceUrl,
+        webAudioOptions,
+        options.withCredentials,
+        callback
+      );
+    }
+    else {
+      self._peaks.once('player_canplay', function(player) {
+        self._requestAudioAndBuildWaveformData(
+          player.getCurrentSource(),
+          webAudioOptions,
+          options.withCredentials,
+          callback
+        );
+      });
+    }
+  };
+
+  /**
+   * Creates waveform data using the Web Audio API.
+   *
+   * @private
+   * @param {Object} options
+   * @param {WaveformBuilderInitCallback} callback
+   */
+
+   WaveformBuilder.prototype._buildWaveformDataFromObjectUrl = function(options, callback) {
+    var self = this;
+
+    var webAudioOptions = {
+      scale: options.minScale
+    };
+
+    webAudioOptions.audioContext = new window.AudioContext();
+
+    if (options.objectUrl) {
+      self._requestAudioAndBuildWaveformData(
+        options.objectUrl,
+        webAudioOptions,
+        options.withCredentials,
+        callback
+      );
+    }
+  };
+
+  WaveformBuilder.prototype._buildWaveformDataFromAudioBuffer = function(options, callback) {
+    var webAudioOptions = options.webAudio;
+
+    if (webAudioOptions.scale !== options.zoomLevels[0]) {
+      webAudioOptions.scale = options.zoomLevels[0];
+    }
+
+    var webAudioBuilderOptions = {
+      audio_buffer: webAudioOptions.audioBuffer,
+      split_channels: webAudioOptions.multiChannel,
+      scale: webAudioOptions.scale
+    };
+
+    WaveformData.createFromAudio(webAudioBuilderOptions, callback);
+  };
+
+  /**
+   * Fetches the audio content, based on the given options, and creates waveform
+   * data using the Web Audio API.
+   *
+   * @private
+   * @param {url} The media source URL
+   * @param {WaveformBuilderWebAudioOptions} webAudio
+   * @param {Boolean} withCredentials
+   * @param {WaveformBuilderInitCallback} callback
+   */
+
+  WaveformBuilder.prototype._requestAudioAndBuildWaveformData = function(url,
+    webAudio, withCredentials, callback) {
+    var self = this;
+
+    if (!url) {
+      self._peaks.logger('Peaks.init(): The mediaElement src is invalid');
+      return;
+    }
+
+    var xhr = self._createXHR(url, 'arraybuffer', withCredentials, function(event) {
+      if (this.readyState !== 4) {
+        return;
+      }
+
+      if (this.status !== 200) {
+        callback(
+          new Error('Unable to fetch remote data. HTTP status ' + this.status)
+        );
+
+        return;
+      }
+
+      var webAudioBuilderOptions = {
+        audio_context: webAudio.audioContext,
+        array_buffer: event.target.response,
+        split_channels: webAudio.multiChannel,
+        scale: webAudio.scale
+      };
+
+      WaveformData.createFromAudio(webAudioBuilderOptions, callback);
+    },
+    function() {
+      callback(new Error('XHR Failed'));
+    });
+
+    xhr.send();
+  };
+
+  /**
+   * @private
+   * @param {String} url
+   * @param {String} requestType
+   * @param {Boolean} withCredentials
+   * @param {Function} onLoad
+   * @param {Function} onError
+   *
+   * @returns {XMLHttpRequest}
+   */
+
+  WaveformBuilder.prototype._createXHR = function(url, requestType,
+    withCredentials, onLoad, onError) {
+    var xhr = new XMLHttpRequest();
+
+    // open an XHR request to the data source file
+    xhr.open('GET', url, true);
+
+    if (isXhr2) {
+      try {
+        xhr.responseType = requestType;
+      }
+      catch (e) {
+        // Some browsers like Safari 6 do handle XHR2 but not the json
+        // response type, doing only a try/catch fails in IE9
+      }
+    }
+
+    xhr.onload = onLoad;
+    xhr.onerror = onError;
+
+    if (isXhr2 && withCredentials) {
+      xhr.withCredentials = true;
+    }
+
+    return xhr;
+  };
+
+  return WaveformBuilder;
+});

package/src/waveform-shape.js

@@ -0,0 +1,223 @@
+/**
+ * @file
+ *
+ * Defines the {@link WaveformShape} class.
+ *
+ * @module waveform-shape
+ */
+
+define(['./utils', 'konva'], function(Utils, Konva) {
+  'use strict';
+
+  /**
+   * Scales the waveform data for drawing on a canvas context.
+   *
+   * @param {Number} amplitude The waveform data point amplitude.
+   * @param {Number} height The height of the waveform, in pixels.
+   * @param {Number} scale Amplitude scaling factor.
+   * @returns {Number} The scaled waveform data point.
+   */
+
+  function scaleY(amplitude, height, scale) {
+    var range = 256;
+    var offset = 128;
+
+    var scaledAmplitude = (amplitude * scale + offset) * height / range;
+
+    return height - Utils.clamp(height - scaledAmplitude, 0, height);
+  }
+
+  /**
+   * Waveform shape options.
+   *
+   * @typedef {Object} WaveformShapeOptions
+   * @global
+   * @property {String} color Waveform color.
+   * @property {WaveformOverview|WaveformZoomView} view The view object
+   *   that contains the waveform shape.
+   * @property {Segment?} segment If given, render a waveform image
+   *   covering the segment's time range. Otherwise, render the entire
+   *   waveform duration.
+   */
+
+  /**
+   * Creates a Konva.Shape object that renders a waveform image.
+   *
+   * @class
+   * @alias WaveformShape
+   *
+   * @param {WaveformShapeOptions} options
+   */
+
+  function WaveformShape(options) {
+    Konva.Shape.call(this, {
+      fill: options.color
+    });
+
+    this._view = options.view;
+    this._source = options.source;
+    this._originalWaveformData = options.waveformData;
+    this._waveformData = options.waveformData;
+    this._height = options.height;
+
+    this.rescale();
+
+    this.sceneFunc(this._sceneFunc);
+
+    this.hitFunc(this._waveformShapeHitFunc);
+  }
+
+  WaveformShape.prototype = Object.create(Konva.Shape.prototype);
+
+  WaveformShape.prototype.rescale = function() {
+    this._waveformData = this._originalWaveformData.resample({
+      scale: this._waveformData.sample_rate / this._view.getTimeToPixelsScale()
+    });
+  };
+
+  WaveformShape.prototype.setWaveformColor = function(color) {
+    this.fill(color);
+  };
+
+  WaveformShape.prototype._sceneFunc = function(context) {
+    var width = this._view.getWidth();
+
+    var startPixels = 0, startOffset = 0;
+
+    if (this._source) {
+      startPixels = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
+        this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
+        0
+      );
+
+      startOffset = this._view.timeToPixels(this._source.mediaStartTime);
+    }
+
+    var endPixels = width;
+
+    if (this._source) {
+      endPixels = Math.min(
+        this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
+          this._view.timeToPixels(this._source.endTime)
+            - this._view.getFrameOffset()
+            - this._view.getWidth(),
+          0
+        ),
+        this._waveformData.length
+      );
+    }
+
+    this._drawWaveform(
+      context,
+      this._waveformData,
+      startPixels,
+      startOffset,
+      endPixels,
+      this._height
+    );
+  };
+
+  /**
+   * Draws a waveform on a canvas context.
+   *
+   * @param {Konva.Context} context The canvas context to draw on.
+   * @param {WaveformData} waveformData The waveform data to draw.
+   * @param {Number} frameOffset The start position of the waveform shown
+   *   in the view, in pixels.
+   * @param {Number} startPixels The start position of the waveform to draw,
+   *   in pixels.
+   * @param {Number} endPixels The end position of the waveform to draw,
+   *   in pixels.
+   * @param {Number} width The width of the waveform area, in pixels.
+   * @param {Number} height The height of the waveform area, in pixels.
+   */
+
+  WaveformShape.prototype._drawWaveform = function(context, waveformData,
+    startPixels, startOffset, endPixels, height) {
+    var channels = waveformData.channels;
+
+    var waveformTop = 0;
+    var waveformHeight = Math.floor(height / channels);
+
+    for (var i = 0; i < channels; i++) {
+      if (i === channels - 1) {
+        waveformHeight = height - (channels - 1) * waveformHeight;
+      }
+
+      this._drawChannel(
+        context,
+        waveformData.channel(i),
+        startPixels,
+        startOffset,
+        endPixels,
+        waveformTop,
+        waveformHeight
+      );
+
+      waveformTop += waveformHeight;
+    }
+  };
+
+  WaveformShape.prototype._drawChannel = function(context, channel,
+    startPixels, startOffset, endPixels, top, height) {
+    var x, val;
+
+    var amplitudeScale = this._view.getAmplitudeScale();
+
+    context.beginPath();
+
+    for (x = startPixels; x < endPixels; x++) {
+      val = channel.min_sample(x);
+
+      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    }
+
+    for (x = endPixels - 1; x >= startPixels; x--) {
+      val = channel.max_sample(x);
+
+      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    }
+
+    context.closePath();
+
+    context.fillShape(this);
+  };
+
+  WaveformShape.prototype._waveformShapeHitFunc = function(context) {
+    if (!this._source) {
+      return;
+    }
+
+    var frameOffset = this._view.getFrameOffset();
+    var viewWidth = this._view.getWidth();
+
+    var startPixels = this._view.timeToPixels(this._source.startTime);
+    var endPixels   = this._view.timeToPixels(this._source.endTime);
+
+    var offsetY = 10;
+    var hitRectHeight = this._height;
+
+    if (hitRectHeight < 0) {
+      hitRectHeight = 0;
+    }
+
+    var hitRectLeft = startPixels - frameOffset;
+    var hitRectWidth = endPixels - startPixels;
+
+    if (hitRectLeft < 0) {
+      hitRectWidth -= -hitRectLeft;
+      hitRectLeft = 0;
+    }
+
+    if (hitRectLeft + hitRectWidth > viewWidth) {
+      hitRectWidth -= hitRectLeft + hitRectWidth - viewWidth;
+    }
+
+    context.beginPath();
+    context.rect(hitRectLeft, offsetY, hitRectWidth, hitRectHeight);
+    context.closePath();
+    context.fillStrokeShape(this);
+  };
+
+  return WaveformShape;
+});