audio load

Signed-off-by: ale <ale@manalejandro.com>

src/App.js

@@ -1,5 +1,5 @@
 import "./App.css";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import WaveForm from "./WaveForm";
 
 const App = () => {
@@ -16,11 +16,11 @@ const App = () => {
     audioElmRef = useRef(null),
     audioAnalyzer = () => {
       const audioCtx = new (window.AudioContext || window.webkitAudioContext)(),
+        source = audioCtx.createMediaElementSource(audioElmRef.current),
         analyzer = audioCtx.createAnalyser()
       analyzer.fftSize = 2048
       const bufferLength = analyzer.frequencyBinCount,
-        dataArray = new Uint8Array(bufferLength),
-        source = audioCtx.createMediaElementSource(audioElmRef.current)
+        dataArray = new Uint8Array(bufferLength)
       source.connect(analyzer)
       source.connect(audioCtx.destination)
       source.onended = () => {
@@ -102,10 +102,10 @@ const App = () => {
       <div>
         <h2>Audio Controls</h2>
         {audioElmRef.current?.paused ?
-          <button onClick={() => {
+          <button onClick={() => useCallback(async () => {
             setMuted(false)
-            audioElmRef.current?.play()
-          }}>Play ⏯️</button> :
+            await audioElmRef.current?.play()
+          }, [audioElmRef.current])}>Play ⏯️</button> :
           <button onClick={() => audioElmRef.current?.pause()}>Pause ⏯️</button>
         }
         <br /><br />