diff --git a/apps/common-app/src/examples/AudioTag/AudioTag.tsx b/apps/common-app/src/examples/AudioTag/AudioTag.tsx index 7ff67d93c..ea8645f73 100644 --- a/apps/common-app/src/examples/AudioTag/AudioTag.tsx +++ b/apps/common-app/src/examples/AudioTag/AudioTag.tsx @@ -1,58 +1,140 @@ -import React, { useRef } from 'react'; -import { Button, View } from 'react-native'; +import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react'; +import { Text, useWindowDimensions, View } from 'react-native'; import { Audio, AudioTagHandle, } from 'react-native-audio-api/development/react'; +import { AudioContext, GainNode } from 'react-native-audio-api'; -import { Container } from '../../components'; +import { Button, Container, Slider, Spacer } from '../../components'; // const DEMO_AUDIO_URL = 'https://filesamples.com/samples/audio/m4a/sample4.m4a'; const DEMO_AUDIO_URL = 'https://filesamples.com/samples/audio/mp3/sample4.mp3'; const AudioTag: React.FC = () => { + const { width: screenWidth } = useWindowDimensions(); const audioRef = useRef(null); + const [sliderVolume, setSliderVolume] = useState(1); + const volumeRef = useRef(1); + const audioContextRef = useRef(new AudioContext()); + const gainNodeRef = useRef(null); - // const handlePlay = () => { - // audioRef.current?.play(); - // }; + const ensureMediaElementRoute = useCallback(() => { + if (!audioRef.current) { + throw new Error('Audio tag handle is not ready yet.'); + } - // const handlePause = () => { - // audioRef.current?.pause(); - // }; + const ctx = audioContextRef.current; + const mediaElementSource = ctx.createMediaElementSource(audioRef.current); + gainNodeRef.current = ctx.createGain(); + gainNodeRef.current.gain.value = volumeRef.current; - // const handleSeekToTime = (time: number) => { - // console.log('handleSeekToTime', time); - // audioRef.current?.seekToTime(time); - // }; + const biquad = ctx.createBiquadFilter(); + biquad.type = 'highpass'; + biquad.frequency.value = 5000; + mediaElementSource.connect(biquad); + biquad.connect(gainNodeRef.current); + gainNodeRef.current.connect(ctx.destination); + audioRef.current?.play(); + }, []); - // const handleSetVolume = (volume: number) => { - // audioRef.current?.setVolume(volume); - // }; + const handleVolumeChange = useCallback((nextVolume: number) => { + setSliderVolume(nextVolume); + volumeRef.current = nextVolume; + audioRef.current?.setVolume(nextVolume); + if (gainNodeRef.current) { + gainNodeRef.current.gain.value = nextVolume; + } + }, []); - // const handleSetMuted = (muted: boolean) => { - // audioRef.current?.setMuted(muted); - // }; + const handleLoadStart = useCallback(() => { + // console.log('onLoadStart'); + }, []); + const handleLoad = useCallback(() => { + // console.log('onLoad'); + }, []); + const handleError = useCallback((error: Error) => { + // console.log('onError', error); + }, []); + const handlePositionChange = useCallback( + (seconds: number) => { + // console.log('onPositionChange', seconds); + }, + [] + ); + const handleEnded = useCallback(() => { + // console.log('onEnded'); + }, []); + const handlePlay = useCallback(() => { + // console.log('onPlay'); + }, []); + const handlePause = useCallback(() => { + // console.log('onPause'); + }, []); + const handleVolumeEvent = useCallback( + (volume: number) => { + // console.log('onVolumeChange', volume); + }, + [] + ); + + const audioTagElement = useMemo( + () => ( +