@micromag/element-audio 0.2.371 → 0.2.372

package/es/index.js

@@ -2,16 +2,16 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useRef, useEffect, useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { useUserInteracted } from '@micromag/core/contexts';
 import { useResizeObserver, useMediaApi } from '@micromag/core/hooks';
-import 'whatwg-fetch';
-import { useGesture } from 'react-use-gesture';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useRef, useEffect, useCallback, useState } from 'react';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
+import { useGesture } from 'react-use-gesture';
+import 'whatwg-fetch';
 
 var styles$1 = {"container":"micromag-element-audio-audio-wave-container","button":"micromag-element-audio-audio-wave-button","canvasBackground":"micromag-element-audio-audio-wave-canvasBackground","canvasProgress":"micromag-element-audio-audio-wave-canvasProgress"};
 
@@ -112,24 +112,48 @@ var AudioWave = function AudioWave(_ref) {
     }
 
     var sampleOuterWidth = sampleWidth + sampleMargin * 2;
-    var samplesCount = Math.floor(elWidth / sampleOuterWidth);
-    var amplitudes = []; // get samples
+    var samplesCount = Math.floor(elWidth / sampleOuterWidth); // const amplitudes = [];
+    // get samples
 
-    var sampleSize = Math.floor(audioLevels.length / samplesCount);
+    var levelsBySamples = audioLevels.length / samplesCount;
 
-    for (var sampleI = 0; sampleI < samplesCount; sampleI += 1) {
-      var sampleStart = sampleSize * sampleI;
-      var sum = 0;
+    var amplitudes = _toConsumableArray(Array(samplesCount).keys()).reduce(function (newAmplitudes, index) {
+      var levelStartIndex = index * levelsBySamples;
+      var levelEndIndex = levelStartIndex + levelsBySamples;
+      var newValues = [];
 
-      for (var sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
-        sum += Math.abs(audioLevels[sampleStart + sampleSizeI]);
+      for (var i = Math.floor(levelStartIndex); i < Math.round(levelEndIndex); i += 1) {
+        newValues.push(audioLevels[i]);
       }
 
-      amplitudes.push(sum / sampleSize);
-    }
-
+      return levelsBySamples >= 1 ? [].concat(_toConsumableArray(newAmplitudes), [newValues.reduce(function (total, value) {
+        return total + value;
+      }, 0) / newValues.length]) : [].concat(_toConsumableArray(newAmplitudes), newValues);
+    }, []); // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
+    //     // if (levelsBySamples >= 1) {
+    //     //     const sampleSize = Math.floor(levelsBySamples);
+    //     //     const sampleStart = sampleSize * sampleI;
+    //     //     let sum = 0;
+    //     //     for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
+    //     //         sum += Math.abs(audioLevels[sampleStart + sampleSizeI]);
+    //     //     }
+    //     //     amplitudes.push(sum / sampleSize);
+    //     // } else {
+    //         console.log(sampleI);
+    //         amplitudes.push(Math.abs(audioLevels[Math.floor(sampleI)]));
+    //         // for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
+    //         //     console.log(sampleI, sampleSize);
+    //         //     amplitudes.push(Math.abs(audioLevels[sampleI % sampleSize]));
+    //         // }
+    //     // }
+    // }
+
+
+    var minAmplitude = Math.min.apply(Math, _toConsumableArray(amplitudes));
+    var maxAmplitude = Math.max.apply(Math, _toConsumableArray(amplitudes));
+    var delta = maxAmplitude - minAmplitude;
     var normalizedAmplitudes = amplitudes.map(function (n) {
-      return n * Math.pow(Math.max.apply(Math, amplitudes), -1);
+      return (n - minAmplitude) / delta;
     }); // draw samples
 
     var canvasBg = canvasBackgroundRef.current;
@@ -282,7 +306,13 @@ var Audio = function Audio(_ref) {
 
   var _ref2 = media || {},
       _ref2$url = _ref2.url,
-      url = _ref2$url === void 0 ? null : _ref2$url;
+      url = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$metadata = _ref2.metadata,
+      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
+
+  var _ref3 = metadata || {},
+      _ref3$waveform = _ref3.waveform,
+      waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
 
   var userInteracted = useUserInteracted();
   var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
@@ -329,13 +359,18 @@ var Audio = function Audio(_ref) {
 
   useEffect(function () {
     var canceled = false;
+    var AudioContext = typeof window !== 'undefined' ? window.AudioContext || window.webkitAudioContext : null;
 
-    if (url !== null && waveFake) {
+    if (waveform !== null) {
+      setAudioLevels(waveform.map(function (it) {
+        return (it + 256 / 2) / 256;
+      }));
+    } else if (url !== null && waveFake) {
       var fakeLength = 1000;
       setAudioLevels(_toConsumableArray(new Array(fakeLength)).map(function () {
         return Math.random();
       }));
-    } else if (url !== null && typeof window !== 'undefined') {
+    } else if (url !== null && AudioContext !== null) {
       fetch(url, {
         mode: 'cors'
       }).then(function (response) {
@@ -350,7 +385,7 @@ var Audio = function Audio(_ref) {
         }
 
         setBlobUrl(URL.createObjectURL(new Blob([arrayBuffer])));
-        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        var audioCtx = new AudioContext();
         return audioCtx.decodeAudioData(arrayBuffer);
       }).then(function (buffer) {
         var channelsCount = buffer.numberOfChannels;
@@ -358,9 +393,9 @@ var Audio = function Audio(_ref) {
         if (channelsCount > 0) {
           var leftChannelData = buffer.getChannelData(0);
           setAudioLevels(leftChannelData.reduce(function (newArray, level, levelIndex) {
-            if (levelIndex % reduceBufferFactor === 0) {
-              newArray[newArray.length] = level;
-            }
+            // if (levelIndex % reduceBufferFactor === 0) {
+            //     console.log(level, (level + 1) / 2);
+            newArray[newArray.length] = Math.abs(level); // }
 
             return newArray;
           }, []));
@@ -375,7 +410,7 @@ var Audio = function Audio(_ref) {
         canceled = true;
       }
     };
-  }, [url, setAudioLevels, setBlobUrl, reduceBufferFactor, waveFake]);
+  }, [url, waveform, setAudioLevels, setBlobUrl, reduceBufferFactor, waveFake]);
   var ready = waveFake || audioReady && blobUrl !== null;
   useEffect(function () {
     if (ready && onReady !== null) {

package/lib/index.js

@@ -6,16 +6,16 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var PropTypes = require('prop-types');
-var classNames = require('classnames');
 var core$1 = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
-require('whatwg-fetch');
-var reactUseGesture = require('react-use-gesture');
+var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
 var core = require('@react-spring/core');
 var web = require('@react-spring/web');
+var reactUseGesture = require('react-use-gesture');
+require('whatwg-fetch');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,9 +23,9 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var styles$1 = {"container":"micromag-element-audio-audio-wave-container","button":"micromag-element-audio-audio-wave-button","canvasBackground":"micromag-element-audio-audio-wave-canvasBackground","canvasProgress":"micromag-element-audio-audio-wave-canvasProgress"};
 
@@ -126,24 +126,48 @@ var AudioWave = function AudioWave(_ref) {
     }
 
     var sampleOuterWidth = sampleWidth + sampleMargin * 2;
-    var samplesCount = Math.floor(elWidth / sampleOuterWidth);
-    var amplitudes = []; // get samples
+    var samplesCount = Math.floor(elWidth / sampleOuterWidth); // const amplitudes = [];
+    // get samples
 
-    var sampleSize = Math.floor(audioLevels.length / samplesCount);
+    var levelsBySamples = audioLevels.length / samplesCount;
 
-    for (var sampleI = 0; sampleI < samplesCount; sampleI += 1) {
-      var sampleStart = sampleSize * sampleI;
-      var sum = 0;
+    var amplitudes = _toConsumableArray__default["default"](Array(samplesCount).keys()).reduce(function (newAmplitudes, index) {
+      var levelStartIndex = index * levelsBySamples;
+      var levelEndIndex = levelStartIndex + levelsBySamples;
+      var newValues = [];
 
-      for (var sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
-        sum += Math.abs(audioLevels[sampleStart + sampleSizeI]);
+      for (var i = Math.floor(levelStartIndex); i < Math.round(levelEndIndex); i += 1) {
+        newValues.push(audioLevels[i]);
       }
 
-      amplitudes.push(sum / sampleSize);
-    }
-
+      return levelsBySamples >= 1 ? [].concat(_toConsumableArray__default["default"](newAmplitudes), [newValues.reduce(function (total, value) {
+        return total + value;
+      }, 0) / newValues.length]) : [].concat(_toConsumableArray__default["default"](newAmplitudes), newValues);
+    }, []); // for (let sampleI = 0; sampleI < samplesCount; sampleI += levelsBySamples) {
+    //     // if (levelsBySamples >= 1) {
+    //     //     const sampleSize = Math.floor(levelsBySamples);
+    //     //     const sampleStart = sampleSize * sampleI;
+    //     //     let sum = 0;
+    //     //     for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
+    //     //         sum += Math.abs(audioLevels[sampleStart + sampleSizeI]);
+    //     //     }
+    //     //     amplitudes.push(sum / sampleSize);
+    //     // } else {
+    //         console.log(sampleI);
+    //         amplitudes.push(Math.abs(audioLevels[Math.floor(sampleI)]));
+    //         // for (let sampleSizeI = 0; sampleSizeI < sampleSize; sampleSizeI += 1) {
+    //         //     console.log(sampleI, sampleSize);
+    //         //     amplitudes.push(Math.abs(audioLevels[sampleI % sampleSize]));
+    //         // }
+    //     // }
+    // }
+
+
+    var minAmplitude = Math.min.apply(Math, _toConsumableArray__default["default"](amplitudes));
+    var maxAmplitude = Math.max.apply(Math, _toConsumableArray__default["default"](amplitudes));
+    var delta = maxAmplitude - minAmplitude;
     var normalizedAmplitudes = amplitudes.map(function (n) {
-      return n * Math.pow(Math.max.apply(Math, amplitudes), -1);
+      return (n - minAmplitude) / delta;
     }); // draw samples
 
     var canvasBg = canvasBackgroundRef.current;
@@ -296,7 +320,13 @@ var Audio = function Audio(_ref) {
 
   var _ref2 = media || {},
       _ref2$url = _ref2.url,
-      url = _ref2$url === void 0 ? null : _ref2$url;
+      url = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$metadata = _ref2.metadata,
+      metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
+
+  var _ref3 = metadata || {},
+      _ref3$waveform = _ref3.waveform,
+      waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
 
   var userInteracted = contexts.useUserInteracted();
   var finalInitialMuted = initialMuted === true || initialMuted === 'auto' && autoPlay && !userInteracted;
@@ -343,13 +373,18 @@ var Audio = function Audio(_ref) {
 
   React.useEffect(function () {
     var canceled = false;
+    var AudioContext = typeof window !== 'undefined' ? window.AudioContext || window.webkitAudioContext : null;
 
-    if (url !== null && waveFake) {
+    if (waveform !== null) {
+      setAudioLevels(waveform.map(function (it) {
+        return (it + 256 / 2) / 256;
+      }));
+    } else if (url !== null && waveFake) {
       var fakeLength = 1000;
       setAudioLevels(_toConsumableArray__default["default"](new Array(fakeLength)).map(function () {
         return Math.random();
       }));
-    } else if (url !== null && typeof window !== 'undefined') {
+    } else if (url !== null && AudioContext !== null) {
       fetch(url, {
         mode: 'cors'
       }).then(function (response) {
@@ -364,7 +399,7 @@ var Audio = function Audio(_ref) {
         }
 
         setBlobUrl(URL.createObjectURL(new Blob([arrayBuffer])));
-        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        var audioCtx = new AudioContext();
         return audioCtx.decodeAudioData(arrayBuffer);
       }).then(function (buffer) {
         var channelsCount = buffer.numberOfChannels;
@@ -372,9 +407,9 @@ var Audio = function Audio(_ref) {
         if (channelsCount > 0) {
           var leftChannelData = buffer.getChannelData(0);
           setAudioLevels(leftChannelData.reduce(function (newArray, level, levelIndex) {
-            if (levelIndex % reduceBufferFactor === 0) {
-              newArray[newArray.length] = level;
-            }
+            // if (levelIndex % reduceBufferFactor === 0) {
+            //     console.log(level, (level + 1) / 2);
+            newArray[newArray.length] = Math.abs(level); // }
 
             return newArray;
           }, []));
@@ -389,7 +424,7 @@ var Audio = function Audio(_ref) {
         canceled = true;
       }
     };
-  }, [url, setAudioLevels, setBlobUrl, reduceBufferFactor, waveFake]);
+  }, [url, waveform, setAudioLevels, setBlobUrl, reduceBufferFactor, waveFake]);
   var ready = waveFake || audioReady && blobUrl !== null;
   React.useEffect(function () {
     if (ready && onReady !== null) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-audio",
-    "version": "0.2.371",
+    "version": "0.2.372",
     "description": "",
     "keywords": [
         "javascript"
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c0b4ada82950489dde098c81af7eb04cce86b56d"
+    "gitHead": "684d9c742633e0274f74f464722b4707cc80d7fa"
 }