react-audio-play - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

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",l=function(e){var n=Math.floor(e/60),r=Math.floor(e%60);return n+":"+(r<10?"0"+r:r)};var c=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},p=[],s=[];!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=p.indexOf(a);-1===i&&(i=p.push(a)-1,s[i]={}),r=s[i]&&s[i][t]?s[i][t]:s[i][t]=l()}else r=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function l(){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  width: 400px;\n  min-width: 300px;\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 .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: 16px;\n  margin-right: 16px;\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=p.src,u=p.loop,d=void 0!==u&&u,m=p.backgroundColor,v=p.color,f=p.style,h=p.sliderColor,g=p.volume,E=void 0===g?100:g,b=p.volumePlacement,x=void 0===b?"top":b,w=p.onPlay,A=p.onPause,k=p.onEnd,y=p.onError,R=e.useRef(null),N=e.useRef(null),C=e.useRef(null),S=e.useRef(null),L=e.useState(!1),T=L[0],z=L[1],M=e.useState(!1),U=M[0],D=M[1],I=e.useState(0),O=I[0],K=I[1],P=e.useState("0:00"),B=P[0],F=P[1],Y=e.useState("0:00"),G=Y[0],W=Y[1],X=e.useState(!1),j=X[0],J=X[1],H=e.useState(100),Z=H[0],V=H[1],Q=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}(E)),q=Q[0],_=Q[1];e.useEffect((function(){if(!isNaN(E)){var e=E>100?100:E<0?0:E;V(e),R.current&&(R.current.volume=e/100)}}),[E]);var $=function(e){var n,r,t=c(e,N.current),o=t.getBoundingClientRect();if("horizontal"===t.dataset.direction){if(n=(r=t.offsetLeft)+t.offsetWidth,e.clientX<r||e.clientX>n)return!1}else if(n=(r=o.top)+t.offsetHeight,e.clientY<r||e.clientY>n)return!1;return!0};function ee(e){var n=c(e,N.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(e.clientX-n.offsetLeft)/n.clientWidth;else if("vertical"===n.dataset.direction){var o=n.clientHeight;t=1-(e.clientY-r.top)/o}return t}var ne=function(e){if($(e)&&R.current){var n=R.current.duration*ee(e);R.current.currentTime=n}},re=function(e){$(e)&&R.current&&(R.current.volume=ee(e))},te=function(){N.current=C.current,window.addEventListener("mousemove",ne,!1),window.addEventListener("mouseup",(function(){N.current=null,window.removeEventListener("mousemove",ne,!1)}),{once:!0})},oe=function(){N.current=S.current,window.addEventListener("mousemove",re,!1),window.addEventListener("mouseup",(function(){N.current=null,window.removeEventListener("mousemove",re,!1)}),!1)};return e.createElement("div",{className:"rap-container",style:n(n(n({},m?{backgroundColor:m}:{}),v?{color:v}:{}),f)},!T&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),T&&e.createElement("div",{className:"rap-pp-button",onClick:function(){R.current&&(R.current.paused?(R.current.play(),D(!0),w&&w()):(R.current.pause(),D(!1),A&&A()))}},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!=v?v:"#566574",fillRule:"evenodd",d:U?a:i}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},B),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:te,onClick:ne},e.createElement("div",{className:"rap-progress",style:n({width:O+"%"},h?{backgroundColor:h}:{})},e.createElement("div",{ref:C,className:"rap-pin","data-method":"rewind",onMouseDown:te,style:h?{backgroundColor:h}:{}}))),e.createElement("span",{className:"rap-total-time"},G)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn ".concat(j?"rap-volume-open":""),onClick:function(){return J((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:j?null!=h?h:"#007FFF":null!=v?v:"#566574",fillRule:"evenodd",d:q}))),e.createElement("div",{className:"".concat("bottom"===x?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(j?"":"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:re,onMouseDown:oe},e.createElement("div",{className:"rap-progress",style:n({height:"".concat(Z,"%")},h?{backgroundColor:h}:{})},e.createElement("div",{ref:S,className:"rap-pin","data-method":"changeVolume",style:h?{backgroundColor:h}:{},onMouseDown:oe})))),e.createElement("div",{className:"rap-backdrop",onClick:function(){return J(!1)}}))),e.createElement("audio",{ref:R,loop:d,onCanPlay:function(){z(!0)},onEnded:function(){D(!1),R.current&&(R.current.currentTime=0,k&&k())},onError:function(e){if(y){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."}y(e,r)}},onLoadedMetadata:function(){var e,n;W(l(null!==(n=null===(e=R.current)||void 0===e?void 0:e.duration)&&void 0!==n?n:0))},onTimeUpdate:function(){if(R.current){var e=R.current.currentTime,n=e/R.current.duration*100;K(n),F(l(e))}},onVolumeChange:function(){R.current&&(V(100*R.current.volume),R.current.volume>=.5?_(r):R.current.volume<.5&&R.current.volume>.05?_(t):R.current.volume<=.05&&_(o))}},e.createElement("source",{src:s,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 a in n=arguments[r])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);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",a="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",o="M0 0h6v24H0zM12 0h6v24h-6z",i="M18 12L0 24V0",l=function(e){var n=Math.floor(e/60),r=Math.floor(e%60);return n+":"+(r<10?"0"+r:r)};var c=function(e,n){var r,t,a,o=e.target;return"click"===e.type&&(a=o,-1!==Array.from(a.classList).indexOf("rap-pin"))&&(null===(r=null==o?void 0:o.parentElement)||void 0===r?void 0:r.parentElement)&&(o=o.parentElement.parentElement),"mousemove"===e.type&&(null===(t=null==n?void 0:n.parentElement)||void 0===t?void 0:t.parentElement)&&(o=n.parentElement.parentElement),o},p=[],s=[];!function(e,n){if(e&&"undefined"!=typeof document){var r,t=!0===n.prepend?"prepend":"append",a=!0===n.singleTag,o="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(a){var i=p.indexOf(o);-1===i&&(i=p.push(o)-1,s[i]={}),r=s[i]&&s[i][t]?s[i][t]:s[i][t]=l()}else r=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function l(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var r=Object.keys(n.attributes),a=0;a<r.length;a++)e.setAttribute(r[a],n.attributes[r[a]]);var i="prepend"===t?"afterbegin":"beforeend";return o.insertAdjacentElement(i,e),e}}(".rap-container {\n  width: 400px;\n  min-width: 300px;\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 .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: 16px;\n  margin-right: 16px;\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=p.className,u=void 0===s?"":s,d=p.src,m=p.loop,v=void 0!==m&&m,f=p.preload,h=void 0===f?"auto":f,g=p.backgroundColor,E=p.color,x=p.style,b=p.sliderColor,w=p.volume,A=void 0===w?100:w,k=p.volumePlacement,y=void 0===k?"top":k,N=p.onPlay,R=p.onPause,C=p.onEnd,S=p.onError,T=e.useRef(null),z=e.useRef(null),L=e.useRef(null),M=e.useRef(null),U=e.useState("none"===h),D=U[0],I=U[1],O=e.useState(!1),B=O[0],K=O[1],P=e.useState(0),F=P[0],Y=P[1],G=e.useState("0:00"),W=G[0],X=G[1],j=e.useState("--:--"),J=j[0],H=j[1],Z=e.useState(!1),V=Z[0],Q=Z[1],q=e.useState(100),_=q[0],$=q[1],ee=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 a}(A)),ne=ee[0],re=ee[1],te=e.useState(0),ae=te[0],oe=te[1],ie=e.useState(!1),le=ie[0],ce=ie[1];e.useEffect((function(){if(!isNaN(A)){var e=A>100?100:A<0?0:A;$(e),T.current&&(T.current.volume=e/100)}}),[A]);var pe=function(e){var n,r,t=c(e,z.current),a=t.getBoundingClientRect();if("horizontal"===t.dataset.direction){if(n=(r=t.offsetLeft)+t.offsetWidth,e.clientX<r||e.clientX>n)return!1}else if(n=(r=a.top)+t.offsetHeight,e.clientY<r||e.clientY>n)return!1;return!0};function se(e){var n=c(e,z.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(e.clientX-n.offsetLeft)/n.clientWidth;else if("vertical"===n.dataset.direction){var a=n.clientHeight;t=1-(e.clientY-r.top)/a}return t}var ue=function(e){if(pe(e)&&T.current)if("none"!==h||T.current.duration){if(T.current.duration){var n=T.current.duration*se(e);T.current.currentTime=n}}else I(!1),T.current.load(),oe(se(e))},de=function(e){pe(e)&&T.current&&(T.current.volume=se(e))},me=function(){z.current=L.current,window.addEventListener("mousemove",ue,!1),window.addEventListener("mouseup",(function(){z.current=null,window.removeEventListener("mousemove",ue,!1)}),{once:!0})},ve=function(){z.current=M.current,window.addEventListener("mousemove",de,!1),window.addEventListener("mouseup",(function(){z.current=null,window.removeEventListener("mousemove",de,!1)}),!1)};return e.createElement("div",{className:"rap-container ".concat(u),style:n(n(n({},g?{backgroundColor:g}:{}),E?{color:E}:{}),x)},le&&e.createElement("span",{title:"An error has occurred",className:"rap-pp-button",onClick:function(){T.current&&(I(!1),ce(!1),T.current.load())}},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!=E?E:"#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"}))),!D&&!le&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),D&&!le&&e.createElement("div",{className:"rap-pp-button",onClick:function(){T.current&&("none"!==h||T.current.duration||I(!1),T.current.paused?(T.current.play(),K(!0),N&&N()):(T.current.pause(),K(!1),R&&R()))}},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!=E?E:"#566574",fillRule:"evenodd",d:B?o:i}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},W),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:me,onClick:ue},e.createElement("div",{className:"rap-progress",style:n({width:F+"%"},b?{backgroundColor:b}:{})},e.createElement("div",{ref:L,className:"rap-pin","data-method":"rewind",onMouseDown:me,style:b?{backgroundColor:b}:{}}))),e.createElement("span",{className:"rap-total-time"},J)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn ".concat(V?"rap-volume-open":""),onClick:function(){return Q((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:V?null!=b?b:"#007FFF":null!=E?E:"#566574",fillRule:"evenodd",d:ne}))),e.createElement("div",{className:"".concat("bottom"===y?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(V?"":"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:de,onMouseDown:ve},e.createElement("div",{className:"rap-progress",style:n({height:"".concat(_,"%")},b?{backgroundColor:b}:{})},e.createElement("div",{ref:M,className:"rap-pin","data-method":"changeVolume",style:b?{backgroundColor:b}:{},onMouseDown:ve})))),e.createElement("div",{className:"rap-backdrop",onClick:function(){return Q(!1)}}))),e.createElement("audio",{ref:T,loop:v,preload:h,onCanPlay:function(){I(!0)},onEnded:function(){K(!1),T.current&&(T.current.currentTime=0,C&&C())},onError:function(e){if(I(!0),ce(!0),S){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."}S(e,r)}},onLoadedMetadata:function(){var e,n;if(null===(e=T.current)||void 0===e?void 0:e.duration){H(l(null!==(n=T.current.duration)&&void 0!==n?n:0));var r=T.current.duration*ae;T.current.currentTime=r}},onTimeUpdate:function(){if(T.current){var e=T.current.currentTime,n=e/T.current.duration*100;Y(n),X(l(e))}},onVolumeChange:function(){T.current&&($(100*T.current.volume),T.current.volume>=.5?re(r):T.current.volume<.5&&T.current.volume>.05?re(t):T.current.volume<=.05&&re(a))}},e.createElement("source",{src:d,type:"audio/mpeg"})))};
 //# sourceMappingURL=index.js.map

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

 import React from 'react';
 import './audioPlay.css';
 export interface AudioInterface {
+    className?: string;
     src: string;
     loop?: boolean;
+    preload?: 'auto' | 'metadata' | 'none';
     backgroundColor?: string;
@@ -7,0 +9,0 @@ color?: string;

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useRef as n,useState as r,useEffect as t}from"react";var o=function(){return o=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},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",l="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",c="M0 0h6v24H0zM12 0h6v24h-6z",p="M18 12L0 24V0",s=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},d=[],m=[];!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=d.indexOf(a);-1===i&&(i=d.push(a)-1,m[i]={}),r=m[i]&&m[i][t]?m[i][t]:m[i][t]=l()}else r=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function l(){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  width: 400px;\n  min-width: 300px;\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 .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: 16px;\n  margin-right: 16px;\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 v=function(d){var m=d.src,v=d.loop,f=void 0!==v&&v,h=d.backgroundColor,g=d.color,E=d.style,b=d.sliderColor,x=d.volume,w=void 0===x?100:x,A=d.volumePlacement,k=void 0===A?"top":A,y=d.onPlay,N=d.onPause,R=d.onEnd,C=d.onError,L=n(null),T=n(null),z=n(null),M=n(null),S=r(!1),U=S[0],D=S[1],I=r(!1),O=I[0],K=I[1],B=r(0),P=B[0],F=B[1],Y=r("0:00"),G=Y[0],W=Y[1],X=r("0:00"),j=X[0],J=X[1],H=r(!1),Z=H[0],V=H[1],Q=r(100),q=Q[0],_=Q[1],$=r(function(e){if((e=isNaN(e)?100:Math.max(0,Math.min(e,100)))>=50)return a;if(e>5)return i;return l}(w)),ee=$[0],ne=$[1];t((function(){if(!isNaN(w)){var e=w>100?100:w<0?0:w;_(e),L.current&&(L.current.volume=e/100)}}),[w]);var re=function(e){var n,r,t=u(e,T.current),o=t.getBoundingClientRect();if("horizontal"===t.dataset.direction){if(n=(r=t.offsetLeft)+t.offsetWidth,e.clientX<r||e.clientX>n)return!1}else if(n=(r=o.top)+t.offsetHeight,e.clientY<r||e.clientY>n)return!1;return!0};function te(e){var n=u(e,T.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(e.clientX-n.offsetLeft)/n.clientWidth;else if("vertical"===n.dataset.direction){var o=n.clientHeight;t=1-(e.clientY-r.top)/o}return t}var oe=function(e){if(re(e)&&L.current){var n=L.current.duration*te(e);L.current.currentTime=n}},ae=function(e){re(e)&&L.current&&(L.current.volume=te(e))},ie=function(){T.current=z.current,window.addEventListener("mousemove",oe,!1),window.addEventListener("mouseup",(function(){T.current=null,window.removeEventListener("mousemove",oe,!1)}),{once:!0})},le=function(){T.current=M.current,window.addEventListener("mousemove",ae,!1),window.addEventListener("mouseup",(function(){T.current=null,window.removeEventListener("mousemove",ae,!1)}),!1)};return e.createElement("div",{className:"rap-container",style:o(o(o({},h?{backgroundColor:h}:{}),g?{color:g}:{}),E)},!U&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),U&&e.createElement("div",{className:"rap-pp-button",onClick:function(){L.current&&(L.current.paused?(L.current.play(),K(!0),y&&y()):(L.current.pause(),K(!1),N&&N()))}},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!=g?g:"#566574",fillRule:"evenodd",d:O?c:p}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},G),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:ie,onClick:oe},e.createElement("div",{className:"rap-progress",style:o({width:P+"%"},b?{backgroundColor:b}:{})},e.createElement("div",{ref:z,className:"rap-pin","data-method":"rewind",onMouseDown:ie,style:b?{backgroundColor:b}:{}}))),e.createElement("span",{className:"rap-total-time"},j)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn ".concat(Z?"rap-volume-open":""),onClick:function(){return V((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:Z?null!=b?b:"#007FFF":null!=g?g:"#566574",fillRule:"evenodd",d:ee}))),e.createElement("div",{className:"".concat("bottom"===k?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(Z?"":"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:le},e.createElement("div",{className:"rap-progress",style:o({height:"".concat(q,"%")},b?{backgroundColor:b}:{})},e.createElement("div",{ref:M,className:"rap-pin","data-method":"changeVolume",style:b?{backgroundColor:b}:{},onMouseDown:le})))),e.createElement("div",{className:"rap-backdrop",onClick:function(){return V(!1)}}))),e.createElement("audio",{ref:L,loop:f,onCanPlay:function(){D(!0)},onEnded:function(){K(!1),L.current&&(L.current.currentTime=0,R&&R())},onError:function(e){if(C){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."}C(e,r)}},onLoadedMetadata:function(){var e,n;J(s(null!==(n=null===(e=L.current)||void 0===e?void 0:e.duration)&&void 0!==n?n:0))},onTimeUpdate:function(){if(L.current){var e=L.current.currentTime,n=e/L.current.duration*100;F(n),W(s(e))}},onVolumeChange:function(){L.current&&(_(100*L.current.volume),L.current.volume>=.5?ne(a):L.current.volume<.5&&L.current.volume>.05?ne(i):L.current.volume<=.05&&ne(l))}},e.createElement("source",{src:m,type:"audio/mpeg"})))};export{v as AudioPlayer};
+import e,{useRef as n,useState as r,useEffect as t}from"react";var o=function(){return o=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},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",l="M0 7.667v8h5.333L12 22.333V1L5.333 7.667",c="M0 0h6v24H0zM12 0h6v24h-6z",p="M18 12L0 24V0",s=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},d=[],m=[];!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=d.indexOf(a);-1===i&&(i=d.push(a)-1,m[i]={}),r=m[i]&&m[i][t]?m[i][t]:m[i][t]=l()}else r=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),r.styleSheet?r.styleSheet.cssText+=e:r.appendChild(document.createTextNode(e))}function l(){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  width: 400px;\n  min-width: 300px;\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 .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: 16px;\n  margin-right: 16px;\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 v=function(d){var m=d.className,v=void 0===m?"":m,f=d.src,h=d.loop,g=void 0!==h&&h,E=d.preload,x=void 0===E?"auto":E,b=d.backgroundColor,w=d.color,A=d.style,k=d.sliderColor,N=d.volume,y=void 0===N?100:N,R=d.volumePlacement,C=void 0===R?"top":R,T=d.onPlay,z=d.onPause,L=d.onEnd,M=d.onError,S=n(null),U=n(null),D=n(null),I=n(null),O=r("none"===x),B=O[0],K=O[1],P=r(!1),F=P[0],Y=P[1],G=r(0),W=G[0],X=G[1],j=r("0:00"),J=j[0],H=j[1],Z=r("--:--"),V=Z[0],Q=Z[1],q=r(!1),_=q[0],$=q[1],ee=r(100),ne=ee[0],re=ee[1],te=r(function(e){if((e=isNaN(e)?100:Math.max(0,Math.min(e,100)))>=50)return a;if(e>5)return i;return l}(y)),oe=te[0],ae=te[1],ie=r(0),le=ie[0],ce=ie[1],pe=r(!1),se=pe[0],ue=pe[1];t((function(){if(!isNaN(y)){var e=y>100?100:y<0?0:y;re(e),S.current&&(S.current.volume=e/100)}}),[y]);var de=function(e){var n,r,t=u(e,U.current),o=t.getBoundingClientRect();if("horizontal"===t.dataset.direction){if(n=(r=t.offsetLeft)+t.offsetWidth,e.clientX<r||e.clientX>n)return!1}else if(n=(r=o.top)+t.offsetHeight,e.clientY<r||e.clientY>n)return!1;return!0};function me(e){var n=u(e,U.current),r=n.getBoundingClientRect(),t=0;if("horizontal"===n.dataset.direction)t=(e.clientX-n.offsetLeft)/n.clientWidth;else if("vertical"===n.dataset.direction){var o=n.clientHeight;t=1-(e.clientY-r.top)/o}return t}var ve=function(e){if(de(e)&&S.current)if("none"!==x||S.current.duration){if(S.current.duration){var n=S.current.duration*me(e);S.current.currentTime=n}}else K(!1),S.current.load(),ce(me(e))},fe=function(e){de(e)&&S.current&&(S.current.volume=me(e))},he=function(){U.current=D.current,window.addEventListener("mousemove",ve,!1),window.addEventListener("mouseup",(function(){U.current=null,window.removeEventListener("mousemove",ve,!1)}),{once:!0})},ge=function(){U.current=I.current,window.addEventListener("mousemove",fe,!1),window.addEventListener("mouseup",(function(){U.current=null,window.removeEventListener("mousemove",fe,!1)}),!1)};return e.createElement("div",{className:"rap-container ".concat(v),style:o(o(o({},b?{backgroundColor:b}:{}),w?{color:w}:{}),A)},se&&e.createElement("span",{title:"An error has occurred",className:"rap-pp-button",onClick:function(){S.current&&(K(!1),ue(!1),S.current.load())}},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!=w?w:"#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"}))),!B&&!se&&e.createElement("div",{className:"rap-loading"},e.createElement("div",{className:"rap-spinner"})),B&&!se&&e.createElement("div",{className:"rap-pp-button",onClick:function(){S.current&&("none"!==x||S.current.duration||K(!1),S.current.paused?(S.current.play(),Y(!0),T&&T()):(S.current.pause(),Y(!1),z&&z()))}},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!=w?w:"#566574",fillRule:"evenodd",d:F?c:p}))),e.createElement("div",{className:"rap-controls"},e.createElement("span",{className:"rap-current-time"},J),e.createElement("div",{className:"rap-slider","data-direction":"horizontal",onMouseDown:he,onClick:ve},e.createElement("div",{className:"rap-progress",style:o({width:W+"%"},k?{backgroundColor:k}:{})},e.createElement("div",{ref:D,className:"rap-pin","data-method":"rewind",onMouseDown:he,style:k?{backgroundColor:k}:{}}))),e.createElement("span",{className:"rap-total-time"},V)),e.createElement("div",{className:"rap-volume"},e.createElement("div",{className:"rap-volume-btn ".concat(_?"rap-volume-open":""),onClick:function(){return $((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:_?null!=k?k:"#007FFF":null!=w?w:"#566574",fillRule:"evenodd",d:oe}))),e.createElement("div",{className:"".concat("bottom"===C?"rap-vol-placement-bottom":"rap-vol-placement-top"," ").concat(_?"":"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:fe,onMouseDown:ge},e.createElement("div",{className:"rap-progress",style:o({height:"".concat(ne,"%")},k?{backgroundColor:k}:{})},e.createElement("div",{ref:I,className:"rap-pin","data-method":"changeVolume",style:k?{backgroundColor:k}:{},onMouseDown:ge})))),e.createElement("div",{className:"rap-backdrop",onClick:function(){return $(!1)}}))),e.createElement("audio",{ref:S,loop:g,preload:x,onCanPlay:function(){K(!0)},onEnded:function(){Y(!1),S.current&&(S.current.currentTime=0,L&&L())},onError:function(e){if(K(!0),ue(!0),M){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."}M(e,r)}},onLoadedMetadata:function(){var e,n;if(null===(e=S.current)||void 0===e?void 0:e.duration){Q(s(null!==(n=S.current.duration)&&void 0!==n?n:0));var r=S.current.duration*le;S.current.currentTime=r}},onTimeUpdate:function(){if(S.current){var e=S.current.currentTime,n=e/S.current.duration*100;X(n),H(s(e))}},onVolumeChange:function(){S.current&&(re(100*S.current.volume),S.current.volume>=.5?ae(a):S.current.volume<.5&&S.current.volume>.05?ae(i):S.current.volume<=.05&&ae(l))}},e.createElement("source",{src:f,type:"audio/mpeg"})))};export{v as AudioPlayer};
 //# sourceMappingURL=index.js.map

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

 import React from 'react';
 import './audioPlay.css';
 export interface AudioInterface {
+    className?: string;
     src: string;
     loop?: boolean;
+    preload?: 'auto' | 'metadata' | 'none';
     backgroundColor?: string;
@@ -7,0 +9,0 @@ color?: string;

dist/types.d.ts

@@ -8,4 +8,6 @@ import React from 'react';
 interface AudioInterface {
+    className?: string;
     src: string;
     loop?: boolean;
+    preload?: 'auto' | 'metadata' | 'none';
     backgroundColor?: string;
@@ -12,0 +14,0 @@ color?: string;

package.json

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

README.md

@@ -64,5 +64,10 @@ [![NPM](https://img.shields.io/npm/v/react-audio-play.svg)](https://www.npmjs.com/package/react-audio-play)
 
+- `className` (string, optional): A CSS class name for styling the component.
 - `src` (string, required): The URL or file path of the audio file to be played.
-- `loop` (boolean, optional): Set to true to loop the audio playback (default: false).
-- `volume` (number, optional): The initial volume level (0 to 100) of the audio (default: `100`).
+- `preload` (string, optional): Specifies the preload behavior for the audio file. Possible values are:
+    - `auto`: The audio data is loaded as soon as possible.
+    - `metadata`: Only metadata (e.g., duration) is loaded.
+    - `none`: No preloading. Audio data is only loaded when requested.
+- `loop` (boolean, optional): Set this to `true` to enable looping of the audio playback. Default is `false`.
+- `volume` (number, optional): The initial volume level of the audio, ranging from 0 to 100. Default is `100`.
 - `onPlay` (function, optional): Callback function to execute when the audio starts playing.
@@ -72,6 +77,7 @@ - `onPause` (function, optional): Callback function to execute when the audio is paused.
 - `onError` (function, optional): Callback function to execute if there's an error loading or playing the audio.
-- `backgroundColor` (string, optional): Set the background color of the audio player (default: `#fff`).
-- `color` (string, optional): The text and icon color of the audio player. (default: `#566574`).
-- `sliderColor` (string, optional): The color of the progress slider. (default: `#007FFF`)
-- `volumePlacement` (string, optional): Control where the volume controls are located (`top | bottom`).(default: `top`)
+- `backgroundColor` (string, optional): The background color of the audio player. Default is `#fff`.
+- `color` (string, optional): The text and icon color of the audio player. Default is `#566574`.
+- `sliderColor` (string, optional): The color of the progress slider. Default is `#007FFF`.
+- `volumePlacement` (string, optional): Specifies the placement of the volume controls. Possible values are `top` and `bottom`. Default is `top`.
+- `style` (object, optional): An object containing additional inline styles for the component.
 
@@ -78,0 +84,0 @@ ## Example with Custom Event Handling

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

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

Improved metrics

Total package byte prevSize

104009

increased by4.61%

Lines of code

210

increased by6.6%

Number of lines in readme file

122

increased by5.17%

No dependency changes