반응형
React 애플리케이션에 다음과 같이 오디오/비디오 요소를 추가하세요.
jsx
<audio src="your-audio-file.mp3" id="audio-element" controls>
Your browser does not support the audio element.
</audio>
또는 비디오 요소를 추가합니다.
jsx
<video src="your-file.mp4" id="video-element" controls>
Your browser does not support the video element.
</video>
음량조절은 다음과 같이 필요한 함수와 이벤트 핸들를 만들어 설정할 수 있습니다.
jsx
import React, { useRef } from 'react';
const SoundVolumeControl = () => {
const audioElement = useRef(null);
const handleVolumeChange = (e) => {
const volumeValue = e.target.value;
audioElement.current.volume = volumeValue;
};
return (
<div>
<audio src="your-audio-file.mp3" ref={audioElement} controls>
Your browser does not support the audio element.
</audio>
<input
type="range"
min="0"
max="1"
step="0.1"
defaultValue="1"
onChange={handleVolumeChange}
/>
</div>
);
};
export default SoundVolumeControl;
이 예제에서는 useRef 훅을 사용하여 audio 요소에 접근하고, handleVolumeChange 함수에서 volume 속성을 변경하여 해당 요소의 음량을 조절합니다.
input 태그는 사용자에게 음량을 조절할 수 있는 UI를 제공합니다. 음량 범위는 0 (음소거)에서 1 (최대)까지이며, 사용자가 입력 값을 변경할 때마다 onChange 이벤트가 호출됩니다. 이때 이벤트 핸들인 handleVolumeChange 함수에서 음량을 조절합니다.
반응형
'생각 > react' 카테고리의 다른 글
리액트 Suspense & lazy (0) | 2023.06.29 |
---|---|
useMemo와 useCallback (0) | 2023.06.26 |
react + next.js + ts (0) | 2023.06.20 |
React와 typescript와 next.js SSR (0) | 2023.06.16 |
react-query useQueryErrorResetBoundary 사용 예제 (0) | 2023.06.13 |