react소리 조절

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 함수에서 음량을 조절합니다.