@ethanol/ionic-react-hooks

Ionic react hooks by Ethan Olsen

This library is not still being developed and is not to be used in applications till done.

Install

npm install --save @ethanol/ionic-react-hooks

Usage

useAudioPlayer

import React from 'react'

import { useAudioPlayer } from '@ethanol/ionic-react-hooks'

interface Props {
  audioUrl: string
}

export const AudioComponent = ({ audioUrl }: Props) => {
  // ---- hooks ----
  // > refs
  const progressRef = useRef<HTMLInputElement>(null!)

  // > player
  const {
    curTime,
    duration,
    isLoading,
    isPaused,
    seekTo,
    skip,
    togglePlayPause
  } = useAudioPlayer({
    audioUrl: audioUrl,
    progressRef: progressRef
  })

  return (
    <div>
      {/* Display current time and duration */}
      <p>
        {curTime}/{duration}
      </p>
      {/* Progress slider */}
      <input
        type='range'
        ref={progressRef}
        onChange={(e) => seekTo(parseInt(e?.target?.value ?? curTime))}
      />
      {/* Play pause */}
      <button onClick={togglePlayPause}>{isPaused ? 'Play' : 'Pause'}</button>
      {/* Skip 15 seconds forward and backwards */}
      <button onClick={() => skip(15)}>Skip +15</button>
      <button onClick={() => skip(-15)}>Skip -15</button>
    </div>
  )
}

License

MIT © o2dependent