프로젝트 56 of 100 - React Popovic Radio

여기요! 저는 3월 31일에 끝나는 100개의 React.js 프로젝트를 만드는 임무를 맡고 있습니다. 업데이트를 위해 내 dev.to 프로필 또는 my를 팔로우하고 질문이 있는 경우 언제든지 연락하십시오. 지원해 주셔서 감사합니다!

배포된 프로젝트에 대한 링크: Link
리포지토리 링크: github

약 1년 전에 한 친구가 상사를 대신해 제게 다가와 다른 사람들이 액세스할 수 있는 라디오 방송국을 만들어 줄 수 있습니까? 재생 목록. 그는 웹사이트의 배경 음악으로 그것을 원했습니다.

그 당시에는 몰랐지만 오늘날에는 HTML 5 오디오와 특히 이 멋진 react-h5-audio-player npm 패키지( link here )를 사용하면 설정하기 쉬운 것 같습니다.

늦었으므로 자세한 내용은 다루지 않겠지만 기본적으로 모든 스톡 비트가 제거되고 빈 흰색 화면이 있는 깨끗한create-react-app 프로젝트가 있습니다. 그런 다음 Radio React 기능 구성 요소를 만들고 가져옵니다.

그런 다음 useEffect를 사용하여 radio-browser-api, 다른 great package에서 데이터를 가져오고 stations 상태 변수를 수신된 스테이션 데이터로 채웁니다.
radio-browser-api에서 검색된 모든 스테이션에 대해 루프를 통해 react-h5-audio-player 노드 모듈에서 이미지 요소와 플레이어 구성 요소를 제공합니다. 다음과 같습니다.

      <div className="stations">
        {stations && stations.map((station,idx) => {
          return (
            <div className='station' key={idx}>
              <div className='stationName'>
                <img 
                  className='logo' 
                  src={station.favicon} 
                  alt="station logo" 
                  onError={setDefaultSrc}
                />
                <div className='name'>
                  {station.name}
                </div>
              </div>
              <AudioPlayer 
                className="player" 
                src={station.urlResolved} 
                showJumpControls={false}
                layout="stacked"
                customProgressBarSection={[]}
                customControlsSection={["MAIN_CONTROLS","VOLUME_CONTROLS"]}
                autoPlayAfterSrcChange={false}
              />
            </div>
          )
        }
        )}
      </div>

AudioPlayer 구성 요소에 대한 옵션은 해당 노드 모듈에서 가져옵니다. npm의 문서에서 이에 대해 읽을 수 있습니다.

이 프로젝트는 튜토리얼의 React 및 Javascript 부분이 15분도 채 안 되는 짧은 시간 동안 스타일을 지정하는 데 소요된 마지막 15분과 함께 짧고 달콤했습니다. 조금 빠르기 때문에 따라잡기 위해 몇 번 일시 중지해야 할 수도 있지만 현대 기술을 사용하여 매우 간단한 방법으로 온라인에서 오디오 데이터를 검색하는 경우 이것은 최고의 자습서 중 하나여야 합니다.

. 해!