ale/stream-radio
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

audio load

Browse Source 
Signed-off-by: ale <ale@manalejandro.com>
This commit is contained in:
ale 2025-05-20 01:53:56 +02:00
parent 92bef3e97b
commit 2076561a4d
Signed by: ale
GPG Key ID: 244A9C4DAB1C0C81
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.js
View File

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