react-wavesurfer
Version:
React component wrapper for wavesurfer.js
2 lines • 9.49 kB
JavaScript
!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o(require("wavesurfer.js"),require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["wavesurfer","react","prop-types"],o):"object"==typeof exports?exports.Wavesurfer=o(require("wavesurfer.js"),require("react"),require("prop-types")):e.Wavesurfer=o(e.WaveSurfer,e.React,e["prop-types"])}(this,function(e,o,t){return function(e){function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}var t={};return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},o.p="",o(o.s=0)}([function(e,o,t){"use strict";(function(e){function r(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,t){var r=e[o];return void 0!==r&&("number"!=typeof r||r!==parseInt(r,10)||r<0)?new Error("Invalid "+o+" supplied to "+t+",\n expected a positive integer"):null}Object.defineProperty(o,"__esModule",{value:!0});var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p=function(){function e(e,o){for(var t=0;t<o.length;t++){var r=o[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(o,t,r){return t&&e(o.prototype,t),r&&e(o,r),o}}(),f=t(2),d=r(f),c=t(3),v=r(c),h=t(4),y=r(h),w=["audioprocess","error","finish","loading","mouseup","pause","play","ready","scroll","seek","zoom"],m=function(e){return function(){var o=void 0;o||(o=setTimeout(function(){o=null,e()},66))}},b=function(o){function t(o){n(this,t);var r=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,o));if(r.state={isReady:!1},void 0===(void 0===e?"undefined":l(e)))throw new Error("WaveSurfer is undefined!");return r._wavesurfer=Object.create(e),r._loadMediaElt=r._loadMediaElt.bind(r),r._loadAudio=r._loadAudio.bind(r),r._seekTo=r._seekTo.bind(r),r.props.responsive&&(r._handleResize=m(function(){r.props.playing&&r._wavesurfer.pause(),r._wavesurfer.drawBuffer(),r.state.isReady&&r._seekTo(r.props.pos),r.props.playing&&r._wavesurfer.play()})),r}return s(t,o),p(t,[{key:"componentDidMount",value:function(){var e=this,o=(0,y.default)({},this.props.options,{container:this.wavesurferEl});this.props.mediaElt&&(o.backend="MediaElement"),this._wavesurfer.init(o),this._wavesurfer.on("ready",function(){e.setState({isReady:!0,pos:e.props.pos}),e.props.pos&&e._seekTo(e.props.pos),e.props.volume&&e._wavesurfer.setVolume(e.props.volume),e.props.playing&&e._wavesurfer.play(),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){if(e.state.isReady){var t=e._posToSec(o);e.setState({formattedPos:t}),e.props.onPosChange({wavesurfer:e._wavesurfer,originalArgs:[t]})}}),w.forEach(function(o){var t=e.props["on"+a(o)],r=e._wavesurfer;t&&e._wavesurfer.on(o,function(){for(var e=arguments.length,o=Array(e),n=0;n<e;n++)o[n]=arguments[n];t({wavesurfer:r,originalArgs:o})})}),this.props.audioFile&&this._loadAudio(this.props.audioFile,this.props.audioPeaks),this.props.mediaElt&&this._loadMediaElt(this.props.mediaElt,this.props.audioPeaks),this.props.responsive&&window.addEventListener("resize",this._handleResize,!1)}},{key:"componentWillReceiveProps",value:function(e){var o=this,t=!1,r=void 0;this.props.audioFile!==e.audioFile&&(this.setState({isReady:!1}),this._loadAudio(e.audioFile,e.audioPeaks),t=!0),this.props.mediaElt!==e.mediaElt&&(this.setState({isReady:!1}),this._loadMediaElt(e.mediaElt,e.audioPeaks),t=!0),this.props.audioPeaks!==e.audioPeaks&&(e.mediaElt?this._loadMediaElt(e.mediaElt,e.audioPeaks):this._loadAudio(e.audioFile,e.audioPeaks)),void 0!==e.pos&&this.state.isReady&&e.pos!==this.props.pos&&e.pos!==this.state.pos&&(t?r=this._wavesurfer.on("ready",function(){o._seekTo(e.pos),r.un()}):this._seekTo(e.pos)),t||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),this.props.options.audioRate!==e.options.audioRate&&this._wavesurfer.setPlaybackRate(e.options.audioRate),e.responsive&&this.props.responsive!==e.responsive&&window.addEventListener("resize",this._handleResize,!1),e.responsive||this.props.responsive===e.responsive||window.removeEventListener("resize",this._handleResize)}},{key:"componentWillUnmount",value:function(){var e=this;w.forEach(function(o){e._wavesurfer.un(o)}),this._wavesurfer.destroy(),this.props.responsive&&window.removeEventListener("resize",this._handleResize)}},{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 window.HTMLElement)this._loadAudio(e,o);else{if(!window.document.querySelector(e))throw new Error("Media Element not found!");this._loadAudio(window.document.querySelector(e),o)}}},{key:"_loadAudio",value:function(e,o){if(e instanceof window.HTMLElement)this._wavesurfer.loadMediaElement(e,o);else if("string"==typeof e)this._wavesurfer.load(e,o);else{if(!(e instanceof window.Blob||e instanceof window.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&&d.default.Children.map(this.props.children,function(o){return d.default.cloneElement(o,{wavesurfer:e._wavesurfer,isReady:e.state.isReady})});return d.default.createElement("div",null,d.default.createElement("div",{ref:function(o){e.wavesurferEl=o}}),o)}}]),t}(f.Component);b.propTypes={playing:v.default.bool,pos:v.default.number,audioFile:function(e,o,t){var r=e[o];return!r||"string"==typeof r||r instanceof window.Blob||r instanceof window.File?null:new Error("Invalid "+o+" supplied to "+t+"\n expected either string or file/blob")},mediaElt:v.default.oneOfType([v.default.string,v.default.instanceOf(window.HTMLElement)]),audioPeaks:v.default.array,volume:v.default.number,zoom:v.default.number,responsive:v.default.bool,onPosChange:v.default.func,children:v.default.oneOfType([v.default.element,v.default.array]),options:v.default.shape({audioRate:v.default.number,backend:v.default.oneOf(["WebAudio","MediaElement"]),barWidth:function(e,o,t){var r=e[o];return void 0!==r&&"number"!=typeof r?new Error("Invalid "+o+" supplied to "+t+"\n expected either undefined or number"):null},cursorColor:v.default.string,cursorWidth:u,dragSelection:v.default.bool,fillParent:v.default.bool,height:u,hideScrollbar:v.default.bool,interact:v.default.bool,loopSelection:v.default.bool,mediaControls:v.default.bool,minPxPerSec:u,normalize:v.default.bool,pixelRatio:v.default.number,progressColor:v.default.string,scrollParent:v.default.bool,skipLength:v.default.number,waveColor:v.default.oneOfType([v.default.string,v.default.instanceOf(window.CanvasGradient)]),autoCenter:v.default.bool})},b.defaultProps={playing:!1,pos:0,options:e.defaultParams,responsive:!0,onPosChange:function(){}},o.default=b}).call(o,t(1))},function(o,t){o.exports=e},function(e,t){e.exports=o},function(e,o){e.exports=t},function(e,o,t){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Sources cannot be null or undefined");return Object(e)}function n(e,o,t){var r=o[t];if(void 0!==r&&null!==r){if(a.call(e,t)&&(void 0===e[t]||null===e[t]))throw new TypeError("Cannot convert undefined or null to object ("+t+")");a.call(e,t)&&s(r)?e[t]=i(Object(e[t]),o[t]):e[t]=r}}function i(e,o){if(e===o)return e;o=Object(o);for(var t in o)a.call(o,t)&&n(e,o,t);if(Object.getOwnPropertySymbols)for(var r=Object.getOwnPropertySymbols(o),i=0;i<r.length;i++)u.call(o,r[i])&&n(e,o,r[i]);return e}var s=t(5),a=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;e.exports=function(e){e=r(e);for(var o=1;o<arguments.length;o++)i(e,arguments[o]);return e}},function(e,o,t){"use strict";e.exports=function(e){var o=typeof e;return null!==e&&("object"===o||"function"===o)}}])});
//# sourceMappingURL=react-wavesurfer.min.js.map