Example Usage

Below are examples of how you can use the AudioPlayer component. Replace path/to/audio.mp3 with the actual URL or path of your audio file.

Example 1: Basic usage with default props

import { AudioPlayer } from "react-audio-play";  export default function App() {  return <AudioPlayer src="path/to/audio.mp3" />; }

Preview

Music Source: Kotha koio na - Coke Studio

Example 2: Looping audio, set the volume to 50% and volume control placement bottom

import { AudioPlayer } from "react-audio-play";  export default function App() {  return (  <AudioPlayer  loop  src="path/to/audio.mp3"  volume={50}  volumePlacement="bottom"  />  ); }

Preview

Music Source: Anmone - Aurthohin

Example 3: Using audio callbacks

import { AudioPlayer } from "react-audio-play";  export default function App() {  const handlePlay = () => {  console.log("Audio started playing");  };   const handlePause = () => {  console.log("Audio paused");  };   const handleEnd = () => {  console.log("Audio ended");  };   const handleError = (event, errorMessage) => {  console.log(errorMessage);  };   return (  <AudioPlayer  src="path/to/audio.mp3"  onPlay={handlePlay}  onPause={handlePause}  onEnd={handleEnd}  onError={handleError}  />  ); }

Preview

Music Source: Anmone 2 - Aurthohin

Example 4: Usage with ref (available from v1.0.4)

import { useRef } from 'react'; import { AudioPlayer, AudioPlayerRef } from 'react-audio-play';  function App() {  const playerRef = useRef<AudioPlayerRef>(null);   const handlePlay = () => {  playerRef.current?.play();  };   const handlePause = () => {  playerRef.current?.pause();  };   const handleStop = () => {  playerRef.current?.stop();  };   const handleFocus = () => {  playerRef.current?.focus();  };   return (  <div>  <AudioPlayer ref={playerRef} src="path/to/audio.mp3" autoPlay />  <button onClick={handlePlay}>Play</button>  <button onClick={handlePause}>Pause</button>  <button onClick={handleStop}>Stop</button>  <button onClick={handleFocus}>Focus</button>  </div>  ); }

Preview

Music Source: Poth Chola - Artcell

Example 5: Darkmode using basic style props

import { AudioPlayer } from "react-audio-play";  export default function App() {  return (  <AudioPlayer  src="path/to/audio.mp3"  color="#cfcfcf"  sliderColor="#94b9ff"  backgroundColor="#2c2828"  />  ); }

Preview

Music Source: Poth Chola - Artcell

Example 6: Using Style Object

import { AudioPlayer } from "react-audio-play";  export default function App() {  return (  <AudioPlayer  src="path/to/audio.mp3"  color="#f7b5cd"  sliderColor="#ff669d"  style={{ background: "#000", borderRadius: "15px", padding: "30px" }}  />  ); }

Preview

Music Source: Anmone 2 - Aurthohin

Example 7: Using Custom CSS

CSS

.custom-style.rap-container {  background-color: #000000;  background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);  color: aliceblue; }  .custom-style.rap-container .rap-pp-icon path, .custom-style.rap-container .rap-volume-btn path {  fill: white; }  .custom-style.rap-container .rap-slider .rap-progress {  background-color: #daecff; }  .custom-style.rap-container .rap-volume .rap-volume-controls {  background-color: #000000;  background-image: linear-gradient(147deg, #000000 0%, #04619f 74%); }  .custom-style.rap-container .rap-slider .rap-progress .rap-pin {  background-color: #c3d5ff;  box-shadow: 0 0 9px 7px #269eff52; }  .custom-style.rap-container svg.rap-pp-icon:hover, .custom-style.rap-container .rap-volume-btn svg:hover {  filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.9)); }

TSX

import { AudioPlayer } from "react-audio-play";  export default function App() {  return <AudioPlayer className="custom-style" src="path/to/audio.mp3" />; }

WARNING

Use a wrapper class to avoid CSS override issues. Ex: .custom-style

Preview

Music Source: Kotha koio na - Coke Studio

Example 8: More Playing With CSS

CSS

.custom-style.rap-container {  background-color: #e4e4e4;  color: #566574;  border-radius: 20px; }  .custom-style.rap-container .rap-slider .rap-progress {  background-color: #959595; }  .custom-style.rap-container .rap-slider .rap-progress .rap-pin {  background-color: #566574;  height: 18px;  width: 18px;  border-radius: 10px; }  .custom-style.rap-container .rap-controls .rap-slider .rap-progress .rap-pin {  top: -5px; }  .custom-style.rap-container .rap-controls .rap-slider {  height: 8px;  border-radius: 4px; }  .custom-style.rap-container .rap-volume .rap-volume-btn.rap-volume-open path {  fill: #000; }  .custom-style.rap-container .rap-volume .rap-volume-controls {  background-color: #e4e4e4; }  .custom-style.rap-container .rap-volume .rap-volume-controls .rap-slider, .custom-style.rap-container  .rap-volume  .rap-volume-controls  .rap-slider  .rap-progress {  width: 8px; }

TSX

import { AudioPlayer } from "react-audio-play";  export default function App() {  return <AudioPlayer className="custom-style" src="path/to/audio.mp3" />; }

WARNING

Use a wrapper class to avoid CSS override issues. Ex: .custom-style

Preview

Music Source: Anmone - Aurthohin