react-wavesurfer
Version:
React component wrapper for wavesurfer.js
1 lines • 8.14 kB
JavaScript
!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o(require("react"),require("wavesurfer.js")):"function"==typeof define&&define.amd?define(["react","wavesurfer"],o):"object"==typeof exports?exports.Wavesurfer=o(require("react"),require("wavesurfer.js")):e.Wavesurfer=o(e.React,e.WaveSurfer)}(this,function(e,o){return function(e){function o(t){if(r[t])return r[t].exports;var n=r[t]={exports:{},id:t,loaded:!1};return e[t].call(n.exports,n,n.exports,o),n.loaded=!0,n.exports}var r={};return o.m=e,o.c=r,o.p="",o(0)}([function(e,o,r){"use strict";function t(e){return e&&e.__esModule?e:{"default":e}}function n(e,o){if(!(e instanceof o))throw new TypeError("Cannot call a class as a function")}function i(e,o){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!o||"object"!=typeof o&&"function"!=typeof o?e:o}function s(e,o){if("function"!=typeof o&&null!==o)throw new TypeError("Super expression must either be null or a function, not "+typeof o);e.prototype=Object.create(o&&o.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),o&&(Object.setPrototypeOf?Object.setPrototypeOf(e,o):e.__proto__=o)}function a(e){return e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")}function u(e,o,r){var t=e[o];return void 0!==t&&("number"!=typeof t||t!==parseInt(t,10)||t<0)?new Error("Invalid "+o+" supplied to "+r+",\n expected a positive integer"):null}Object.defineProperty(o,"__esModule",{value:!0});var p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},l=function(){function e(e,o){for(var r=0;r<o.length;r++){var t=o[r];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}return function(o,r,t){return r&&e(o.prototype,r),t&&e(o,t),o}}(),f=r(3),c=t(f),d=r(1),y=t(d),v=r(4),h=["audioprocess","error","finish","loading","mouseup","pause","play","ready","scroll","seek","zoom"],m=function(e){function o(e){n(this,o);var r=i(this,Object.getPrototypeOf(o).call(this,e));if(r.state={pos:0},void 0===("undefined"==typeof v?"undefined":p(v)))throw new Error("WaveSurfer is undefined!");return r._wavesurfer=Object.create(v),r._isReady=!1,r._loadMediaElt=r._loadMediaElt.bind(r),r._loadAudio=r._loadAudio.bind(r),r._seekTo=r._seekTo.bind(r),r}return s(o,e),l(o,[{key:"componentDidMount",value:function(){var e=this,o=(0,y["default"])({},this.props.options,{container:this.refs.wavesurfer});this.props.mediaElt&&(o.backend="MediaElement"),this._wavesurfer.init(o),this._wavesurfer.on("ready",function(){e._isReady=!0,e.props.pos&&e._seekTo(e.props.pos),e.props.volume&&e._wavesurfer.setVolume(e.props.volume),e.props.zoom&&e._wavesurfer.zoom(e.props.zoom)}),this._wavesurfer.on("audioprocess",function(o){e.setState({pos:o}),e.props.onPosChange({wavesurfer:e._wavesurfer,originalArgs:[o]})}),this._wavesurfer.on("seek",function(o){var r=e._posToSec(o);e.setState({formattedPos:r}),e.props.onPosChange({wavesurfer:e._wavesurfer,originalArgs:[r]})}),h.forEach(function(o){var r=e.props["on"+a(o)],t=e._wavesurfer;r&&e._wavesurfer.on(o,function(){for(var e=arguments.length,o=Array(e),n=0;n<e;n++)o[n]=arguments[n];r({wavesurfer:t,originalArgs:o})})}),this.props.audioFile&&this._loadAudio(this.props.audioFile,this.props.audioPeaks),this.props.mediaElt&&this._loadMediaElt(this.props.mediaElt,this.props.audioPeaks)}},{key:"componentWillReceiveProps",value:function(e){this.props.audioFile!==e.audioFile&&this._loadAudio(e.audioFile,e.audioPeaks),this.props.mediaElt!==e.mediaElt&&this._loadMediaElt(e.mediaElt,e.audioPeaks),this.props.audioPeaks!==e.audioPeaks&&(e.mediaElt?this._loadMediaElt(e.mediaElt,e.audioPeaks):this._loadAudio(e.audioFile,e.audioPeaks)),e.pos&&this._isReady&&e.pos!==this.props.pos&&e.pos!==this.state.pos&&this._seekTo(e.pos),this.props.playing===e.playing&&this._wavesurfer.isPlaying()===e.playing||(e.playing?this._wavesurfer.play():this._wavesurfer.pause()),this.props.volume!==e.volume&&this._wavesurfer.setVolume(e.volume),this.props.zoom!==e.zoom&&this._wavesurfer.zoom(e.zoom)}},{key:"shouldComponentUpdate",value:function(){return!1}},{key:"componentWillUnmount",value:function(){var e=this;h.forEach(function(o){e._wavesurfer.un(o)}),this._wavesurfer.destroy()}},{key:"_secToPos",value:function(e){return 1/this._wavesurfer.getDuration()*e}},{key:"_posToSec",value:function(e){return e*this._wavesurfer.getDuration()}},{key:"_seekTo",value:function(e){var o=this._secToPos(e);this.props.options.autoCenter?this._wavesurfer.seekAndCenter(o):this._wavesurfer.seekTo(o)}},{key:"_loadMediaElt",value:function(e,o){if(e instanceof HTMLElement)this._loadAudio(e,o);else{if(!document.querySelector(e))throw new Error("Media Element not found!");this._loadAudio(document.querySelector(e),o)}}},{key:"_loadAudio",value:function(e,o){if(e instanceof HTMLElement)this._wavesurfer.loadMediaElement(e,o);else if("string"==typeof e)this._wavesurfer.load(e,o);else{if(!(e instanceof Blob||e instanceof File))throw new Error("Wavesurfer._loadAudio expects prop audioFile\n to be either HTMLElement, string or file/blob");this._wavesurfer.loadBlob(e,o)}}},{key:"render",value:function(){var e=this,o=!!this.props.children&&c["default"].Children.map(this.props.children,function(o){return c["default"].cloneElement(o,{wavesurfer:e._wavesurfer,isReady:e._isReady})});return c["default"].createElement("div",null,c["default"].createElement("div",{ref:"wavesurfer"}),o)}}]),o}(f.Component);m.propTypes={playing:f.PropTypes.bool,pos:f.PropTypes.number,audioFile:function(e,o,r){var t=e[o];return t&&"string"!=typeof t&&!t instanceof Blob&&!t instanceof File?new Error("Invalid "+o+" supplied to "+r+"\n expected either string or file/blob"):null},mediaElt:f.PropTypes.oneOfType([f.PropTypes.string,f.PropTypes.instanceOf(HTMLElement)]),audioPeaks:f.PropTypes.array,volume:f.PropTypes.number,zoom:f.PropTypes.number,onPosChange:f.PropTypes.func,children:f.PropTypes.oneOfType([f.PropTypes.element,f.PropTypes.array]),options:f.PropTypes.shape({audioRate:f.PropTypes.number,backend:f.PropTypes.oneOf(["WebAudio","MediaElement"]),barWidth:function(e,o,r){var t=e[o];return void 0!==t&&"number"!=typeof t?new Error("Invalid "+o+" supplied to "+r+"\n expected either undefined or number"):null},cursorColor:f.PropTypes.string,cursorWidth:u,dragSelection:f.PropTypes.bool,fillParent:f.PropTypes.bool,height:u,hideScrollbar:f.PropTypes.bool,interact:f.PropTypes.bool,loopSelection:f.PropTypes.bool,mediaControls:f.PropTypes.bool,minPxPerSec:u,normalize:f.PropTypes.bool,pixelRatio:f.PropTypes.number,progressColor:f.PropTypes.string,scrollParent:f.PropTypes.bool,skipLength:f.PropTypes.number,waveColor:f.PropTypes.string,autoCenter:f.PropTypes.bool})},m.defaultProps={playing:!1,pos:0,options:v.defaultParams,onPosChange:function(){}},o["default"]=m},function(e,o,r){"use strict";function t(e){if(null===e||void 0===e)throw new TypeError("Sources cannot be null or undefined");return Object(e)}function n(e,o,r){var t=o[r];if(void 0!==t&&null!==t){if(a.call(e,r)&&(void 0===e[r]||null===e[r]))throw new TypeError("Cannot convert undefined or null to object ("+r+")");a.call(e,r)&&s(t)?e[r]=i(Object(e[r]),o[r]):e[r]=t}}function i(e,o){if(e===o)return e;o=Object(o);for(var r in o)a.call(o,r)&&n(e,o,r);if(Object.getOwnPropertySymbols)for(var t=Object.getOwnPropertySymbols(o),i=0;i<t.length;i++)u.call(o,t[i])&&n(e,o,t[i]);return e}var s=r(2),a=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;e.exports=function(e){e=t(e);for(var o=1;o<arguments.length;o++)i(e,arguments[o]);return e}},function(e,o){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};e.exports=function(e){var o="undefined"==typeof e?"undefined":r(e);return null!==e&&("object"===o||"function"===o)}},function(o,r){o.exports=e},function(e,r){e.exports=o}])});