반응이있는 간단한 음악 플레이어 만들기

Feb 2, 2026

어떻게

반응 사용자 인터페이스를 구축하기위한 인기있는 JavaScript 라이브러리 이며이 튜토리얼에서는 간단한 대화 형 음악 플레이어를 만드는 방법을 보여줄 수 있습니다. 우리는 Codepen에서 일할 것입니다. 모든 구성 요소를 repo 꽤 쉽게 이식 할 수 있기 때문에이 프로젝트를 반응 응용 프로그램 안에 쓸 수 있습니다.

우리는 탐험 할 것입니다 소품 , 상태 성분이 어떻게 작동하고 반응 생태계 내부에서 서로 통신하는 방식. 우리는 또한 사용하고 있습니다 글꼴 굉장한 따라서 Codepen CSS 패널에 포함되어 있는지 확인하십시오.

당신을 아주 빨리 대응시키고 달리기 위해, 나는 함께 착용했다. 코드 펜에서 당신을위한 컬렉션 그리고 그것을 단계로 분할하므로 어떤 시점에서 뛰어 올 수 있고, 그곳에서 포크를하고 그곳에서 앞으로 나아갈 수 있습니다. 나는 또한 당신을 위해 CSS를 작성했기 때문에 반응에 집중할 수 있으며, 그것이 모든 일을하는 방식을 방해 할 수 있습니다.

반응 UI를 만듭니다

시작하자! 첫째, 우리는 반응에 일부 구성 요소를 만들어야합니다. 우리는 코드를 가져갈 것입니다 수반 펜에서 1 단계 , 그것을 구성 요소로 변환하십시오. 다른 모든 것을 내부에 넣을 주요 구성 요소를 만들어 보겠습니다. 이 구성 요소를 호출 할 것입니다 플레이어 ...에

구성 요소를 만드는 코드는 다음과 같습니다.

 플레이어 = React.CreateClass ({
  렌더링 : function () {return (
      & lt; div classname = "player"& gt;
        & lt; childcomponent / & gt; // 이것은 안쪽에 중첩 된 자식 구성 요소입니다.
      & lt; / div & gt;
  )}}
});

당신은 당신이해야합니다 클래스 이름 때문에 수업 자바 스크립트로 예약되어 있습니다. 제공된 Codepen을 통과하고 거기에서 찾은 기본 HTML을 반응 구성 요소로 변환하십시오.

다음으로 우리는 반응에서 두 명의 멋진 개념에 초점을 맞 춥니 다. 상태 과 소품 ...에 우리가 앱을 렌더링하지 않았기 때문에 아직 아무 것도 보지 못할 것입니다.

렌더링, 주, 소품

대응 asewomeness를 렌더링하려면 도구에 DOM에 배치 할 위치에 알려야합니다. 이렇게하려면 우리는 사용합니다 reactedom.render () ...에 코드 쌍의 2 단계 에서이 코드를 찾을 수 있습니다.

reacteddom.erender (& lt; player / gt;, document.querySelector ( '몸체'));

모든 것을 올바르게 수행 한 경우 플레이어가 나타나야합니다. 다음으로 우리는 우리를 구축 할 것입니다 소품 목적. 소품 속성에 짧고, 이들은 구성 요소에 통과하는 정보 조각입니다. 우리는 플레이어에게 트랙에 대한 정보를 제공해야합니다. 그래서 우리는 지금 그것을 할 것입니다.

For this demo we've used the artwork from Odesza's 'We Were Young'. Click the image to grab the band's Summer's Gone LP for free — 이 데모는 Odesza 's'우리가 젊었습니다. '에서 아트웍을 사용했습니다. 이미지를 클릭하여 밴드의 여름의 LP를 무료로 잡아라.

너의 소품 개체가 내부에 저장됩니다 getDefaultProps. , 이렇게 보일 것입니다 :

 getDefaultProps : 함수 () {
  반환 {
    과정: {
      이름 : "우리는 젊었습니다",
      아티스트 : "Odesza",
      앨범 : "여름의 사라진",
      년 : 2012 년,
      삽화 : "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      지속 시간 : 192,
      출처 : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}}
}

우리는 또한 A를 만들어야합니다 상태 노래의 현재 시간과 재생 / 일시 중지 상태를 저장하는 객체 :

 GetInItialState : 함수 () {
  리턴 {playstatus : 'play', currentTime : 0}
}

앱의 상태가 끊임없이 변경되며 상태 목적. 이는 주 상태가 해당 상태가 해당 상태에 의존하는 구성 요소가 상태가 변경되므로 속성이 변경되므로 반응 할 때를 기억하는 것이 중요합니다. 어떻게 할 수 있도록 대응하는 것은 당신을 위해 변경 사항을 계산하고 페이지가 변경 될 때 DOM을 효율적으로 업데이트하는 것입니다. 모든 것이 동기화되어 있습니다.

소품과 국가를 통과시킨다

이제 우리는 지나갈 것입니다 소품 과 상태 우리의 구성 요소에 값 ( 3 단계 짐마자 우리의 플레이어 구성 요소는 다음과 같이 보입니다.

렌더링 : 함수 () {
  리턴 (& lt; div classname = "player"& gt;
    & lt; div classname = "배경"style = {{ 'backgroundimage': 'URL ('+ this.props.track.Artwork + ')'}}}}}}}
    & lt; div classname = "헤더"& gt; & lt; div classname = "title"& gt; 이제 연주 & lt; / div & gt;
    & lt; div classname = "artwork"style = {{ 'backgroundimage': 'URL ('+ this.props.track.Artwork + ')'}}}}} & lt; / div & gt;
    & lt; trackinformation track = {this.props.track} / gt;
    & lt; 스크러버 / & gt; & lt; 제어 / & gt;
    & lt; 타임 스탬프 duration = {this.props.track.druary} currentTime = {this.state.currenttime} / gt;
    & lt; Audio & gt; & lt; 소스 src = {DISPORPS.TRCC.SOURCE} / gt; & lt; / audio & gt;
    & lt; / div & gt;
)}

그런 다음이 값을 어린이 구성 요소 안에 선택할 수 있습니다. 예 :

 var timestamps = react.createClass ({
  렌더링 : function () {return (
    & lt; div classname = "timestamps"& gt;
      & lt; div classname = "시간 시간 - 현재"& gt; {이 {Divs.CurrentTime}} & lt; / div & gt;
      & lt; div classname = "시간 시간 - 총"& gt; {this.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}}
});

봐 코드 4 단계 모든 소품이 어떻게 전달되고 하위 구성 요소에서 사용되는지 확인하십시오.

기간 계산

지금 타임 스탬프는 일반 숫자입니다. 우리는 앱에서 사용할 수 있기 전에 타임 스탬프로 변환해야합니다. 우리는 우리의 구성 요소 안에 함수를 작성 하여이 작업을 수행합니다.

 변환 시간 : 기능 (타임 스탬프) {
    잠자리 = math.floor (타임 스탬프 / 60);
  초 = 시간 소인 - (분 * 60);
    (초 & lt; 10) {seconds = '0'+ 초; }
    timestamp = 분 + ':'+ 초;
    리턴 타임 스탬프;
}

우리는 그 다음에 이것을 사용할 수 있습니다 타임 스탬프 구성 요소:
{CIRETTIME (this.props.currenttime)} ...에

재생 및 일시 중지

우리는 함수를 그에게 묶을 것입니다 onclick. 재생 / 일시 중지 버튼의 이벤트 및 메인 구성 요소로 다시 전달됩니다. & lt; isplaying = {this.state.playstatus} onclick = {this.toggleplay} / gt; ...에

우리의 토글은 다음과 같습니다.

 toggleplay : 함수 () {
  status = this.state.playstatus;
  오디오 = Document.getElementById ( 'Audio');
  if (status === 'play') {
    상태 = '일시 중지'; audio.play ();
  } else {
    status = 'play'; audio.pause ();
  }
  setState ({playstatus : status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — 아이콘이 '재생'을 나타내는 화살표와 'PAUSE'를 나타내는 두 개의 평행선을 나타내는 아이콘이 코드를 조정해야합니다.

우리는 또한 렌더링 함수 안에 코드를 추가해야합니다. 통제 수단 구성 요소 'Play'에서 'Play'에서 'Pause'에서 아이콘을 토글하고 노래가 재생 중일 때 타임 스탬프를 업데이트하는 다른 기능을 전환합니다.

 렌더링 : 함수 () {
  클래스 이름을합시다.
  if (this.props.isplaying == '일시 중지') {
    ClassNames = 'FA-FW FA-PAUSE';
  } else {
    Classnames = 'FA-FW FA-Play';
  }
  반환 {...}
}

우리는 이전부터 우리 타임 스탬프의 업데이트를 처리하는 기능을 작성해야합니다. 우리가 나중에 다른 것에 사용할 수 있도록이 코드를 분리하는 것이 가장 좋습니다.

 UpdateTime : 함수 (타임 스탬프) {
  timestamp = math.floor (타임 스탬프);
  setState ({currentTime : timestamp});
}

Write a function to convert your numbers into timestamps — 숫자를 시간 소인으로 변환하는 기능을 작성하십시오

마지막으로, 우리는 우리의 업데이트해야합니다 Playtoggle 호출하는 기능 UpdateTime. A.의 기능 Setinterval. ...에


audio.play ();
_this = ~;
setInterval (함수 () {
  .....
  _This.UpdatesCrubber (퍼센트);
  _This.UpdateTime (현재 시간);
}, 100);
...

앞으로 나아가 다

이제는 반짝이는 음악 플레이어가 있어야합니다. 당신은 여기에서 나아갈 수 있고 노래를 닦을 수있는 기능을 추가 할 수 있습니다. e.pagex. 또는 배열, 다음 및 이전 버튼에 다가오는 트랙 ID를 저장하여 재생 목록 기능을 추가하십시오. 당신이 붙어있는 경우, 도달하십시오 @mrjackolai. - 내가 도와 드리겠습니다. 재미 있고 행운을 빕니다.

이 기사는 원래 나타났습니다 그물 잡지 문제 289; 여기 그것을 구입하십시오 ...에!

관련 기사:

20 자바 스크립트 팁을 당신의 마음을 날려 버리십시오
JavaScript에 의존하는 사이트를 만들 수 있습니까?
chatbot 경험을 디자인하는 방법

반응이있는 간단한 음악 플레이어 만들기

반응 UI를 만듭니다

렌더링, 주, 소품

소품과 국가를 통과시킨다

기간 계산

재생 및 일시 중지

앞으로 나아가 다

어떻게 - 가장 인기있는 기사

귀하의 3D 해부학을 개선하는 10 가지 방법

물 시뮬레이션을 만드는 방법

InDesign에서 특별한 인쇄 마감재 생성

Zbrush의 생물 속도 조각

8 가지 필수 WordPress 보안 비밀

수채화로 글레이즈를 만드는 방법

벡터 로고를 2D에서 3D로 가져가는 방법

FlexBox의 놀라운 힘

카테고리