HTML5 Audio player for react app with typeScript
npm install sharmanka-tsts
const someFunction = () => {
console.log(Current time: ${Sharmanka.currentTime});
if (Sharmanka.currentTime >= Sharmanka.duration) {
console.log('Track ended');
Sharmanka.removeEvent('timeupdate', someFunction);
}
}
Sharmanka.onTick(someFunction);
`
Events
* onPlay - fires when audio track begins playing.
* onPause - fires when audio track was paused.
* onStart - fires when audio track begins playing by start.
* onEnd - fires when audio track was ending.
* onLoad - fires when audio track was loaded.
* onTick - fires when audio track change current time.
* onBuffer - fires when audio track was buffered.
* onLoadError - fires when load audio track was crushed.
* onError - fires when playing audio track was crushed.
Observers
* observers: SharmankaObserver[] - an array of observers
* addaddObserver(observer: SharmankaObserver) - add some observers
* removeObserver(observer: SharmankaObserver) - remove observer
`ts
//components/SomeComponent/index.ts
const [time, setTime] = useState(0);
useEffect(() => {
const listeners:SharmankaObserver = {
onTick: () => {
setTime(Sharmanka.currentTime);
},
onBuffer: () => {}
};
Sharmanka.addObserver(listeners);
return () => {
Sharmanka.removeObserver(listeners);
};
}, []);
//components/SharmankaWrapper/index.ts
Sharmanka.onTick(() => {
Sharmanka.observers.forEach((obs: SharmankaObserver) => obs.onTick(Sharmanka.currentTime));
});
`
States
* isPlay - return boolean for audio track playing.
* isMuted - return boolean for mute.
* isLooped - return boolean for loop.
Example
`ts
//components/SharmankaWrapper/index.ts
import Sharmanka from 'sharmanka-ts';
import { useCallback, useEffect } from 'react';
export default function SharmankaWrapper(){
const sharmankaInitEvents = useCallback(() => {
Sharmanka.onTick(() => {
//do smth on tick
Sharmanka.observers.forEach((obs: SharmankaObserver) => obs.onTick(Sharmanka.currentTime));
});
Sharmanka.onPlay(() => {
//do smth, when audio get 'playing' event. F.E. - alert for others browser tabs to stop playing
});
/others/
})
useEffect(() => {
if (!Sharmanka.node) {
Sharmanka.init();
sharmankaInitEvents();
}
}, [sharmankaInitEvents]);
return null;
}
//mainLayout.tsx
import SharmankWrapper from @components/SharmankaWrapper
export default function RootLayout(){
return(
{children}
);
}
``