react-audio-play - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react"),n=function(){return n=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z",t="M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z",o="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",a="M0 0h6v24H0zM12 0h6v24h-6z",i="M18 12L0 24V0",c=function(e){var n=Math.floor(e/60),r=Math.floor(e%60);return n+":"+(r<10?"0"+r:r)};var l=function(e,n){var r,t,o,a=e.target;return"click"===e.type&&(o=a,-1!==Array.from(o.classList).indexOf("rap-pin"))&&(null===(r=null==a?void 0:a.parentElement)||void 0===r?void 0:r.parentElement)&&(a=a.parentElement.parentElement),"mousemove"===e.type&&(null===(t=null==n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)&&(a=n.parentElement.parentElement),a},u=function(){return p()?{move:"touchmove",up:"touchend"}:{move:"mousemove",up:"mouseup"}},p=function(){return"ontouchstart"in window||navigator.maxTouchPoints},s=[],d=[];!function(e,n){if(e&&"undefined"!=typeof document){var r,t=!0===n.prepend?"prepend":"append",o=!0===n.singleTag,a="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(o){var i=s.indexOf(a);-1===i&&(i=s.push(a)-1,d[i]={}),r=d[i]&&d[i][t]?d[i][t]:d[i][t]=c()}else r=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var r=Object.keys(n.attributes),o=0;o<r.length;o++)e.setAttribute(r[o],n.attributes[r[o]]);var i="prepend"===t?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}}(".rap-container {\n  max-width: 400px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container:focus {\n  outline: none;\n}\n.rap-container .rap-current-time,\n.rap-container .rap-total-time {\n  min-width: 40px;\n}\n.rap-container .rap-total-time {\n  text-align: right;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url('data:image/png;base64,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');\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n",{});exports.AudioPlayer=function(p){var s,d=p.autoPlay,m=void 0!==d&&d,v=p.className,f=void 0===v?"":v,h=p.src,g=p.loop,w=void 0!==g&&g,x=p.preload,E=void 0===x?"auto":x,b=p.backgroundColor,A=p.color,k=p.width,y=p.style,N=p.sliderColor,R=p.volume,C=void 0===R?100:R,S=p.volumePlacement,T=void 0===S?"top":S,z=p.hasKeyBindings,M=void 0===z||z,L=p.onPlay,D=p.onPause,P=p.onEnd,U=p.onError,I=e.useRef(null),K=e.useRef(null),B=e.useRef(null),O=e.useRef(null),Y=e.useState("none"===E),F=Y[0],G=Y[1],W=e.useState(!1),X=W[0],j=W[1],J=e.useState(0),H=J[0],Z=J[1],V=e.useState("0:00"),Q=V[0],q=V[1],_=e.useState("--:--"),$=_[0],ee=_[1],ne=e.useState(!1),re=ne[0],te=ne[1],oe=e.useState(100),ae=oe[0],ie=oe[1],ce=e.useState(function(e){if((e=isNaN(e)?100:Math.max(0,Math.min(e,100)))>=50)return r;if(e>5)return t;return o}(C)),le=ce[0],ue=ce[1],pe=e.useState(0),se=pe[0],de=pe[1],me=e.useState(!1),ve=me[0],fe=me[1];e.useEffect((function(){ge()}),[h]),e.useEffect((function(){var e;(null===(e=I.current)||void 0===e?void 0:e.duration)&&I.current.duration!==1/0&&ee(c(I.current.duration))}),[null===(s=I.current)||void 0===s?void 0:s.duration]),e.useEffect((function(){if(!isNaN(C)){var e=C>100?100:C<0?0:C;ie(e),I.current&&(I.current.volume=e/100)}}),[C]);var he=function(){return I.current?I.current.duration!==1/0?I.current.duration:I.current.buffered.end(0):0},ge=function(){I.current&&(j(!1),ee("--:--"),G(!1),fe(!1),I.current.src=h,I.current.load())};var we=function(){I.current&&("none"!==E||I.current.duration||G(!1),I.current.paused?(I.current.play(),j(!0),L&&L()):(I.current.pause(),j(!1),D&&D()))},xe=function(e){var n=l(e,K.current),r=n.getBoundingClientRect();if("horizontal"===n.dataset.direction){var t="touches"in e?e.touches[0].clientX:e.clientX;if(t-r.left<0||t-r.right>0)return!1}else{var o=r.top,a=o+n.offsetHeight,i="touches"in e?e.touches[0].clientY:e.clientY;if(i<o||i>a)return!1}return!0};function Ee(e){var n=l(e,K.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(("touches"in e?e.touches[0].clientX:e.clientX)-r.left)/n.clientWidth;else if("vertical"===n.dataset.direction){var o="touches"in e?e.touches[0].clientY:e.clientY,a=n.clientHeight;t=1-(o-r.top)/a}return t}var be=function(e){xe(e)&&I.current&&("none"!==E||I.current.duration?I.current.duration&&(I.current.currentTime=he()*Ee(e)):(G(!1),I.current.load(),de(Ee(e))))},Ae=function(e){xe(e)&&I.current&&(I.current.volume=Ee(e))},ke=function(){K.current=B.current;var e=u();window.addEventListener(e.move,be,!1),window.addEventListener(e.up,(function(){K.current=null,window.removeEventListener(e.move,be,!1)}),{once:!0})},ye=function(){K.current=O.current;var e=u();window.addEventListener(e.move,Ae,!1),window.addEventListener(e.up,(function(){K.current=null,window.removeEventListener(e.move,Ae,!1)}),!1)},Ne=function(e){if(I.current){var n=I.current.currentTime+he()*(e/100);I.current.currentTime=Math.min(n,he())}},Re=function(e){I.current&&(I.current.volume=Math.max(0,Math.min(1,I.current.volume+e)))};return e.createElement("div",{tabIndex:-1,onKeyDown:function(e){if(M)switch(e.preventDefault(),e.key){case"ArrowLeft":Ne(-5);break;case"ArrowRight":Ne(5);break;case"ArrowUp":Re(.05);break;case"ArrowDown":Re(-.05);break;case" ":we()}},className:"rap-container ".concat(f),style:n(n(n(n({},b?{backgroundColor:b}:{}),A?{color:A}:{}),k?{width:k,maxWidth:k}:{}),y)},ve&&e.createElement("span",{title:"An error has occurred",className:"rap-pp-button",onClick:ge},e.createElement("svg",{width:"24px",height:"24px",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"rap-pp-icon"},e.createElement("path",{fill:null!=A?A:"#566574",d:"M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"}))),!F&&!ve&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),F&&!ve&&e.createElement("div",{className:"rap-pp-button",onClick:function(){return we()}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"24",viewBox:"0 0 18 24",className:"rap-pp-icon"},e.createElement("path",{fill:null!=A?A:"#566574",fillRule:"evenodd",d:X?a:i}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},Q),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:ke,onTouchStart:ke,onClick:be},e.createElement("div",{className:"rap-progress",style:n({width:H+"%"},N?{backgroundColor:N}:{})},e.createElement("div",{ref:B,className:"rap-pin","data-method":"rewind",onMouseDown:ke,onTouchStart:ke,style:N?{backgroundColor:N}:{}}))),"--:--"!==$&&e.createElement("span",{className:"rap-total-time"},$)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn ".concat(re?"rap-volume-open":""),onClick:function(){return te((function(e){return!e}))}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("path",{fill:re?null!=N?N:"#007FFF":null!=A?A:"#566574",fillRule:"evenodd",d:le}))),e.createElement("div",{className:"".concat("bottom"===T?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(re?"":"rap-hidden")},e.createElement("div",{className:"rap-volume-controls",onClick:function(e){e.preventDefault(),e.stopPropagation()}},e.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:Ae,onMouseDown:ye,onTouchStart:ye},e.createElement("div",{className:"rap-progress",style:n({height:"".concat(ae,"%")},N?{backgroundColor:N}:{})},e.createElement("div",{ref:O,className:"rap-pin","data-method":"changeVolume",style:N?{backgroundColor:N}:{},onMouseDown:ye,onTouchStart:ye})))),e.createElement("div",{className:"rap-backdrop",onClick:function(){return te(!1)}}))),e.createElement("audio",{loop:w,ref:I,preload:E,autoPlay:m,onPlay:function(){j(!0)},onEnded:function(){j(!1),I.current&&(I.current.currentTime=0,"--:--"===$&&ge(),P&&P())},onError:function(e){if(G(!0),fe(!0),U){var n=e.target.error,r="An unknown error occurred.";if(null==n?void 0:n.code)switch(null==n?void 0:n.code){case n.MEDIA_ERR_ABORTED:r="The media playback was aborted.";break;case n.MEDIA_ERR_NETWORK:r="A network error caused the media to fail.";break;case n.MEDIA_ERR_DECODE:r="The media playback was aborted due to a decoding error.";break;case n.MEDIA_ERR_SRC_NOT_SUPPORTED:r="The media source format is not supported.";break;default:r="An unknown error occurred."}U(e,r)}},onCanPlay:function(){G(!0)},onLoadedMetadata:function(){var e,n,r;if((null===(e=I.current)||void 0===e?void 0:e.duration)&&(null===(n=I.current)||void 0===n?void 0:n.duration)!==1/0){ee(c(null!==(r=I.current.duration)&&void 0!==r?r:0));var t=I.current.duration*se;I.current.currentTime=t}},onTimeUpdate:function(){if(I.current){var e=I.current.currentTime,n=e/he()*100;Z(n),q(c(e))}},onVolumeChange:function(){I.current&&(ie(100*I.current.volume),I.current.volume>=.5?ue(r):I.current.volume<.5&&I.current.volume>.05?ue(t):I.current.volume<=.05&&ue(o))}},e.createElement("source",{src:h,type:"audio/mpeg"})))};
+"use strict";var e=require("react"),n=function(){return n=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z",t="M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z",o="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",a="M0 0h6v24H0zM12 0h6v24h-6z",i="M18 12L0 24V0",c=function(e){var n=Math.floor(e/60),r=Math.floor(e%60);return n+":"+(r<10?"0"+r:r)};var u=function(e,n){var r,t,o,a=e.target;return"click"===e.type&&(o=a,-1!==Array.from(o.classList).indexOf("rap-pin"))&&(null===(r=null==a?void 0:a.parentElement)||void 0===r?void 0:r.parentElement)&&(a=a.parentElement.parentElement),"mousemove"===e.type&&(null===(t=null==n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)&&(a=n.parentElement.parentElement),a},l=function(){return p()?{move:"touchmove",up:"touchend"}:{move:"mousemove",up:"mouseup"}},p=function(){return"ontouchstart"in window||navigator.maxTouchPoints},s=[],d=[];!function(e,n){if(e&&"undefined"!=typeof document){var r,t=!0===n.prepend?"prepend":"append",o=!0===n.singleTag,a="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(o){var i=s.indexOf(a);-1===i&&(i=s.push(a)-1,d[i]={}),r=d[i]&&d[i][t]?d[i][t]:d[i][t]=c()}else r=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var r=Object.keys(n.attributes),o=0;o<r.length;o++)e.setAttribute(r[o],n.attributes[r[o]]);var i="prepend"===t?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}}(".rap-container {\n  max-width: 400px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container:focus {\n  outline: none;\n}\n.rap-container .rap-current-time,\n.rap-container .rap-total-time {\n  min-width: 40px;\n}\n.rap-container .rap-total-time {\n  text-align: right;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url('data:image/png;base64,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');\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n",{});var m=e.forwardRef((function(p,s){var d,m=p.autoPlay,v=void 0!==m&&m,f=p.className,h=void 0===f?"":f,g=p.src,w=p.loop,x=void 0!==w&&w,E=p.preload,b=void 0===E?"auto":E,A=p.backgroundColor,k=p.color,y=p.width,R=p.style,N=p.sliderColor,C=p.volume,S=void 0===C?100:C,T=p.volumePlacement,z=void 0===T?"top":T,M=p.hasKeyBindings,L=void 0===M||M,P=p.onPlay,D=p.onPause,U=p.onEnd,I=p.onError,K=e.useRef(null),B=e.useRef(null),O=e.useRef(null),Y=e.useRef(null),F=e.useRef(null),G=e.useState("none"===b),W=G[0],X=G[1],j=e.useState(!1),H=j[0],J=j[1],Z=e.useState(0),V=Z[0],Q=Z[1],q=e.useState("0:00"),_=q[0],$=q[1],ee=e.useState("--:--"),ne=ee[0],re=ee[1],te=e.useState(!1),oe=te[0],ae=te[1],ie=e.useState(100),ce=ie[0],ue=ie[1],le=e.useState(function(e){if((e=isNaN(e)?100:Math.max(0,Math.min(e,100)))>=50)return r;if(e>5)return t;return o}(S)),pe=le[0],se=le[1],de=e.useState(0),me=de[0],ve=de[1],fe=e.useState(!1),he=fe[0],ge=fe[1];e.useEffect((function(){xe()}),[g]),e.useEffect((function(){var e;(null===(e=B.current)||void 0===e?void 0:e.duration)&&B.current.duration!==1/0&&re(c(B.current.duration))}),[null===(d=B.current)||void 0===d?void 0:d.duration]),e.useEffect((function(){if(!isNaN(S)){var e=S>100?100:S<0?0:S;ue(e),B.current&&(B.current.volume=e/100)}}),[S]),e.useImperativeHandle(s,(function(){return{play:function(){be()},pause:function(){Ae()},stop:function(){ke()},focus:function(){ye()}}}));var we=function(){return B.current?B.current.duration!==1/0?B.current.duration:B.current.buffered.end(0):0},xe=function(){B.current&&(J(!1),re("--:--"),X(!1),ge(!1),B.current.src=g,B.current.load())};var Ee=function(){B.current&&("none"!==b||B.current.duration||X(!1),B.current.paused?be():Ae())},be=function(){var e;he?xe():(null===(e=B.current)||void 0===e||e.play(),J(!0),P&&P())},Ae=function(){var e;null===(e=B.current)||void 0===e||e.pause(),J(!1),D&&D()},ke=function(){B.current&&(B.current.pause(),J(!1),B.current.currentTime=0)},ye=function(){var e;null===(e=K.current)||void 0===e||e.focus()},Re=function(e){var n=u(e,O.current),r=n.getBoundingClientRect();if("horizontal"===n.dataset.direction){var t="touches"in e?e.touches[0].clientX:e.clientX;if(t-r.left<0||t-r.right>0)return!1}else{var o=r.top,a=o+n.offsetHeight,i="touches"in e?e.touches[0].clientY:e.clientY;if(i<o||i>a)return!1}return!0};function Ne(e){var n=u(e,O.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(("touches"in e?e.touches[0].clientX:e.clientX)-r.left)/n.clientWidth;else if("vertical"===n.dataset.direction){var o="touches"in e?e.touches[0].clientY:e.clientY,a=n.clientHeight;t=1-(o-r.top)/a}return t}var Ce=function(e){Re(e)&&B.current&&("none"!==b||B.current.duration?B.current.duration&&(B.current.currentTime=we()*Ne(e)):(X(!1),B.current.load(),ve(Ne(e))))},Se=function(e){Re(e)&&B.current&&(B.current.volume=Ne(e))},Te=function(){O.current=Y.current;var e=l();window.addEventListener(e.move,Ce,!1),window.addEventListener(e.up,(function(){O.current=null,window.removeEventListener(e.move,Ce,!1)}),{once:!0})},ze=function(){O.current=F.current;var e=l();window.addEventListener(e.move,Se,!1),window.addEventListener(e.up,(function(){O.current=null,window.removeEventListener(e.move,Se,!1)}),!1)},Me=function(e){if(B.current){var n=B.current.currentTime+we()*(e/100);B.current.currentTime=Math.min(n,we())}},Le=function(e){B.current&&(B.current.volume=Math.max(0,Math.min(1,B.current.volume+e)))};return e.createElement("div",{ref:K,tabIndex:-1,onKeyDown:function(e){if(L)switch(e.preventDefault(),e.key){case"ArrowLeft":Me(-5);break;case"ArrowRight":Me(5);break;case"ArrowUp":Le(.05);break;case"ArrowDown":Le(-.05);break;case" ":Ee()}},className:"rap-container ".concat(h),style:n(n(n(n({},A?{backgroundColor:A}:{}),k?{color:k}:{}),y?{width:y,maxWidth:y}:{}),R)},he&&e.createElement("span",{title:"An error has occurred",className:"rap-pp-button",onClick:xe},e.createElement("svg",{width:"24px",height:"24px",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"rap-pp-icon"},e.createElement("path",{fill:null!=k?k:"#566574",d:"M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"}))),!W&&!he&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),W&&!he&&e.createElement("div",{className:"rap-pp-button",onClick:function(){return Ee()}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"24",viewBox:"0 0 18 24",className:"rap-pp-icon"},e.createElement("path",{fill:null!=k?k:"#566574",fillRule:"evenodd",d:H?a:i}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},_),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:Te,onTouchStart:Te,onClick:Ce},e.createElement("div",{className:"rap-progress",style:n({width:V+"%"},N?{backgroundColor:N}:{})},e.createElement("div",{ref:Y,className:"rap-pin","data-method":"rewind",onMouseDown:Te,onTouchStart:Te,style:N?{backgroundColor:N}:{}}))),"--:--"!==ne&&e.createElement("span",{className:"rap-total-time"},ne)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn ".concat(oe?"rap-volume-open":""),onClick:function(){return ae((function(e){return!e}))}},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("path",{fill:oe?null!=N?N:"#007FFF":null!=k?k:"#566574",fillRule:"evenodd",d:pe}))),e.createElement("div",{className:"".concat("bottom"===z?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(oe?"":"rap-hidden")},e.createElement("div",{className:"rap-volume-controls",onClick:function(e){e.preventDefault(),e.stopPropagation()}},e.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:Se,onMouseDown:ze,onTouchStart:ze},e.createElement("div",{className:"rap-progress",style:n({height:"".concat(ce,"%")},N?{backgroundColor:N}:{})},e.createElement("div",{ref:F,className:"rap-pin","data-method":"changeVolume",style:N?{backgroundColor:N}:{},onMouseDown:ze,onTouchStart:ze})))),e.createElement("div",{className:"rap-backdrop",onClick:function(){return ae(!1)}}))),e.createElement("audio",{loop:x,ref:B,preload:b,autoPlay:v,onPlay:function(){J(!0)},onEnded:function(){J(!1),B.current&&(B.current.currentTime=0,"--:--"===ne&&xe(),U&&U())},onError:function(e){if(X(!0),ge(!0),I){var n=e.target.error,r="An unknown error occurred.";if(null==n?void 0:n.code)switch(null==n?void 0:n.code){case n.MEDIA_ERR_ABORTED:r="The media playback was aborted.";break;case n.MEDIA_ERR_NETWORK:r="A network error caused the media to fail.";break;case n.MEDIA_ERR_DECODE:r="The media playback was aborted due to a decoding error.";break;case n.MEDIA_ERR_SRC_NOT_SUPPORTED:r="The media source format is not supported.";break;default:r="An unknown error occurred."}I(e,r)}},onCanPlay:function(){X(!0)},onLoadedMetadata:function(){var e,n,r;if((null===(e=B.current)||void 0===e?void 0:e.duration)&&(null===(n=B.current)||void 0===n?void 0:n.duration)!==1/0){re(c(null!==(r=B.current.duration)&&void 0!==r?r:0));var t=B.current.duration*me;B.current.currentTime=t}},onTimeUpdate:function(){if(B.current){var e=B.current.currentTime,n=e/we()*100;Q(n),$(c(e))}},onVolumeChange:function(){B.current&&(ue(100*B.current.volume),B.current.volume>=.5?se(r):B.current.volume<.5&&B.current.volume>.05?se(t):B.current.volume<=.05&&se(o))}},e.createElement("source",{src:g,type:"audio/mpeg"})))}));m.displayName="AudioPlayer",exports.AudioPlayer=m;
 //# sourceMappingURL=index.js.map

dist/cjs/types/src/components/AudioPlayer.d.ts

 import React from 'react';
+import { AudioInterface, AudioPlayerRef } from './core.interface';
 import './audioPlay.css';
-export interface AudioInterface {
-    autoPlay?: boolean;
-    className?: string;
-    src: string;
-    loop?: boolean;
-    preload?: 'auto' | 'metadata' | 'none';
-    backgroundColor?: string;
-    color?: string;
-    width?: number | string;
-    style?: React.CSSProperties;
-    sliderColor?: string;
-    volume?: number;
-    volumePlacement?: 'top' | 'bottom';
-    hasKeyBindings?: boolean;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnd?: () => void;
-    onError?: (event: React.SyntheticEvent<HTMLAudioElement, Event>, errorMessage: string) => void;
-}
-export declare const AudioPlayer: React.FC<AudioInterface>;
+export declare const AudioPlayer: React.ForwardRefExoticComponent<AudioInterface & React.RefAttributes<AudioPlayerRef | undefined>>;

dist/cjs/types/src/components/index.d.ts

 export * from './AudioPlayer';
+export * from './core.interface';

dist/esm/index.js

@@ -1,2 +0,2 @@
-import n,{useRef as e,useState as r,useEffect as t}from"react";var o=function(){return o=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},o.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var a="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z",i="M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z",c="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",l="M0 0h6v24H0zM12 0h6v24h-6z",u="M18 12L0 24V0",p=function(n){var e=Math.floor(n/60),r=Math.floor(n%60);return e+":"+(r<10?"0"+r:r)};var s=function(n,e){var r,t,o,a=n.target;return"click"===n.type&&(o=a,-1!==Array.from(o.classList).indexOf("rap-pin"))&&(null===(r=null==a?void 0:a.parentElement)||void 0===r?void 0:r.parentElement)&&(a=a.parentElement.parentElement),"mousemove"===n.type&&(null===(t=null==e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement)&&(a=e.parentElement.parentElement),a},d=function(){return m()?{move:"touchmove",up:"touchend"}:{move:"mousemove",up:"mouseup"}},m=function(){return"ontouchstart"in window||navigator.maxTouchPoints},v=[],h=[];!function(n,e){if(n&&"undefined"!=typeof document){var r,t=!0===e.prepend?"prepend":"append",o=!0===e.singleTag,a="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(o){var i=v.indexOf(a);-1===i&&(i=v.push(a)-1,h[i]={}),r=h[i]&&h[i][t]?h[i][t]:h[i][t]=c()}else r=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),r.styleSheet?r.styleSheet.cssText+=n:r.appendChild(document.createTextNode(n))}function c(){var n=document.createElement("style");if(n.setAttribute("type","text/css"),e.attributes)for(var r=Object.keys(e.attributes),o=0;o<r.length;o++)n.setAttribute(r[o],e.attributes[r[o]]);var i="prepend"===t?"afterbegin":"beforeend";return a.insertAdjacentElement(i,n),n}}(".rap-container {\n  max-width: 400px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container:focus {\n  outline: none;\n}\n.rap-container .rap-current-time,\n.rap-container .rap-total-time {\n  min-width: 40px;\n}\n.rap-container .rap-total-time {\n  text-align: right;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url('data:image/png;base64,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');\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n",{});var f=function(m){var v,h=m.autoPlay,f=void 0!==h&&h,g=m.className,w=void 0===g?"":g,x=m.src,b=m.loop,E=void 0!==b&&b,A=m.preload,k=void 0===A?"auto":A,y=m.backgroundColor,N=m.color,R=m.width,C=m.style,T=m.sliderColor,z=m.volume,M=void 0===z?100:z,S=m.volumePlacement,L=void 0===S?"top":S,D=m.hasKeyBindings,U=void 0===D||D,P=m.onPlay,I=m.onPause,K=m.onEnd,B=m.onError,O=e(null),Y=e(null),F=e(null),G=e(null),W=r("none"===k),X=W[0],j=W[1],J=r(!1),H=J[0],Z=J[1],V=r(0),Q=V[0],q=V[1],_=r("0:00"),$=_[0],nn=_[1],en=r("--:--"),rn=en[0],tn=en[1],on=r(!1),an=on[0],cn=on[1],ln=r(100),un=ln[0],pn=ln[1],sn=r(function(n){if((n=isNaN(n)?100:Math.max(0,Math.min(n,100)))>=50)return a;if(n>5)return i;return c}(M)),dn=sn[0],mn=sn[1],vn=r(0),hn=vn[0],fn=vn[1],gn=r(!1),wn=gn[0],xn=gn[1];t((function(){En()}),[x]),t((function(){var n;(null===(n=O.current)||void 0===n?void 0:n.duration)&&O.current.duration!==1/0&&tn(p(O.current.duration))}),[null===(v=O.current)||void 0===v?void 0:v.duration]),t((function(){if(!isNaN(M)){var n=M>100?100:M<0?0:M;pn(n),O.current&&(O.current.volume=n/100)}}),[M]);var bn=function(){return O.current?O.current.duration!==1/0?O.current.duration:O.current.buffered.end(0):0},En=function(){O.current&&(Z(!1),tn("--:--"),j(!1),xn(!1),O.current.src=x,O.current.load())};var An=function(){O.current&&("none"!==k||O.current.duration||j(!1),O.current.paused?(O.current.play(),Z(!0),P&&P()):(O.current.pause(),Z(!1),I&&I()))},kn=function(n){var e=s(n,Y.current),r=e.getBoundingClientRect();if("horizontal"===e.dataset.direction){var t="touches"in n?n.touches[0].clientX:n.clientX;if(t-r.left<0||t-r.right>0)return!1}else{var o=r.top,a=o+e.offsetHeight,i="touches"in n?n.touches[0].clientY:n.clientY;if(i<o||i>a)return!1}return!0};function yn(n){var e=s(n,Y.current),r=e.getBoundingClientRect(),t=0;if("horizontal"===e.dataset.direction)t=(("touches"in n?n.touches[0].clientX:n.clientX)-r.left)/e.clientWidth;else if("vertical"===e.dataset.direction){var o="touches"in n?n.touches[0].clientY:n.clientY,a=e.clientHeight;t=1-(o-r.top)/a}return t}var Nn=function(n){kn(n)&&O.current&&("none"!==k||O.current.duration?O.current.duration&&(O.current.currentTime=bn()*yn(n)):(j(!1),O.current.load(),fn(yn(n))))},Rn=function(n){kn(n)&&O.current&&(O.current.volume=yn(n))},Cn=function(){Y.current=F.current;var n=d();window.addEventListener(n.move,Nn,!1),window.addEventListener(n.up,(function(){Y.current=null,window.removeEventListener(n.move,Nn,!1)}),{once:!0})},Tn=function(){Y.current=G.current;var n=d();window.addEventListener(n.move,Rn,!1),window.addEventListener(n.up,(function(){Y.current=null,window.removeEventListener(n.move,Rn,!1)}),!1)},zn=function(n){if(O.current){var e=O.current.currentTime+bn()*(n/100);O.current.currentTime=Math.min(e,bn())}},Mn=function(n){O.current&&(O.current.volume=Math.max(0,Math.min(1,O.current.volume+n)))};return n.createElement("div",{tabIndex:-1,onKeyDown:function(n){if(U)switch(n.preventDefault(),n.key){case"ArrowLeft":zn(-5);break;case"ArrowRight":zn(5);break;case"ArrowUp":Mn(.05);break;case"ArrowDown":Mn(-.05);break;case" ":An()}},className:"rap-container ".concat(w),style:o(o(o(o({},y?{backgroundColor:y}:{}),N?{color:N}:{}),R?{width:R,maxWidth:R}:{}),C)},wn&&n.createElement("span",{title:"An error has occurred",className:"rap-pp-button",onClick:En},n.createElement("svg",{width:"24px",height:"24px",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"rap-pp-icon"},n.createElement("path",{fill:null!=N?N:"#566574",d:"M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"}))),!X&&!wn&&n.createElement("div",{className:"rap-loading"},n.createElement("div",{className:"rap-spinner"})),X&&!wn&&n.createElement("div",{className:"rap-pp-button",onClick:function(){return An()}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"24",viewBox:"0 0 18 24",className:"rap-pp-icon"},n.createElement("path",{fill:null!=N?N:"#566574",fillRule:"evenodd",d:H?l:u}))),n.createElement("div",{className:"rap-controls"},n.createElement("span",{className:"rap-current-time"},$),n.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:Cn,onTouchStart:Cn,onClick:Nn},n.createElement("div",{className:"rap-progress",style:o({width:Q+"%"},T?{backgroundColor:T}:{})},n.createElement("div",{ref:F,className:"rap-pin","data-method":"rewind",onMouseDown:Cn,onTouchStart:Cn,style:T?{backgroundColor:T}:{}}))),"--:--"!==rn&&n.createElement("span",{className:"rap-total-time"},rn)),n.createElement("div",{className:"rap-volume"},n.createElement("div",{className:"rap-volume-btn ".concat(an?"rap-volume-open":""),onClick:function(){return cn((function(n){return!n}))}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},n.createElement("path",{fill:an?null!=T?T:"#007FFF":null!=N?N:"#566574",fillRule:"evenodd",d:dn}))),n.createElement("div",{className:"".concat("bottom"===L?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(an?"":"rap-hidden")},n.createElement("div",{className:"rap-volume-controls",onClick:function(n){n.preventDefault(),n.stopPropagation()}},n.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:Rn,onMouseDown:Tn,onTouchStart:Tn},n.createElement("div",{className:"rap-progress",style:o({height:"".concat(un,"%")},T?{backgroundColor:T}:{})},n.createElement("div",{ref:G,className:"rap-pin","data-method":"changeVolume",style:T?{backgroundColor:T}:{},onMouseDown:Tn,onTouchStart:Tn})))),n.createElement("div",{className:"rap-backdrop",onClick:function(){return cn(!1)}}))),n.createElement("audio",{loop:E,ref:O,preload:k,autoPlay:f,onPlay:function(){Z(!0)},onEnded:function(){Z(!1),O.current&&(O.current.currentTime=0,"--:--"===rn&&En(),K&&K())},onError:function(n){if(j(!0),xn(!0),B){var e=n.target.error,r="An unknown error occurred.";if(null==e?void 0:e.code)switch(null==e?void 0:e.code){case e.MEDIA_ERR_ABORTED:r="The media playback was aborted.";break;case e.MEDIA_ERR_NETWORK:r="A network error caused the media to fail.";break;case e.MEDIA_ERR_DECODE:r="The media playback was aborted due to a decoding error.";break;case e.MEDIA_ERR_SRC_NOT_SUPPORTED:r="The media source format is not supported.";break;default:r="An unknown error occurred."}B(n,r)}},onCanPlay:function(){j(!0)},onLoadedMetadata:function(){var n,e,r;if((null===(n=O.current)||void 0===n?void 0:n.duration)&&(null===(e=O.current)||void 0===e?void 0:e.duration)!==1/0){tn(p(null!==(r=O.current.duration)&&void 0!==r?r:0));var t=O.current.duration*hn;O.current.currentTime=t}},onTimeUpdate:function(){if(O.current){var n=O.current.currentTime,e=n/bn()*100;q(e),nn(p(n))}},onVolumeChange:function(){O.current&&(pn(100*O.current.volume),O.current.volume>=.5?mn(a):O.current.volume<.5&&O.current.volume>.05?mn(i):O.current.volume<=.05&&mn(c))}},n.createElement("source",{src:x,type:"audio/mpeg"})))};export{f as AudioPlayer};
+import n,{forwardRef as e,useRef as r,useState as t,useEffect as o,useImperativeHandle as a}from"react";var i=function(){return i=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},i.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var c="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z",l="M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z",u="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",p="M0 0h6v24H0zM12 0h6v24h-6z",s="M18 12L0 24V0",d=function(n){var e=Math.floor(n/60),r=Math.floor(n%60);return e+":"+(r<10?"0"+r:r)};var m=function(n,e){var r,t,o,a=n.target;return"click"===n.type&&(o=a,-1!==Array.from(o.classList).indexOf("rap-pin"))&&(null===(r=null==a?void 0:a.parentElement)||void 0===r?void 0:r.parentElement)&&(a=a.parentElement.parentElement),"mousemove"===n.type&&(null===(t=null==e?void 0:e.parentElement)||void 0===t?void 0:t.parentElement)&&(a=e.parentElement.parentElement),a},v=function(){return f()?{move:"touchmove",up:"touchend"}:{move:"mousemove",up:"mouseup"}},f=function(){return"ontouchstart"in window||navigator.maxTouchPoints},h=[],g=[];!function(n,e){if(n&&"undefined"!=typeof document){var r,t=!0===e.prepend?"prepend":"append",o=!0===e.singleTag,a="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(o){var i=h.indexOf(a);-1===i&&(i=h.push(a)-1,g[i]={}),r=g[i]&&g[i][t]?g[i][t]:g[i][t]=c()}else r=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),r.styleSheet?r.styleSheet.cssText+=n:r.appendChild(document.createTextNode(n))}function c(){var n=document.createElement("style");if(n.setAttribute("type","text/css"),e.attributes)for(var r=Object.keys(e.attributes),o=0;o<r.length;o++)n.setAttribute(r[o],e.attributes[r[o]]);var i="prepend"===t?"afterbegin":"beforeend";return a.insertAdjacentElement(i,n),n}}(".rap-container {\n  max-width: 400px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container:focus {\n  outline: none;\n}\n.rap-container .rap-current-time,\n.rap-container .rap-total-time {\n  min-width: 40px;\n}\n.rap-container .rap-total-time {\n  text-align: right;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url('data:image/png;base64,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');\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n",{});var w=e((function(e,f){var h,g=e.autoPlay,w=void 0!==g&&g,x=e.className,b=void 0===x?"":x,E=e.src,A=e.loop,k=void 0!==A&&A,y=e.preload,N=void 0===y?"auto":y,R=e.backgroundColor,C=e.color,T=e.width,z=e.style,M=e.sliderColor,S=e.volume,L=void 0===S?100:S,D=e.volumePlacement,P=void 0===D?"top":D,U=e.hasKeyBindings,I=void 0===U||U,K=e.onPlay,B=e.onPause,O=e.onEnd,Y=e.onError,F=r(null),G=r(null),W=r(null),X=r(null),j=r(null),J=t("none"===N),H=J[0],Z=J[1],V=t(!1),Q=V[0],q=V[1],_=t(0),$=_[0],nn=_[1],en=t("0:00"),rn=en[0],tn=en[1],on=t("--:--"),an=on[0],cn=on[1],ln=t(!1),un=ln[0],pn=ln[1],sn=t(100),dn=sn[0],mn=sn[1],vn=t(function(n){if((n=isNaN(n)?100:Math.max(0,Math.min(n,100)))>=50)return c;if(n>5)return l;return u}(L)),fn=vn[0],hn=vn[1],gn=t(0),wn=gn[0],xn=gn[1],bn=t(!1),En=bn[0],An=bn[1];o((function(){yn()}),[E]),o((function(){var n;(null===(n=G.current)||void 0===n?void 0:n.duration)&&G.current.duration!==1/0&&cn(d(G.current.duration))}),[null===(h=G.current)||void 0===h?void 0:h.duration]),o((function(){if(!isNaN(L)){var n=L>100?100:L<0?0:L;mn(n),G.current&&(G.current.volume=n/100)}}),[L]),a(f,(function(){return{play:function(){Rn()},pause:function(){Cn()},stop:function(){Tn()},focus:function(){zn()}}}));var kn=function(){return G.current?G.current.duration!==1/0?G.current.duration:G.current.buffered.end(0):0},yn=function(){G.current&&(q(!1),cn("--:--"),Z(!1),An(!1),G.current.src=E,G.current.load())};var Nn=function(){G.current&&("none"!==N||G.current.duration||Z(!1),G.current.paused?Rn():Cn())},Rn=function(){var n;En?yn():(null===(n=G.current)||void 0===n||n.play(),q(!0),K&&K())},Cn=function(){var n;null===(n=G.current)||void 0===n||n.pause(),q(!1),B&&B()},Tn=function(){G.current&&(G.current.pause(),q(!1),G.current.currentTime=0)},zn=function(){var n;null===(n=F.current)||void 0===n||n.focus()},Mn=function(n){var e=m(n,W.current),r=e.getBoundingClientRect();if("horizontal"===e.dataset.direction){var t="touches"in n?n.touches[0].clientX:n.clientX;if(t-r.left<0||t-r.right>0)return!1}else{var o=r.top,a=o+e.offsetHeight,i="touches"in n?n.touches[0].clientY:n.clientY;if(i<o||i>a)return!1}return!0};function Sn(n){var e=m(n,W.current),r=e.getBoundingClientRect(),t=0;if("horizontal"===e.dataset.direction)t=(("touches"in n?n.touches[0].clientX:n.clientX)-r.left)/e.clientWidth;else if("vertical"===e.dataset.direction){var o="touches"in n?n.touches[0].clientY:n.clientY,a=e.clientHeight;t=1-(o-r.top)/a}return t}var Ln=function(n){Mn(n)&&G.current&&("none"!==N||G.current.duration?G.current.duration&&(G.current.currentTime=kn()*Sn(n)):(Z(!1),G.current.load(),xn(Sn(n))))},Dn=function(n){Mn(n)&&G.current&&(G.current.volume=Sn(n))},Pn=function(){W.current=X.current;var n=v();window.addEventListener(n.move,Ln,!1),window.addEventListener(n.up,(function(){W.current=null,window.removeEventListener(n.move,Ln,!1)}),{once:!0})},Un=function(){W.current=j.current;var n=v();window.addEventListener(n.move,Dn,!1),window.addEventListener(n.up,(function(){W.current=null,window.removeEventListener(n.move,Dn,!1)}),!1)},In=function(n){if(G.current){var e=G.current.currentTime+kn()*(n/100);G.current.currentTime=Math.min(e,kn())}},Kn=function(n){G.current&&(G.current.volume=Math.max(0,Math.min(1,G.current.volume+n)))};return n.createElement("div",{ref:F,tabIndex:-1,onKeyDown:function(n){if(I)switch(n.preventDefault(),n.key){case"ArrowLeft":In(-5);break;case"ArrowRight":In(5);break;case"ArrowUp":Kn(.05);break;case"ArrowDown":Kn(-.05);break;case" ":Nn()}},className:"rap-container ".concat(b),style:i(i(i(i({},R?{backgroundColor:R}:{}),C?{color:C}:{}),T?{width:T,maxWidth:T}:{}),z)},En&&n.createElement("span",{title:"An error has occurred",className:"rap-pp-button",onClick:yn},n.createElement("svg",{width:"24px",height:"24px",viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"none",className:"rap-pp-icon"},n.createElement("path",{fill:null!=C?C:"#566574",d:"M7.248 1.307A.75.75 0 118.252.193l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 01-1.004-1.114l1.29-1.161a4.5 4.5 0 103.655 2.832.75.75 0 111.398-.546A6 6 0 118.018 2l-.77-.693z"}))),!H&&!En&&n.createElement("div",{className:"rap-loading"},n.createElement("div",{className:"rap-spinner"})),H&&!En&&n.createElement("div",{className:"rap-pp-button",onClick:function(){return Nn()}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"24",viewBox:"0 0 18 24",className:"rap-pp-icon"},n.createElement("path",{fill:null!=C?C:"#566574",fillRule:"evenodd",d:Q?p:s}))),n.createElement("div",{className:"rap-controls"},n.createElement("span",{className:"rap-current-time"},rn),n.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:Pn,onTouchStart:Pn,onClick:Ln},n.createElement("div",{className:"rap-progress",style:i({width:$+"%"},M?{backgroundColor:M}:{})},n.createElement("div",{ref:X,className:"rap-pin","data-method":"rewind",onMouseDown:Pn,onTouchStart:Pn,style:M?{backgroundColor:M}:{}}))),"--:--"!==an&&n.createElement("span",{className:"rap-total-time"},an)),n.createElement("div",{className:"rap-volume"},n.createElement("div",{className:"rap-volume-btn ".concat(un?"rap-volume-open":""),onClick:function(){return pn((function(n){return!n}))}},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24"},n.createElement("path",{fill:un?null!=M?M:"#007FFF":null!=C?C:"#566574",fillRule:"evenodd",d:fn}))),n.createElement("div",{className:"".concat("bottom"===P?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(un?"":"rap-hidden")},n.createElement("div",{className:"rap-volume-controls",onClick:function(n){n.preventDefault(),n.stopPropagation()}},n.createElement("div",{className:"rap-slider","data-direction":"vertical",onClick:Dn,onMouseDown:Un,onTouchStart:Un},n.createElement("div",{className:"rap-progress",style:i({height:"".concat(dn,"%")},M?{backgroundColor:M}:{})},n.createElement("div",{ref:j,className:"rap-pin","data-method":"changeVolume",style:M?{backgroundColor:M}:{},onMouseDown:Un,onTouchStart:Un})))),n.createElement("div",{className:"rap-backdrop",onClick:function(){return pn(!1)}}))),n.createElement("audio",{loop:k,ref:G,preload:N,autoPlay:w,onPlay:function(){q(!0)},onEnded:function(){q(!1),G.current&&(G.current.currentTime=0,"--:--"===an&&yn(),O&&O())},onError:function(n){if(Z(!0),An(!0),Y){var e=n.target.error,r="An unknown error occurred.";if(null==e?void 0:e.code)switch(null==e?void 0:e.code){case e.MEDIA_ERR_ABORTED:r="The media playback was aborted.";break;case e.MEDIA_ERR_NETWORK:r="A network error caused the media to fail.";break;case e.MEDIA_ERR_DECODE:r="The media playback was aborted due to a decoding error.";break;case e.MEDIA_ERR_SRC_NOT_SUPPORTED:r="The media source format is not supported.";break;default:r="An unknown error occurred."}Y(n,r)}},onCanPlay:function(){Z(!0)},onLoadedMetadata:function(){var n,e,r;if((null===(n=G.current)||void 0===n?void 0:n.duration)&&(null===(e=G.current)||void 0===e?void 0:e.duration)!==1/0){cn(d(null!==(r=G.current.duration)&&void 0!==r?r:0));var t=G.current.duration*wn;G.current.currentTime=t}},onTimeUpdate:function(){if(G.current){var n=G.current.currentTime,e=n/kn()*100;nn(e),tn(d(n))}},onVolumeChange:function(){G.current&&(mn(100*G.current.volume),G.current.volume>=.5?hn(c):G.current.volume<.5&&G.current.volume>.05?hn(l):G.current.volume<=.05&&hn(u))}},n.createElement("source",{src:E,type:"audio/mpeg"})))}));w.displayName="AudioPlayer";export{w as AudioPlayer};
 //# sourceMappingURL=index.js.map

dist/esm/types/src/components/AudioPlayer.d.ts

 import React from 'react';
+import { AudioInterface, AudioPlayerRef } from './core.interface';
 import './audioPlay.css';
-export interface AudioInterface {
-    autoPlay?: boolean;
-    className?: string;
-    src: string;
-    loop?: boolean;
-    preload?: 'auto' | 'metadata' | 'none';
-    backgroundColor?: string;
-    color?: string;
-    width?: number | string;
-    style?: React.CSSProperties;
-    sliderColor?: string;
-    volume?: number;
-    volumePlacement?: 'top' | 'bottom';
-    hasKeyBindings?: boolean;
-    onPlay?: () => void;
-    onPause?: () => void;
-    onEnd?: () => void;
-    onError?: (event: React.SyntheticEvent<HTMLAudioElement, Event>, errorMessage: string) => void;
-}
-export declare const AudioPlayer: React.FC<AudioInterface>;
+export declare const AudioPlayer: React.ForwardRefExoticComponent<AudioInterface & React.RefAttributes<AudioPlayerRef | undefined>>;

dist/esm/types/src/components/index.d.ts

 export * from './AudioPlayer';
+export * from './core.interface';

dist/types.d.ts

@@ -1,7 +0,4 @@
-import React from 'react';
+import React$1 from 'react';
 import injector_475aacaf from '/home/runner/work/react-audio-play/react-audio-play/node_modules/rollup-plugin-styles/dist/runtime/inject-css.js';
 
-var css = ".rap-container {\n  max-width: 400px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container:focus {\n  outline: none;\n}\n.rap-container .rap-current-time,\n.rap-container .rap-total-time {\n  min-width: 40px;\n}\n.rap-container .rap-total-time {\n  text-align: right;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url('data:image/png;base64,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');\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n";
-injector_475aacaf(css,{});
-
 interface AudioInterface {
@@ -26,4 +23,14 @@ autoPlay?: boolean;
 }
-declare const AudioPlayer: React.FC<AudioInterface>;
+interface AudioPlayerRef {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    focus: () => void;
+}
 
-export { AudioInterface, AudioPlayer };
+var css = ".rap-container {\n  max-width: 400px;\n  height: 56px;\n  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 24px;\n  padding-right: 24px;\n  border-radius: 4px;\n  user-select: none;\n  -webkit-user-select: none;\n  background-color: #fff;\n  color: #55606e;\n}\n.rap-container:focus {\n  outline: none;\n}\n.rap-container .rap-current-time,\n.rap-container .rap-total-time {\n  min-width: 40px;\n}\n.rap-container .rap-total-time {\n  text-align: right;\n}\n.rap-container .rap-pp-button {\n  cursor: pointer;\n}\n.rap-container .rap-spinner {\n  width: 18px;\n  height: 18px;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABGdBTUEAALGPC/xhBQAAB75JREFUWAm9WF1sXEcVPjNz767t9U+CbeImNiSKm6hsIa3kAmmRUFEClQpP4NTi5ymREyIh5CoNFTzEQUKiPxQJ8ZIUBSTET1jKAxJP5cEtohQjKymRE5VIVRRaJ01IY8dr7+69M3P4zuyu/2Kntup0tLtz79yZc775zs+cu4rW2PoPH242Se5Bp3kXserUxB3o24k4Zs3vaacmlVHXrVJnWlJ6/dSpZ6fXokKtdvLAwaE+781ecpwnRcZrqGVWSlEUOsURE2ntlSHF2pGKFClMc+c9mT8WXnzuldXoel9A3zz8dG+S2n4mvwPaFbGOBAgHIKSVAAm4KJZRYAEQD1wATLhlnwEQrNTnldY/O33imTfuBGxFQMPDw/r8O8WvYfEeCgCgWMSCASyCZSjSUBRMJQ9qDFUBEaYxgIMr4gzAK834YDdam9P+Zt8LhcI+txwws9zg4OBw09vTxUHy3AdRsj9snsJcRbhHEyUAikcUBQKqD3Ar81hjGnoBij7gDevBKO1SjVceeODhva+eGx2pLNVflb5gtH/ohcZJLn7XM+0UldVHolhh04CFIQiFBeuLZGxpqxEvhq1vACDFhLIcG9mdlou/+8Z3hltXWFkdrpppahDb3wn3xDoIZFCOAaMjUE6a2UVa6Unn6d8R+7PUGL3r4vSmSMhMx+0c0WbneLcn/jzWbgKIWEwFAgNTzCl8CsC0ERv+w+996EBh37z5QPd8G39n9svk1b0SK2wRILIhA2Z82Kaguwnhf7lvc/PfAH6Oo3kJ9Dau5Tva3/+Hn9OG1x/H6kNwsY/Cm2B4hF2Ig0AVQpAeoZf/+QPM/2FdRo1booFDT2+1aXJIRxFmwz5pGimxOK6rTOk3c925X/5qeLhcX7ya/ltHjuTKU+pHRG4PAGlxawEG08UBJMIRo/2nX/zJv0TenA955x8T3aKdwTlCFJvRzluL+fRqvjt3Yq1gRMGvn39+Jr8l9yRk/xYmh3bJUsGPoEquhTjzfZkrLUTOEweO3gckuzHdeYbvYqa4C+iRYL3wie7W369goiDk/X5GRka4/ytf+vu1aZtXnneCHbAPphCLiI4YvtZz/0OfuzA+9trFwBAwfkasJAxhlkeuQI6AW7Kd3tSw9TcfBEwdrMhQce4ppJFrYhgAMdg3LoQ08S/eL3NV/9BQo5qOhqAcGRekILpkPCRaNn8u/OLHYzKwXm1g8MjXkVKeC4YTXyIcNWhik1yu+V5NM5leDzbg/nI8gRmLR+I+eirf3XBGJq9nc3s+fRp0vBtsgX2DBMkvYIGjUrn4mNbsPw5beorilE1kSWUSfCve+vPrYaqlm5GcA/0vO+Isdp+FkxoYDMcMjiRHX0Ci8y3syAtL3gs7cgxhiaGLS4Wt1z1r/1cEjDiGhJuYTPwEyU/1SInQAM5SnNBhDisXTk/rfMi+6wVioZyY9CXLPhscB7BCOpDMRNwjx0AjuBF3rjUNwtB6Wor1kfXuzSxP2Ky6LNEViAoKJNrIRs45mItgtLra6oUar9+vf799e3NpfKL0RZHsnK1RgfRoIhyFmoswYNtStU1bqAljydLx9bivBQsYur3hwI5usfI5yUGSGFGCSUqgcpK2oJu8fcndHUHy9kWJMbBUjS6EnYSeTW3P3VW9vHSdzUSXdUQpZXQiX6+dZeNTfLaAWuD8cJveaGb+61Tk4NYgSrF8Ha7h/9n/XJnZ/uHCwWk/OjrqPvmpz3ZFyjcSe46VssgF1sKxkBk2PtJ3/1tjY2NzMXi3AQaTcBxdsDhD8DYFgsCS5EzUCewpO61a+8Khe7eR1OQHQIWTz1xWbK6hIkBWipy1xqNarOCMq1R02jnw7afyHwTUWtbOOa1RzWcl5JGnAQvHXK0ZF8PL/ccGDh59EE6+qAavz7lTL2AeffR4KDHuNK/+bO7AkIEnDj65C76zTV54OONQ3CMvpVLue27wOYt303LJl9566cRPr0rOqgtZrhcg+44fj2l8ynR1bfPnzv3JdXZ2cqFQmNvscusWARIhXz1w9GFU4R14S0mDLyUoagHIqGyCWpItVRxeYMqpp2tI9ZNd2dny1atXbT6f54mJe0ySXDFIqRm2ZTNbKrO7sSFpbyd/6dKIXQ2gOZMJWtl1h+kdRT/J1uJVyPqYszbDjalPEnaVCptYpQhEVFC6PWW/7X+3ol7dsGXH2YmZbTf9xe5b6Y2O6euzzezeM7GZ1raVopkmebvdGhWLXeglt62c3xYBElAnTx5MN6re11Ax3pD7VFu8kEjUwe1N5JFCQzNRDMevHjPVkQW/cgqSnDytlOZKqjh1Y4Ge8UVWWbAqXK74MPjA/u/tQDF1j4CxKnEGKRz1kkN2YHINidWOmzhNJUGUMo1pDOsmbtY6l/UbuZSCYF/KbrZxpsSUS5JcWxtvRYlx7NgxJzKXgpH7BcgXP5YFhVPPvokK84zx5hbSAATgHQ3/VPkITNWossbcLjgwhNkoemjDvNyZ8fEUkYr/spYHIzNXZGheTPVq/9DQR5JKvGm2TLkINQKBHmEoozmxyOtplLHCEKoEZzNZ32yLtlJJuKWjsQSvLheGh1dVyqwaUB2g5KI3rlfaWlKfq1TwkpfFE3bGOgBqSNLZxCUmabJRe3k239ZWwfw1HTv/Bw6V3iNaFo3HAAAAAElFTkSuQmCC');\n  background-size: cover;\n  background-repeat: no-repeat;\n  animation: rapSpin 0.4s linear infinite;\n}\n.rap-container .rap-slider {\n  flex-grow: 1;\n  background-color: #d8d8d8;\n  cursor: pointer;\n  position: relative;\n}\n.rap-container .rap-slider .rap-progress {\n  background-color: #007fff;\n  border-radius: inherit;\n  position: absolute;\n  pointer-events: none;\n}\n.rap-container .rap-slider .rap-progress .rap-pin {\n  height: 16px;\n  width: 16px;\n  border-radius: 8px;\n  background-color: #007fff;\n  position: absolute;\n  pointer-events: all;\n  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);\n}\n.rap-container .rap-controls {\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  line-height: 18px;\n  display: flex;\n  flex-grow: 1;\n  justify-content: space-between;\n  align-items: center;\n  margin-left: 24px;\n  margin-right: 24px;\n}\n.rap-container .rap-controls .rap-slider {\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 2px;\n  height: 4px;\n}\n.rap-container .rap-controls .rap-slider .rap-progress {\n  width: 0;\n  height: 100%;\n}\n.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {\n  right: -8px;\n  top: -6px;\n}\n.rap-container .rap-controls span {\n  cursor: default;\n}\n.rap-container .rap-volume {\n  position: relative;\n}\n.rap-container .rap-volume .rap-volume-btn {\n  cursor: pointer;\n}\n.rap-container .rap-volume .rap-volume-controls {\n  width: 30px;\n  height: 135px;\n  background-color: rgba(0, 0, 0, 0.62);\n  border-radius: 7px;\n  position: absolute;\n  left: -3px;\n  bottom: 52px;\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n  z-index: 1;\n}\n.rap-container .rap-volume .rap-hidden {\n  display: none;\n}\n.rap-container .rap-volume .rap-vol-placement-top {\n  position: absolute;\n  left: 0;\n  top: 32px;\n}\n\n.rap-container .rap-volume .rap-vol-placement-bottom {\n  position: absolute;\n  left: 0;\n  top: 230px;\n}\n\n.rap-container .rap-volume .rap-volume-controls .rap-slider {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 6px;\n  border-radius: 3px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress {\n  bottom: 0;\n  height: 100%;\n  width: 6px;\n}\n.rap-container .rap-volume .rap-volume-controls .rap-slider .rap-progress .rap-pin {\n  left: -5px;\n  top: -8px;\n}\n\n.rap-container svg {\n  display: block;\n}\n\n.rap-backdrop {\n  position: fixed;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n}\n\n@keyframes rapSpin {\n  from {\n    transform: rotateZ(0);\n  }\n  to {\n    transform: rotateZ(1turn);\n  }\n}\n";
+injector_475aacaf(css,{});
+
+declare const AudioPlayer: React$1.ForwardRefExoticComponent<AudioInterface & React$1.RefAttributes<AudioPlayerRef | undefined>>;
+
+export { AudioInterface, AudioPlayer, AudioPlayerRef };

package.json

 {
   "name": "react-audio-play",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React audio player component",
@@ -5,0 +5,0 @@ "homepage": "https://riyaddecoder.github.io/react-audio-play/",

README.md

@@ -23,3 +23,3 @@ [![NPM](https://img.shields.io/npm/v/react-audio-play.svg)](https://www.npmjs.com/package/react-audio-play) <a href="https://github.com/riyaddecoder/react-audio-play/issues">
 
-Check [examples](https://riyaddecoder.github.io/react-audio-play/#example-usage)
+Check [examples](https://riyaddecoder.github.io/react-audio-play/examples.html)
 
@@ -126,3 +126,3 @@ ## Installation
 You can easily customize the appearance of the audio player by applying your CSS styles to the AudioPlayer component or by overriding the default styles in your project's CSS. Check
-[examples](https://riyaddecoder.github.io/react-audio-play/#styled-examples)
+[examples](https://riyaddecoder.github.io/react-audio-play/examples.html#example-5-using-style-object)
 
@@ -129,0 +129,0 @@ ## License

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

115485

increased by2.65%

Number of package files

24

increased by9.09%

Lines of code

275

increased by11.34%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes