Reactで簡単な音楽プレーヤーを構築する

Sep 17, 2025

操作方法

反応するユーザーインターフェイスを構築するための人気のJavaScriptライブラリであり、このチュートリアルでは、単純なインタラクティブな音楽プレーヤーを構築する方法を説明する方法を説明します。私たちはCodepenで働くつもりです、そして、すべてのコンポーネントを簡単にリポジトリに移植することができるので、このプロジェクトもReactアプリの中でオフラインで書き込むことができます。

私たちは探求するつもりです prop prop 、状態そして、コンポーネントがどのように協力して反応生態系内で互いに通信するか。私たちは使用していますフォントが素晴らしいそれで、それがあなたのCodepen CSSパネルの内側に含まれていることを確認してください。

あなたを早く反応させて走って走っているので、一緒になったコードペンであなたのためのコレクション任意の時点でジャンプすることができるように、段階的に飛び込むことができ、そこから前方に進むことができるように段階に分割してください。私はまたあなたのためにCSSを書いています、それであなたは反応に集中することができます、そしてそれがすべて働く方法。

React UIを作成します

始めましょう！まず、反応にいくつかのコンポーネントを作成する必要があります。からコードを取るつもりです添付のペンのステップ1 そしてそれをコンポーネントに変換します。他のすべてのものを置く主要なコンポーネントを作成することから始めましょう。このコンポーネントと呼びます プレーヤー 。

コンポーネントを作成するコードは次のようになります。

 Let Player = React.CreateClass（{
  render：function（）{return（

あなたが使わなければならないことに注意してください クラス名 だから クラス JavaScriptに予約されています。提供されたコードペンを通過し、そこにある基本的なHTMLを反応コンポーネントに変換します。

次に、Reactの2つの素晴らしい概念に焦点を当てます。状態そして prop prop 。アプリをレンダリングしていないので、まだ何も表示されません。

レンダリング、州、小道具

私たちの反応の素晴らしさをレンダリングするために、私たちはそのようなツールをDOMに配置する場所を伝える必要があります。これを行うには RectiveDDOW.Render（） 。あなたはCodepenの手順2でこれのコードを見つけるでしょう。

 RectiveD.Render（＆LT; Player / gt;、document.QuerySelector（ 'Body'））;

あなたが正しく全力を払ったならば、あなたはプレイヤーが現れるのを見るべきです。次に私たちのものを構築するつもりです prop prop オブジェクト prop prop プロパティには短く、これらはあなたが使用するのにあなたのコンポーネントに合格する情報です。私たちはプレイヤーにトラックの情報をいくつか与える必要があるので、今それをするでしょう。

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の「私たちは若い」からアートワークを使いました。画像をクリックして、バンドの夏のGONE LPを無料でつかむ

きみの prop prop オブジェクトは内部に保存されています getDefaultProps. そして、このように見えるべきです：

 getDefaultProps：function（）{
  戻る{
    追跡： {
      名前：「若い」、
      アーティスト： "odesza"、
      アルバム： "Summer's Gone"、
      年：2012年、
      artwork： "https://funkadelphia.files.wordpress.com/2012/09/jectionza-summers-gone-lp.jpg"
      期間：192、
      ソース： "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257 / wwy.mp3"
  }}}

Aを作成する必要があります状態オブジェクトの曲の現在時刻と再生/一時停止状態を保存する。

 getInitialState：function（）{
  {PlayStatus： 'Play'、CurrentTime：0}

あなたのアプリの状態が絶えず変更され、状態オブジェクトこの状態に依存しているコンポーネントが状態が行われた場合に依存するコンポーネントが変更されるため、これは書き込むことを覚えておくことが重要です。働くために反応するのは、それがあなたの変更を計算し、ページが変更されたときにDOMを効率的に更新することです。すべてが同期しています。

小道具と状態を渡す

今私たちは通過するつもりです prop prop そして状態私たちのコンポーネントへの値ステップ3 ）。 our プレーヤー コンポーネントは次のようになります。

レンダリング：function（）{
  戻る（

その後、これらの値を子供のコンポーネントの中に選択できます。例えば：

 var timestamps = react.CreateClass（{
  render：function（）{return（

見た Codepenのステップ4 すべての小道具がどのように渡されて子供のコンポーネントでどのように使用されているかを確認します。

期間計算

今すぐタイムスタンプは単なる数字です。アプリで使用する前に、それらをタイムスタンプに変換する必要があります。コンポーネント内に機能を書くことでこれを行います。

 convertTime：function（timestamp）{
    数分= Math.floor（タイムスタンプ/ 60）。
  秒=タイムスタンプ - （分* 60）。
    if（秒＆lt; 10）{secone = '0' +秒; }
    timestamp =分+ '：' +秒;
    タイムスタンプを返す。

それから私達は私達の中でこれを使うことができます タイムスタンプ 成分：
{this.converttime（this.props.currentTime）} 。

遊びと一時停止

関数をバインドするつもりです onlick. PLAY / PAUSEボタンのイベントで、主要コンポーネントにバックアップします。 ＆lt; controls isplaying = {this.state.playStatus} onclick = {this.toggleplay} / gt} 。

私たちのトグルは次のようになります：

 toggleplay：function（）{
  status = this.state.playStatus let;
  Audio = Document.GetElementById（ 'audio'）をlet;
  if（status === 'play'）{
    status = '一時停止'; audio.play（）;
  } そうしないと {
    status = 'play'; audio.pause（）;
  }
  this.setState（{PlayStatus：Status}）;

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — アイコンが「PLAY」を表す矢印と「一時停止」を表す2つの平行線を切り替えるようにコードを調整する必要があります。

また、のレンダリング関数内にいくつかのコードを追加する必要があります。 コントロール コンポーネント 'Play'から 'Pause'へのアイコンを切り替える、そして曲が再生されているときにタイムスタンプを更新するための別の関数。

レンダリング：function（）{
  クラス名を照らします。
  if（this.props.isplaying == 'pause'）{
    classnames = 'fa fa-fw fa-pause';
  } そうしないと {
    classnames = 'fa fa-fw fa-play';
  }
  戻る{...}

以前からのタイムスタンプの更新を処理するための機能を書く必要があります。後で他のものに使用したい場合は、このコードを別々に保つことが最善です。

 UpdateTime：関数（タイムスタンプ）{
  timestamp = math.floor（タイムスタンプ）;
  this.setState（{currentTime：timestamp}）;

Write a function to convert your numbers into timestamps — 数字をタイムスタンプに変換する関数を書いてください

最後に、私たちは私たちの更新が必要です PlayToggle 呼び出す機能 UpdateTime. Aの機能 セットインターファール 。

 ...
audio.play（）;
_This =これをさせます。
setInterval（function（）{
  .....
  _This.UpdateCrubber（パーセント）。
  _this.updateTime（currentTime）;
100）}。
...

前進する

だから今、あなたは光沢のある働いている音楽プレーヤーを持つべきです。あなたはここでさらにここに行くことができ、歌をスクラブするための機能を追加することができます e.pagex. または、次のトラックIDをアレイ、[次]ボタン、および前のボタンに格納することでプレイリスト機能を追加します。あなたが立ち往生しているなら、に手を差し伸べる @mrjackolai - 私は手伝って幸せになるでしょう！楽しんで、頑張ってください。

この記事は最初に登場しました ネットマガジン 問題289; ここで購入してください ！

関連記事：

あなたの心を爆破するための20のJavaScriptのヒント
JavaScriptに頼るサイトを構築しても大丈夫ですか？
チャットボット体験をデザインする方法

Reactで簡単な音楽プレーヤーを構築する

React UIを作成します

レンダリング、州、小道具

小道具と状態を渡す

期間計算

遊びと一時停止

前進する

操作方法 - 最も人気のある記事

クラウドストレージをクリエイティブとして使用する方法

写真や画像のクラウドストレージ：あなたの仕事のための最高の雲を選ぶ方法

44 iPados 2020のための最高のiPadショートカットとジェスチャー

芸術における短縮化のための本質的なガイド

パターンスタンプツールを使用してテクスチャを作成する

色収差効果を生み出す

アフィニティデザイナー：ピクセルペルソナの使い方

Photoshop

カテゴリ