Bangun pemutar musik sederhana dengan bereaksi

Sep 12, 2025

Bagaimana caranya

Reaksi adalah perpustakaan javascript yang populer untuk membangun antarmuka pengguna, dan dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana menggunakannya untuk membangun pemutar musik interaktif sederhana. Kita akan bekerja di Codepen, dan Anda juga bisa menulis proyek ini secara offline di dalam aplikasi REAKS, karena semua komponen dapat porting ke repo dengan mudah.

Kita akan mengeksplorasi Atribut , negara dan bagaimana komponen bekerja bersama dan berkomunikasi satu sama lain di dalam ekosistem reaksi. Kami juga menggunakan Font Awesome. , Jadi pastikan itu termasuk di dalam panel codepen CSS Anda.

Untuk membuat Anda bangun dan berlari dengan bereaksi sangat cepat, saya telah mengumpulkan koleksi untuk Anda di codepen , dan membaginya menjadi tahapan sehingga Anda dapat melompat kapan saja, garpu langkah dan maju dari sana. Saya juga telah menulis CSS untuk Anda, jadi Anda bisa fokus pada reaksi, dan bagaimana semuanya berfungsi.

Buat UI bereaksi

Mari kita mulai! Pertama, kita harus membuat beberapa komponen dalam bereaksi. Kita akan mengambil kode dari Langkah 1 di pena yang menyertainya , dan mengubahnya menjadi komponen. Mari kita mulai dengan membuat komponen utama yang akan kita letakkan semuanya di dalam. Kami akan menyebut komponen ini Pemain .

Kode untuk membuat komponen terlihat seperti ini:

 Biarkan Player = REACT.CREATECLASS ({
  Render: Fungsi () {Return (
      & lt; div classname = "player" & gt;
        & lt; ChildComponent / & GT; // Ini adalah komponen anak, bersarang di dalam.
      & lt; / div & gt;
  )}
});

Perhatikan bahwa Anda harus menggunakan nama kelas karena kelas dicadangkan dalam javascript. Pergi melalui codepen yang disediakan dan konversi html dasar yang Anda temukan di sana ke komponen reaksi.

Selanjutnya kita akan fokus pada dua konsep yang lebih dahsyat di REACT: negara dan Atribut . Anda belum melihat apa pun, karena kami belum membuat aplikasi kami.

Rendering, negara bagian, alat peraga

Untuk membuat kehebatan reaksi kita, kita perlu memberi tahu alat ke mana untuk menempatkan dirinya di DOM. Untuk melakukan ini kita gunakan Reaktom.render () . Anda akan menemukan kode untuk ini pada langkah 2 pada codepen.

 Reactdom.render (& lt; player / & gt;, dokumen.queryselector ('tubuh'));

Jika Anda telah melakukan semuanya dengan benar, Anda akan melihat pemain muncul. Selanjutnya kita akan membangun Atribut obyek. Atribut Singkatnya untuk properti, dan ini adalah informasi yang Anda sampaikan kepada komponen Anda untuk digunakan. Kami perlu memberi pemain beberapa informasi untuk trek, jadi kami akan melakukannya sekarang.

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 — Untuk demo ini kami telah menggunakan karya seni dari Odesza 'kami masih muda'. Klik gambar untuk mengambil LP Band Musim Panas Gone secara gratis

Anda Atribut objek disimpan di dalam getdefaultprops. , dan harus terlihat seperti ini:

 GetDefaultProps: Fungsi () {
  kembali {
    Track: {
      Nama: "Kami masih muda",
      Artis: "Odesza",
      Album: "Musim Panas Hilang",
      Tahun: 2012,
      karya seni: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Durasi: 192,
      Sumber: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Kita juga perlu membuat negara Objek untuk menyimpan waktu lagu dan status Putar / Jeda:

 GetinitialState: Fungsi () {
  Return {PlayStatus: 'Play', saat ini: 0}
}

Negara aplikasi Anda berubah secara konstan, dan disimpan dalam negara obyek. Ini penting untuk diingat ketika Anda menulis bereaksi karena komponen yang mengandalkan keadaan itu sebagai properti akan berubah jika keadaan tidak. Apa yang membuat reaksi sangat bagus untuk dikerjakan adalah bahwa ia menghitung perubahan untuk Anda dan memperbarui DOM secara efisien ketika halaman berubah. Semuanya tetap sinkron.

Menyesuaikan alat peraga dan negara

Sekarang kita akan lulus Atribut dan negara nilai ke komponen kami ( Langkah 3. ). Kami Pemain Komponen sekarang harus terlihat seperti ini:

Render: Fungsi () {
  Kembali (& lt; Div ClassName = "Player" & GT;
    & lt; div classname = "latar belakang" gaya = {'' latar belakang ':' url ('+ this.props.track.artwork +') '}} & gt; & gt;
    & lt; div classname = "header" & gt; & lt; div classname = "judul" & gt; sekarang bermain & lt; / div & gt; / lt; / gt;
    & lt; Div ClassName = "karya seni" gaya = {{'BANDASEImage': 'URL (' this.props.track.artwork + ')'}} & gt; & gt; & gt;
    & lt; trackinformation track = {this.props.track} / & gt;
    & lt; scrubber / & gt; & lt; kontrol / & gt;
    & lt; capeestamps durasi = {this.props.track.duration} saat ini = {this.state.currenttime} / & gt;
    & lt; audio & gt; & lt; sumber src = {this.props.track.source} / & gt; & lt; / audio & gt;
    & lt; / div & gt;
)}

Kami kemudian dapat memilih nilai-nilai ini di dalam komponen anak kami. Sebagai contoh:

 var timestamps = react.createclass ({{
  Render: Fungsi () {Return (
    & lt; Div ClassName = "Timestamps" & gt;
      & lt; div classname = "waktu waktu - saat ini" & gt; {this.props.currenttime} & lt; / div & gt;
      & lt; div classname = "waktu waktu - total" & gt; {this.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Melihat melalui Langkah 4 di codepen Untuk melihat bagaimana semua alat peraga diturunkan dan digunakan pada komponen anak.

Perhitungan durasi

Timestamps sekarang hanyalah angka sederhana. Kita perlu mengubahnya menjadi cap waktu sebelum dapat digunakan di aplikasi kami. Kami akan melakukan ini dengan menulis fungsi di dalam komponen kami:

 Konversi: Fungsi (Timestamp) {
    biarkan menit = matematika.floor (timestamp / 60);
  biarkan detik = cap waktu - (menit * 60);
    Jika (detik & lt; 10) {detik = '0' + detik; }
    cap waktu = menit + ':' + detik;
    cap waktu kembali;
}

Kami kemudian dapat menggunakan ini di kami Cap waktu komponen:
{this.converttime (this.props.currenttime)} .

Bermain dan jeda

Kita akan mengikat fungsi ke onklick. Acara tombol putar / jeda dan lewat kembali ke komponen utama: & lt; kontrol isplaying = {this.state.playstatus} onclick = {this.toggleplay} / & gt; .

Toggle kami terlihat seperti ini:

 TogglePlay: Fungsi () {
  biarkan status = this.state.playstatus;
  biarkan audio = document.getelementbyid ('audio');
  Jika (status === 'putar') {
    status = 'jeda'; audio.play ();
  } lain {
    Status = 'Mainkan'; audio.puse ();
  }
  ini.setstate ({playstatus: status});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Kita perlu menyesuaikan kode sehingga ikon beralih dari panah yang mewakili 'memutar' dan dua garis paralel yang mewakili 'jeda'

Kita juga perlu menambahkan beberapa kode di dalam fungsi render Kontrol. Komponen untuk mengaktifkan ikon dari 'Mainkan' ke 'Jeda', dan fungsi lain untuk memperbarui cap waktu saat lagu diputar.

 Render: Fungsi () {
  Biarkan nama kelas;
  if (this.props.Inplaying == 'jeda') {
    ClassNames = 'fa-fa-fw fa-jeda';
  } lain {
    Classnames = 'fa-fa-fw fa-play';
  }
  kembali {...}
}

Kita perlu menulis fungsi untuk menangani pembaruan timestamps kita dari sebelumnya. Yang terbaik adalah menjaga kode ini terpisah, jika kita ingin menggunakannya untuk sesuatu yang lain nanti.

 UpdateTime: Fungsi (Timestamp) {
  timestamp = math.floor (timestamp);
  this.setstate ({saat ini: timestamp});
}

Write a function to convert your numbers into timestamps — Tulis fungsi untuk mengubah nomor Anda menjadi cap waktu

Akhirnya, kita perlu memperbarui PlayToggle. berfungsi untuk menelepon UpdateTime. berfungsi pada A. seteritval. .

 ...
audio.play ();
biarkan _ ththis = ini;
setternerval (fungsi () {
  .....
  _ ththis.updatescrubber (persen);
  _ ththis.updateTime (saat ini);
}, 100);
...

Bergerak kedepan

Jadi sekarang Anda harus memiliki pemutar musik yang mengkilap. Anda bisa melangkah lebih jauh ke sini dan menambahkan fitur untuk menggosok lagu dengan E.PageX. , atau tambahkan fungsionalitas daftar putar dengan menyimpan ID trek yang akan datang dalam array, tombol berikutnya dan sebelumnya. Jika Anda terjebak, jangkau @mrackolai. - Saya akan dengan senang hati membantu! Bersenang-senang, dan semoga sukses.

Artikel ini awalnya muncul di Net Magazine. masalah 289; Beli di sini !

Artikel terkait:

20 Tips JavaScript untuk meledakkan pikiran Anda
Apakah boleh membangun situs yang mengandalkan javascript?
Cara Merancang Pengalaman Chatbot

Bangun pemutar musik sederhana dengan bereaksi

Buat UI bereaksi

Rendering, negara bagian, alat peraga

Menyesuaikan alat peraga dan negara

Perhitungan durasi

Bermain dan jeda

Bergerak kedepan

Bagaimana caranya - Artikel Terpopuler

Pengaturan Privasi Facebook: Cara Menjaga Profil Pribadi Anda

Cara menghidupkan dengan perpustakaan Mo.JS

10 hal yang tidak Anda ketahui dapat Anda lakukan dengan Photoshop

Cara menggambar kucing besar dengan pastel

Buat animasi UI Slick

Cat potret seperti van gogh

Master lukisan negatif dalam cat air

Cara membuat rambut di bioskop 4D

Kategori