Add audio element native props

Author: samhirtarif

README.md

@@ -46,10 +46,20 @@ 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 |
+---
+## Audio player props 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,8 +71,6 @@ 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 |

package-lock.json

@@ -34,13 +34,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,39 @@ 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";
+}
+
+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 +59,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 +79,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 +87,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 +113,16 @@ interface AudioPlayerProps {
   hideSeekKnobWhenPlaying?: boolean;
 }
 
-const AudioPlayer: React.FC<AudioPlayerProps> = ({
+const AudioPlayer: React.FC<AudioElementNativeProps & AudioPlayerProps> = ({
+  // native props
   src,
+  loop = false,
+  volume = 0.75,
+  muted = false,
+  autoplay = false,
+  crossOrigin = null,
+  preload = "",
+  // Audio player props
   minimal = false,
   width,
   trackHeight = 75,
@@ -108,8 +134,6 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
   barPlayedColor,
   allowSkip = true,
   skipDuration = 5,
-  initialVolume = 0.75,
-  loop = false,
   showLoopOption = true,
   showVolumeControl = true,
   seekBarColor,
@@ -122,7 +146,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 +155,12 @@ 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;
         setBlob(blob);
         return blob;
       })
@@ -345,7 +373,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", () => {