Morioh
Login
Duck Hwan

Duck Hwan

7 months ago

React.js에서 버튼 클릭 시 MP3 음악 파일을 재생하는 방법

MP3 음악은 MP3 형식을 사용하여 인코딩된 디지털 오디오 파일을 말합니다. MPEG-1 Audio Layer III의 약자인 MP3는 높은 수준의 음질을 유지하면서 파일 크기를 크게 줄이는 널리 사용되는 오디오 압축 형식입니다. 따라서 MP3 음악 파일은 디지털 장치에 음악을 저장하고 전송하는 데 이상적입니다.

이 튜토리얼에서는 부트스트랩과 함수형 컴포넌트를 사용하여 React js에서 버튼 클릭 시 MP3 음악 파일을 재생하는 방법을 알아봅니다. React js의 버튼을 사용하여 MP3 음악 파일을 재생하려면 다음 단계를 따르세요.

  • 1단계: React 앱 설치
  • 2단계: 부트스트랩 라이브러리 설치
  • 3단계: 구성요소 파일 생성
  • 4단계: MP3 음악 파일 재생
  • 5단계: App.js 파일 업데이트
  • 6단계: 브라우저에서 앱 보기

1단계: React 앱 설치

React 프로젝트를 생성하려면 create-react-app 도구를 사용하여 설치해야 합니다.

터미널 화면에 주어진 명령을 입력해야 합니다. 원하는 경우 앱 이름을 변경할 수 있습니다.

npx create-react-app my-react-app

이제 앱 폴더 안으로 들어가야 합니다.

cd my-react-app

2단계: 부트스트랩 라이브러리 설치

오디오 파일에서 음악을 호출하는 버튼을 디자인하기 위해 부트스트랩 CSS 프레임워크를 사용할 수 있습니다.

사용자 정의 CSS를 작성할 수 있다면 이 패키지는 필수가 아닙니다.

npm i bootstrap --legacy-peer-deps

3단계: 구성요소 파일 생성

다음으로, comminors/라는 이름으로 새 폴더를 생성한 후 새 파일을 만들고 이름을 지정하세요 UserProfile.js 파일.

다음은 React에서 기본 함수 구성 요소가 어떻게 보이는지 보여줍니다.

import React from 'react'
function UserProfile() {
  return (
    <div></div>
  )
}
export default UserProfile

4단계: MP3 음악 파일 재생

initAudio() 메서드는 버튼 DOM 요소에 대한 액세스 권한을 얻습니다.

audio 태그 뒤에 source를 사용하면 src 태그에 파일 소스 경로를 전달할 수 있습니다.

comComponents/UserProfile.js 파일에 코드를 추가하세요.

import React from "react";
function UserProfile() {
  let initAudio = () => {
    const targetAudio = document.getElementsByClassName("audioBtn")[0];
    targetAudio.play();
  };
  return (
    <div>
      <button className="btn btn-danger" onClick={initAudio}>
        Play Mp3 Audio
      </button>
      <audio className="audioBtn">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></source>
      </audio>
    </div>
  );
}
export default UserProfile;

5단계: App.js 파일 업데이트

이 단계에서는 App.js 파일을 엽니다. 이 파일은 React의 주요 진입점입니다.

App() 메소드 내부에 컴포넌트를 등록해야 합니다.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import UserProfile from "./components/UserProfile";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Play Mp3 Audio File Example</h2>
      <UserProfile />
    </div>
  );
}
export default App;

6단계: 브라우저에서 앱 보기

마지막으로 주어진 명령을 입력하고 호출하여 React 애플리케이션을 시작합니다.

npm start

브라우저에서 앱을 실행할 URL은 다음과 같습니다.

http://localhost:3000

이 튜토리얼에서는 외부 라이브러리를 사용하지 않고 버튼 전환이나 React js 클릭 시 MP3 음악 파일을 재생하는 버튼을 만드는 방법을 배웠습니다.

읽어 주셔서 감사합니다 !!!

1.60 GEEK