Merge pull request #7 from samhirtarif/add_support_for_native_props

Add support for native props

Author: samhirtarif

README.md

@@ -46,10 +46,28 @@ const Player = () => {
 }
 
 ```
+## Audio element native props
+| Props  | Description | Default | Optional |
+| :------------ |:--------------- |:--------------- | :--------------- |
+| **`src`**  | The address or URL of the a audio resource that is to be considered | N/A | No |
+| **`volume`** | Initial volume level for the audio, minimum being `0`, maximum being `1` | `0.75` | Yes |
+| **`loop`** | Sets a flag to specify whether playback should restart after it completes | `false` | Yes |
+| **`muted`** | Sets a flag that indicates whether the audio is muted | `false` | Yes |
+| **`autoplay`** | Sets a value that indicates whether to start playing the media automatically | `false` | Yes |
+| **`crossOrigin`** | The CORS setting for this media element. [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin) | `null` | Yes |
+| **`autoplay`** | Sets a value indicating what data should be preloaded, if any. Allowed values `""`, `"none"`, `"metadata"`, `"auto"` | `""` | Yes |
+| **`playbackRate`** | Sets the rate at which media is being played back | `1.0` | Yes |
+---
+<br>
 
+## Audio element events
+#### `AudioPlayer` supports all the events for `HTMLMediaElement` ([MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#events)). All of the events listed in the MDN docs can be passed as a prop to the `AudioPlayer`
+---
+<br>
+
+## Audio player props
 | Props  | Description | Default | Optional |
 | :------------ |:--------------- |:--------------- | :--------------- |
-| **`src`**  | Source for the audio file that needs to be played | N/A | No |
 | **`minimal`** | Displays a minimal version of the audio player, with only the play/pause button, track bar and timestamp | `false` | Yes |
 | **`width`** | Width of the audio player | N/A | No |
 | **`barWidth`** | Width of each individual bar in the visualization | `2` | Yes |     
@@ -61,11 +79,10 @@ const Player = () => {
 | **`barPlayedColor`** |  Color for the bars that have been played | `"rgb(160, 198, 255)""` | Yes |
 | **`allowSkip`** |  Represents whether the skip forward/backward options should be displayed | `true` | Yes |
 | **`skipDuration`** |  The number of seconds to skip forward/backward | `5` | Yes |
-| **`initialVolume`** |  Initial volume for the audio, minimum being `0`, maximum being `1` | `0.75` | Yes |
-| **`loop`** |  Setting this to `true` will keep playing the audio in a loop | `false` | Yes |
 | **`showLoopOption`** |  Represents whether to show the loop options | `true` | Yes |
 | **`showVolumeControl`** |  Represents whether the volume control should be shown | `true` | Yes |
 | **`seekBarColor`** |  Color for the audio seek bar | `rgba(140, 140, 140)` | Yes |
 | **`volumeControlColor`** |  Color for the volumn control | `rgba(140, 140, 140)` | Yes |
 | **`hideSeekBar`** |  Hides the seek bar if set to `true`, the audio will still be seekable | `false` | Yes |
 | **`hideSeekKnobWhenPlaying`** |  Hides the seek knob when audio is playing if set to `true` | `false` | Yes |
+

package-lock.json

@@ -1,21 +1,35 @@
 {
   "name": "react-audio-player-component",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/samhirtarif/react-audio-player.git"
   },
   "keywords": [
+    "react",
+    "reactjs",
+    "react-audio-player",
+    "react-audio-playback",
+    "react-voice-player",
+    "react-voice-playback",
+    "react-audio-player-component",
+    "react audio player",
+    "react audio playback",
+    "react voice player",
+    "react voice playback",
     "audio",
     "voice",
     "player",
     "audio player",
     "audio playback",
     "voice player",
-    "voice playback"
+    "voice playback",
+    "media",
+    "media-player",
+    "media player"
   ],
   "files": [
     "dist"
@@ -34,13 +48,14 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest test.tsx",
+    "tf": "vitest",
     "test:browser": "karma start",
     "coverage": "vitest run --coverage",
     "lint": "eslint src/**/*.ts{,x}",
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
-    "react-audio-visualize": "^1.0.0"
+    "react-audio-visualize": "^1.1.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.3.0",

package.json

@@ -10,11 +10,67 @@ import repeatSVG from "../icons/repeat.svg";
 import repeatOneSVG from "../icons/repeat-one.svg";
 import Timer from "./Timer";
 
-interface AudioPlayerProps {
+interface AudioElementNativeProps {
   /**
-   * Source for the audio file that needs to be played
+   * The address or URL of the a audio resource that is to be considered.
    */
   src: string;
+  /**
+   * Sets a flag to specify whether playback should restart after it completes. Defaults to `false`
+   */
+  loop?: boolean;
+  /**
+   * Initial volume level for the audio, minimum being `0`, maximum being `1`. Defaults to `0.75`
+   */
+  volume?: number;
+  /**
+   * Sets a flag that indicates whether the audio is muted. Defaults to `false`
+   */
+  muted?: boolean;
+  /**
+   * Sets a value that indicates whether to start playing the media automatically. Defaults to `false`
+   */
+  autoplay?: boolean;
+  /**
+   * The CORS setting for this media element. {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin MDN Reference}. Defaults to `null`
+   */
+  crossOrigin?: string;
+  /**
+   * Sets a value indicating what data should be preloaded, if any. Defaults to empty string
+   */
+  preload?: "" | "none" | "metadata" | "auto";
+  /**
+   * Sets the rate at which media is being played back. Defaults to `1.0`
+   */
+  playbackRate?: number;
+}
+
+interface AudioElementEventProps {
+  onabort?: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+  oncanplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  oncanplaythrough?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  ondurationchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onemptied?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onended?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onerror?: OnErrorEventHandler | null;
+  onloadeddata?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onloadedmetadata?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onloadstart?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onpause?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onplaying?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onprogress?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onratechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onseeked?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onseeking?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onstalled?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onvolumechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+  onwaiting?: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+}
+
+interface AudioPlayerProps {
   /**
    * Displays a minimal version of the audio player, with only the play/pause button, track bar and timestamp. Defaults to `false`
    */
@@ -31,7 +87,6 @@ interface AudioPlayerProps {
    * Gap between each individual bar in the visualization. Defaults to `1`
    */
   gap?: number;
-
   /**
    * Represents whether the audio visualization (waveform) should be displayed. Defaults to `true`
    */
@@ -52,7 +107,6 @@ interface AudioPlayerProps {
    * Bar color for the bars that have been played
    */
   barPlayedColor?: string;
-
   /**
    * Represents whether the skip forward/backward options should be displayed. Defaults to `true`. Not applicable when `minimal` is set to `true`
    */
@@ -61,14 +115,6 @@ interface AudioPlayerProps {
    * The number of seconds to skip forward/backward. Defaults to `5`
    */
   skipDuration?: number;
-  /**
-   * Initial volume for the audio, minimum being `0`, maximum being `1`. Defaults to `0.75`
-   */
-  initialVolume?: number;
-  /**
-   * Setting this to `true` will keep playing the audio in a loop. Defaults to `false`
-   */
-  loop?: boolean;
   /**
    * Represents whether to show the loop options. Defaults to `true`
    */
@@ -95,8 +141,42 @@ interface AudioPlayerProps {
   hideSeekKnobWhenPlaying?: boolean;
 }
 
-const AudioPlayer: React.FC<AudioPlayerProps> = ({
+const AudioPlayer: React.FC<
+  AudioElementNativeProps & AudioElementEventProps & AudioPlayerProps
+> = ({
+  // native props
   src,
+  loop = false,
+  volume = 0.75,
+  muted = false,
+  autoplay = false,
+  crossOrigin = null,
+  preload = "",
+  playbackRate = 1.0,
+  // audio element events
+  onabort = null,
+  oncanplay = null,
+  oncanplaythrough = null,
+  ondurationchange = null,
+  onemptied = null,
+  onended = null,
+  onerror = null,
+  onloadeddata = null,
+  onloadedmetadata = null,
+  onloadstart = null,
+  onpause = null,
+  onplay = null,
+  onplaying = null,
+  onprogress = null,
+  onratechange = null,
+  onseeked = null,
+  onseeking = null,
+  onstalled = null,
+  onsuspend = null,
+  ontimeupdate = null,
+  onvolumechange = null,
+  onwaiting = null,
+  // Audio player props
   minimal = false,
   width,
   trackHeight = 75,
@@ -108,8 +188,6 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
   barPlayedColor,
   allowSkip = true,
   skipDuration = 5,
-  initialVolume = 0.75,
-  loop = false,
   showLoopOption = true,
   showVolumeControl = true,
   seekBarColor,
@@ -122,7 +200,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
   const [currentTime, setCurrentTime] = useState<number>(0);
   const [duration, setDuration] = useState<number>(0);
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
-  const [volume, setVolume] = useState<number>(initialVolume);
+  const [internalVolume, setVolume] = useState<number>(volume);
   const [isMuted, setIsMuted] = useState<boolean>(false);
   const [isLoop, setIsLoop] = useState<boolean>(loop);
 
@@ -131,8 +209,35 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
       .then(async (response): Promise<Blob> => {
         const blob = await response.blob();
         audio.src = URL.createObjectURL(blob);
-        audio.volume = initialVolume;
+        audio.volume = volume;
         audio.loop = loop;
+        audio.muted = muted;
+        audio.autoplay = autoplay;
+        audio.crossOrigin = crossOrigin;
+        audio.preload = preload;
+        audio.playbackRate = playbackRate;
+        audio.onabort = onabort;
+        audio.oncanplay = oncanplay;
+        audio.oncanplaythrough = oncanplaythrough;
+        audio.ondurationchange = ondurationchange;
+        audio.onemptied = onemptied;
+        audio.onended = onended;
+        audio.onerror = onerror;
+        audio.onloadeddata = onloadeddata;
+        audio.onloadedmetadata = onloadedmetadata;
+        audio.onloadstart = onloadstart;
+        audio.onpause = onpause;
+        audio.onplay = onplay;
+        audio.onplaying = onplaying;
+        audio.onprogress = onprogress;
+        audio.onratechange = onratechange;
+        audio.onseeked = onseeked;
+        audio.onseeking = onseeking;
+        audio.onstalled = onstalled;
+        audio.onsuspend = onsuspend;
+        audio.ontimeupdate = ontimeupdate;
+        audio.onvolumechange = onvolumechange;
+        audio.onwaiting = onwaiting;
         setBlob(blob);
         return blob;
       })
@@ -345,7 +450,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
                 }}
               />
               <TrackBar
-                current={volume}
+                current={internalVolume}
                 total={1}
                 setCurrent={setAudioVolume}
                 color={volumeControlColor}

src/components/AudioPlayer.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { expect, test, vi } from "vitest";
 import renderer from "react-test-renderer"
-import userEvent from "@testing-library/user-event";
-import { render, act, screen } from "@testing-library/react";
 import { AudioPlayer } from "../src/components/AudioPlayer";
 
 describe("Test AudioPlayer", () => {