100のプロジェクト56 -反応Popovicラジオ

おい!私は、100を反応させる任務にいます.月31日を終えているJSプロジェクト.あなたの質問があれば私のdev . toプロファイルまたは私の更新のために私のdevに従って、アウトに達すること自由に感じなさい.あなたのサポートに感謝!
配備されたプロジェクトへのリンクLink
レポへのリンクgithub
およそ1年前に、友人は彼の上司の代わりに頼んで、私に接近しました-私は他の人々がアクセスすることができた彼のためにラジオ局を建設することができました.彼は、彼のウェブサイトのためにバックグラウンドミュージックのためにそれを望みました.
その後、私は知らなかった-しかし、今日はHTMLreact-h5-audio-player NPMパッケージlink here ), それは固まることになるだろう.
それが遅いので、私は詳細のトンに入るつもりでありません、しかし、基本的に我々はきれいですcreate-react-app すべての在庫ビットを削除し、空白の白い画面でプロジェクト.それから、我々はRadio 反応機能成分.
では、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のドキュメントでそれを読むことができます.
このプロジェクトは短くて、スタイリッシュに費やされた最終的な15分の分で15分未満でチュートリアルbreezingの反応とJavaScript部分で甘いです.それは少し速いので、キャッチするために数回を一時停止する必要がありますが、非常に簡単な方法でオンラインからオーディオデータを取得するには近代的な技術を使用するように、これはそこに最高のチュートリアルの一つである必要があります.
そうだ.