feat: doc updated added ref

Author: riyaddecoder

documentation/docs/.vitepress/components/AudioPlayerRefExample.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="el" />
+</template>
+
+<script setup>
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ref, onMounted, defineProps } from 'vue';
+import AudioPlayerWithRef from './AudioPlayerWithRef.jsx';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  }
+});
+
+const el = ref();
+
+onMounted(() => {
+  const root = createRoot(el.value);
+  root.render(createElement(AudioPlayerWithRef, { ...props }));
+});
+</script>
+<style>
+.audio-example-with-ref button {
+  padding: 1px 10px;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  margin-right: 3px;
+  margin-top: 5px;
+  box-shadow: 1px 1px 8px 3px #ececec;
+}
+
+.dark .audio-example-with-ref button {
+  box-shadow: none;
+}
+
+.audio-example-with-ref button:hover {
+  background: #ddd;
+}
+</style>

documentation/docs/.vitepress/components/AudioPlayerWithRef.jsx

@@ -0,0 +1,32 @@
+import React, { useRef } from 'react';
+import { AudioPlayer } from 'react-audio-play';
+
+export default function AudioPlayerWithRef(props) {
+  const playerRef = useRef(null);
+
+  const handlePlay = () => {
+    playerRef.current?.play();
+  };
+
+  const handlePause = () => {
+    playerRef.current?.pause();
+  };
+
+  const handleStop = () => {
+    playerRef.current?.stop();
+  };
+
+  const handleFocus = () => {
+    playerRef.current?.focus();
+  };
+
+  return (
+    <div className='audio-example-with-ref'>
+      <AudioPlayer ref={playerRef} src={props.src} />
+      <button onClick={handlePlay}>Play</button>
+      <button onClick={handlePause}>Pause</button>
+      <button onClick={handleStop}>Stop</button>
+      <button onClick={handleFocus}>Focus</button>
+    </div>
+  );
+}