experiments with howl

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 />

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);