diff --git a/package-lock.json b/package-lock.json
index 53821a87..1debfa58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1522,7 +1522,8 @@
"asap": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
- "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+ "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+ "optional": true
},
"asn1": {
"version": "0.2.4",
@@ -3371,11 +3372,6 @@
"supports-color": "5.5.0"
}
},
- "change-emitter": {
- "version": "0.1.6",
- "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
- "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
- },
"chardet": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3499,6 +3495,9 @@
}
}
},
+ "classie": {
+ "version": "github:eiriklv/classie#da1d3019904433872a8656d3cd69fc41d69c477a"
+ },
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
@@ -4002,16 +4001,6 @@
"sha.js": "2.4.11"
}
},
- "create-react-class": {
- "version": "15.6.3",
- "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
- "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
- "requires": {
- "fbjs": "0.8.17",
- "loose-envify": "1.4.0",
- "object-assign": "4.1.1"
- }
- },
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5001,6 +4990,9 @@
"minimalistic-assert": "1.0.1"
}
},
+ "desandro-get-style-property": {
+ "version": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823"
+ },
"destroy": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -5068,6 +5060,17 @@
"buffer-indexof": "1.1.1"
}
},
+ "doc-ready": {
+ "version": "github:eiriklv/doc-ready#31c2481101af5dab33311fea4c7fc684b58fa8ad",
+ "requires": {
+ "eventie": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c"
+ },
+ "dependencies": {
+ "eventie": {
+ "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c"
+ }
+ }
+ },
"doctrine": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5272,14 +5275,6 @@
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
"dev": true
},
- "encoding": {
- "version": "0.1.12",
- "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
- "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
- "requires": {
- "iconv-lite": "0.4.24"
- }
- },
"end-of-stream": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5781,12 +5776,20 @@
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
},
+ "eventemitter": {
+ "version": "github:braznaavtrav/EventEmitter#7169056a2f8b3b55d78ab1b85bad39277e7e88b2"
+ },
"eventemitter3": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==",
"dev": true
},
+ "eventie": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/eventie/-/eventie-1.0.6.tgz",
+ "integrity": "sha1-1P/IsMK15JPCqhsiy+kY067nRDc="
+ },
"events": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -6103,27 +6106,6 @@
"websocket-driver": "0.7.3"
}
},
- "fbjs": {
- "version": "0.8.17",
- "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
- "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
- "requires": {
- "core-js": "1.2.7",
- "isomorphic-fetch": "2.2.1",
- "loose-envify": "1.4.0",
- "object-assign": "4.1.1",
- "promise": "7.3.1",
- "setimmediate": "1.0.5",
- "ua-parser-js": "0.7.20"
- },
- "dependencies": {
- "core-js": {
- "version": "1.2.7",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
- "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
- }
- }
- },
"figgy-pudding": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6980,6 +6962,12 @@
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
"integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
},
+ "get-size": {
+ "version": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+ "requires": {
+ "desandro-get-style-property": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823"
+ }
+ },
"get-stdin": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
@@ -7343,6 +7331,11 @@
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
"integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg=="
},
+ "howler": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/howler/-/howler-2.1.2.tgz",
+ "integrity": "sha512-oKrTFaVXsDRoB/jik7cEpWKTj7VieoiuzMYJ7E/EU5ayvmpRhumCv3YQ3823zi9VTJkSWAhbryHnlZAionGAJg=="
+ },
"hpack.js": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -7622,6 +7615,13 @@
"integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
"optional": true
},
+ "imagesloaded": {
+ "version": "github:eiriklv/imagesloaded#04535a148206e58790927e133f24ca199163b995",
+ "requires": {
+ "eventie": "1.0.6",
+ "wolfy87-eventemitter": "4.3.0"
+ }
+ },
"immutable": {
"version": "3.8.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
@@ -8125,7 +8125,8 @@
"is-stream": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
- "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+ "dev": true
},
"is-svg": {
"version": "2.1.0",
@@ -8188,15 +8189,6 @@
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
},
- "isomorphic-fetch": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
- "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
- "requires": {
- "node-fetch": "1.7.3",
- "whatwg-fetch": "3.0.0"
- }
- },
"isstream": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8629,11 +8621,6 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
},
- "lodash.merge": {
- "version": "4.6.2",
- "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
- "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
- },
"lodash.unescape": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@@ -8760,6 +8747,9 @@
"object-visit": "1.0.1"
}
},
+ "matches-selector": {
+ "version": "github:desandro/matches-selector#082376f4bbe7ff8c5c6bb258ec43259c9a80a7c3"
+ },
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -9177,15 +9167,6 @@
"lower-case": "1.1.4"
}
},
- "node-fetch": {
- "version": "1.7.3",
- "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
- "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
- "requires": {
- "encoding": "0.1.12",
- "is-stream": "1.1.0"
- }
- },
"node-forge": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -9729,6 +9710,22 @@
"os-tmpdir": "1.0.2"
}
},
+ "outlayer": {
+ "version": "github:eiriklv/outlayer#aea1c8239d30ccc1d3664ca3fff2f6d4b20fb812",
+ "requires": {
+ "desandro-get-style-property": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823",
+ "doc-ready": "github:eiriklv/doc-ready#31c2481101af5dab33311fea4c7fc684b58fa8ad",
+ "eventemitter": "github:braznaavtrav/EventEmitter#7169056a2f8b3b55d78ab1b85bad39277e7e88b2",
+ "eventie": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c",
+ "get-size": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+ "matches-selector": "github:desandro/matches-selector#082376f4bbe7ff8c5c6bb258ec43259c9a80a7c3"
+ },
+ "dependencies": {
+ "eventie": {
+ "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c"
+ }
+ }
+ },
"output-file-sync": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-2.0.1.tgz",
@@ -9794,6 +9791,15 @@
"resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
"integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
},
+ "packery": {
+ "version": "github:eiriklv/packery#8e812a0a16575ef923f5e72efcea85aadc6fea67",
+ "requires": {
+ "classie": "github:eiriklv/classie#da1d3019904433872a8656d3cd69fc41d69c477a",
+ "desandro-get-style-property": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823",
+ "get-size": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+ "outlayer": "github:eiriklv/outlayer#aea1c8239d30ccc1d3664ca3fff2f6d4b20fb812"
+ }
+ },
"pako": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
@@ -10816,6 +10822,7 @@
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+ "optional": true,
"requires": {
"asap": "2.0.6"
}
@@ -11119,79 +11126,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
"integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
},
- "react-jplayer": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/react-jplayer/-/react-jplayer-7.2.0.tgz",
- "integrity": "sha512-ic8+2wU75C1ZFgjWFI8Jo1NZHoQo5IlAcUyOiqK2UXix3JIyFjv99pIycJNZfoslzNoReuL0PcBYW508Fz31ng==",
- "requires": {
- "classnames": "2.2.6",
- "lodash.merge": "4.6.2",
- "prop-types": "15.7.2",
- "react": "15.6.2",
- "react-jplayer-utils": "3.1.5",
- "react-motion": "0.5.2",
- "recompose": "0.24.0",
- "screenfull": "3.3.3"
- },
- "dependencies": {
- "react": {
- "version": "15.6.2",
- "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
- "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
- "requires": {
- "create-react-class": "15.6.3",
- "fbjs": "0.8.17",
- "loose-envify": "1.4.0",
- "object-assign": "4.1.1",
- "prop-types": "15.7.2"
- }
- }
- }
- },
- "react-jplayer-utils": {
- "version": "3.1.5",
- "resolved": "https://registry.npmjs.org/react-jplayer-utils/-/react-jplayer-utils-3.1.5.tgz",
- "integrity": "sha1-L2PI7lW383x+/AkkHS42ZR5Bmnk=",
- "requires": {
- "prop-types": "15.7.2",
- "react-redux": "5.1.2",
- "recompose": "0.25.1"
- },
- "dependencies": {
- "react-redux": {
- "version": "5.1.2",
- "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.1.2.tgz",
- "integrity": "sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==",
- "requires": {
- "@babel/runtime": "7.6.3",
- "hoist-non-react-statics": "3.3.0",
- "invariant": "2.2.4",
- "loose-envify": "1.4.0",
- "prop-types": "15.7.2",
- "react-is": "16.10.2",
- "react-lifecycles-compat": "3.0.4"
- }
- },
- "recompose": {
- "version": "0.25.1",
- "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.25.1.tgz",
- "integrity": "sha512-EwFAv6UBrHbLIsIKHUZJ+BKdjTmyEsIrRlGO3R7PKu0S7hkgNznVDRvb+1upQUntURtBvxhYnTVQ3AcWOlsmWA==",
- "requires": {
- "change-emitter": "0.1.6",
- "fbjs": "0.8.17",
- "hoist-non-react-statics": "2.5.5",
- "symbol-observable": "1.2.0"
- },
- "dependencies": {
- "hoist-non-react-statics": {
- "version": "2.5.5",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
- "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
- }
- }
- }
- }
- },
"react-layout-pack": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/react-layout-pack/-/react-layout-pack-0.2.3.tgz",
@@ -11225,7 +11159,11 @@
"react-packery-component": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-packery-component/-/react-packery-component-1.0.2.tgz",
- "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk="
+ "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk=",
+ "requires": {
+ "imagesloaded": "github:eiriklv/imagesloaded#04535a148206e58790927e133f24ca199163b995",
+ "packery": "github:eiriklv/packery#8e812a0a16575ef923f5e72efcea85aadc6fea67"
+ }
},
"react-redux": {
"version": "6.0.1",
@@ -11421,24 +11359,6 @@
"readable-stream": "2.3.6"
}
},
- "recompose": {
- "version": "0.24.0",
- "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.24.0.tgz",
- "integrity": "sha512-7+UVym5Mfks/ukIDfcAiasrY61YGki8uIs4CmLTGU7UV2lm2ObbhOl913WrlsZKu8x8uA/sLJUOI5hxVga0dIA==",
- "requires": {
- "change-emitter": "0.1.6",
- "fbjs": "0.8.17",
- "hoist-non-react-statics": "1.2.0",
- "symbol-observable": "1.2.0"
- },
- "dependencies": {
- "hoist-non-react-statics": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
- "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
- }
- }
- },
"redent": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -12068,11 +11988,6 @@
"ajv-keywords": "3.4.1"
}
},
- "screenfull": {
- "version": "3.3.3",
- "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-3.3.3.tgz",
- "integrity": "sha512-DzYUuXr+OV2BDvYXaYzlYgJd4WXZZ2CW5NFC7Kw6TUCpzXJAx4MwlVD6CH+Mu6fi8rfAQIQfqdFZ4jtDsEkWig=="
- },
"scrypt": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/scrypt/-/scrypt-6.0.3.tgz",
@@ -13692,11 +13607,6 @@
"typescript-compare": "0.0.2"
}
},
- "ua-parser-js": {
- "version": "0.7.20",
- "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
- "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
- },
"uglify-js": {
"version": "3.4.10",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -14731,11 +14641,6 @@
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
"dev": true
},
- "whatwg-fetch": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
- "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
- },
"whet.extend": {
"version": "0.9.9",
"resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
@@ -14763,6 +14668,11 @@
"string-width": "2.1.1"
}
},
+ "wolfy87-eventemitter": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/wolfy87-eventemitter/-/wolfy87-eventemitter-4.3.0.tgz",
+ "integrity": "sha1-ZJc5bJXnQ1nwa241QJM5MY2Nlk8="
+ },
"wordwrap": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/package.json b/package.json
index 76600f7f..d31bef63 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
"eslint-plugin-react-hooks": "^1.7.0",
"flexbin": "^0.2.0",
"history": "^4.10.1",
+ "howler": "^2.1.2",
"http-errors": "~1.6.2",
"less": "^3.10.3",
"less-middleware": "~2.2.1",
diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx
index 9a27c582..496bff7a 100644
--- a/src/components/main/Header/index.tsx
+++ b/src/components/main/Header/index.tsx
@@ -1,8 +1,9 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
import { connect } from 'react-redux';
import { push as historyPush } from 'connected-react-router';
import { Link } from 'react-router-dom';
import { Logo } from '~/components/main/Logo';
+import { Player } from '~/utils/player';
import * as style from './style.scss';
import { Filler } from '~/components/containers/Filler';
@@ -24,6 +25,10 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
+ useEffect(() => {
+ console.log({ Player });
+ }, []);
+
return (
<div className={style.container}>
<Logo />
diff --git a/src/utils/player.ts b/src/utils/player.ts
new file mode 100644
index 00000000..6371b575
--- /dev/null
+++ b/src/utils/player.ts
@@ -0,0 +1,11 @@
+import { Howl } from 'howler';
+
+Howl.prototype.setSrc = function setSrc(src) {
+ this.unload();
+ this._src = src;
+ this.load();
+};
+
+export const Player = new Howl({ src: [''] });
+
+console.log('PLAYER', Player);