Reaksiyona sahip basit bir müzik çalar oluşturun

Feb 5, 2026

Nasıl Yapılır

Tepki Kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir ve bu eğitimde size basit bir etkileşimli müzik çalar oluşturmak için nasıl kullanacağınızı göstereceğim. CODEPEN'de çalışacağız ve bu projeyi bir reaksiyon uygulaması için çevrimdışı olarak yazabilirsiniz, çünkü tüm bileşenler bir repoya kolayca taşınabilir.

Keşfedileceğiz sahneler , durum ve bileşenler nasıl birlikte çalışır ve reaksiyon ekosisteminin içinde birbirleriyle iletişim kurar. Ayrıca kullanıyoruz Font müthiş , bu nedenle kodepen CSS panelinizin içine dahil olduğundan emin olun.

Seni çok hızlı bir şekilde tepki vermek ve koşmak için, bir araya getirdim CODEPEN'de sizin için bir koleksiyon ve bunu aşamalara ayırın, böylece herhangi bir noktaya atlayabilirsiniz, adımdan itibaren çatallayın ve oradan ilerleyin. Sizin için CSS'yi de yazdım, böylece reaksiyona odaklanabilmeniz ve hepsi nasıl çalıştığını.

Reakt UI'yi oluştur

Başlayalım! İlk olarak, reaksiyonda bazı bileşenler oluşturmamız gerekiyor. Kodu alacağız Adım 1 beraberindeki kalemde ve bunu bileşenlere dönüştürün. Hadi her şeyi içeri gireceğimiz ana bileşeni oluşturarak başlayalım. Bu bileşeni arayacağız oyuncu .

Bir bileşen oluşturmanın kodu şöyle görünür:

 Let Player = reaact.createClass ({
  render: işlev () {iade (
      & lt; div classname = "Player" & gt;
        & lt; childcomponent / & gt; // Bu, iç içe geçmiş bir alt bileşendir.
      & lt; / div & gt;
  )}
});

Kullanmanız gerektiğini unutmayın sınıf adı Çünkü sınıf Javascript'te ayrılmıştır. Verilen kodlamadan geçip orada bulduğunuz temel HTML'yi reaksiyon bileşenlerine dönüştürün.

Sonra reaksiyona göre iki harika konsept üzerine odaklanacağız: durum ve sahneler . Henüz bir şey görmeyeceksiniz, çünkü bizim app yapmadık.

Render, devlet, sahne

Tepki awesomeness'ımızı sunmak için, araca kendisini DOM'ye yerleştireceğini söylememiz gerekir. Bunu yapmak için kullanıyoruz Reactdom.render () . CODEPEN'deki 2. Adımda bunun için kodu bulacaksınız.

 REACTROM.RENDER (& LT; Player / & GT;, Document.Queryselector ('beden'));

Her şeyi doğru yaptıysanız, oynatıcının göründüğünü görmelisiniz. Sonra bizim inşa edeceğiz sahneler nesne. sahneler Özellikler için kısa ve bunlar kullanmaları için bileşenlerinize geçtiğiniz bilgi parçalarıdır. Oyuncuya parça için biraz bilgi vermemiz gerekiyor, bu yüzden şimdi yapacağız.

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 — Bu demo için, sanat eserlerini Odesza'nın 'biz genç olduklarını' kullandık. Band'ın yazının LP'yi ücretsiz olarak kapmak için resme tıklayın

Sizin sahneler nesne içinde saklanır getDefaultprops ve böyle görünmelisin:

 GetDefaultProps: Function () {
  dönüş {
    Izlemek: {
      İsim: "Biz gençtik",
      Sanatçı: "Odesza",
      Albüm: "Yaz Gone",
      yıl2012,
      Yapıt: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summers-gone-lp.jpg",
      Süre: 192,
      Kaynak: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Ayrıca bir yaratmamız gerekiyor durum Şarkının geçerli saatini ve oyun / duraklatma durumunu saklamak için nesne:

 getinitialstate: işlevi () {
  Geri dönüş {Playstatus: 'Play', Geçerli zaman: 0}
}

Uygulamanızın devlet sürekli değişir ve durum nesne. Bu, reaksiyon yazdığınızı hatırlamak önemlidir, çünkü devlet, bir mülk olarak bu duruma dayanan bileşenler değişirse, bu durumun değişmesi durumunda değişecektir. Çalışmak için çok büyük tepki veren şey, sizin için değişiklikleri hesaplaması ve Sayfa değiştiğinde DOM'u verimli bir şekilde güncellemesidir. Her şey senkronizasyonda kalır.

Geçiş sahne ve devlet

Şimdi geçeceğiz sahneler ve durum Bileşenlerimize değerler ( Aşama 3 ). bizim oyuncu Bileşen şimdi şöyle görünmelidir:

kılmak: işlev () {
  geri dönüş (& lt; div classname = "Player" & GT;
    & lt; div classname = "background" style = {{'BackternationImage': 'URL (' + this.Props.Track.artwork + ')'}} & gt; / div & gt;
    & lt; div classname = "Header" & gt; şimdi "başlık" ve GT; şimdi oynuyor; / div & gt;
    & lt; div classname = "Sanat" stili = {{'Backternamege': 'URL (' + this.Props.Track.artwork + ')'}} & gt; / div & gt;
    & lt; TrackInformation Track = {this.Props.Track} / ve gt;
    & lt; scrubber / & gt; kontrolleri / & gt;
    & lt; zaman damgaları süresi = {this.props.track.duration} geçerli zaman = {this.state.currenttime} / ve gt;
    & lt; audio & gt; kaynağı src = {this.Props.Track.Source} / ve gt; / audio & gt;
    & lt; / div & gt;
)}

Daha sonra bu değerleri alt bileşenlerimizin içinde toplayabiliriz. Örneğin:

 var timesTamps = reaact.createClass ({
  render: işlev () {iade (
    & lt; div classname = "zaman damgaları" & gt;
      & lt; div classname = "zaman zaman - akım" & gt; {this.props.currenttime} & lt; / div & gt;
      & lt; div classname = "zaman zaman - toplam" & gt; {this.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Bakmak 4. adımda codepen Tüm sahnelerin nasıl geçtiğini ve çocuk bileşenlerinde kullanıldığını görmek için.

Süre hesaplaması

Şu anda zaman damgaları sadece düz sayılardır. Onları uygulamamızda kullanılmadan önce zaman damgalarına dönüştürmemiz gerekiyor. Bunu, bileşenin içindeki bir işlev yazarak yapacağız:

 ConvertTime: Function (TimesTamp) {
    izin verir = Math.floor (zaman damgası / 60);
  saniye = zaman damgası - (dakika * 60);
    eğer (saniye <10) {saniye = '0' + saniye; }
    zaman damgası = dakika + ':' + saniye;
    geri dönüş zaman damgası;
}

Bunu bizde kullanabiliriz. Zaman damgaları bileşen:
{this.converttime (this.props.currenttime)} .

Oyna ve Duraklat

Bir işlevi bağlayacağız tıklamada Oynat / Duraklat düğmesi ve ana bileşene geri iletin: & lt; kontrolleri izleyerek = {this.state.playstatus} onclick = {this.toggleplay} / ve gt; .

Geçişimiz buna benziyor:

 Toggleplay: Function () {
  Durum = this.state.playstatus izin verin;
  Ses = document.GetElementbyID ('Ses');
  Eğer (status === 'oynat') {
    Durum = 'Duraklat'; Audio.Play ();
  } Başka {
    Durum = 'Oynat'; 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' — Kodu ayarlamamız gerekiyor, böylece simge 'oynat' ve 'duraklat'ı' temsil eden iki paralel çizgiyi temsil eden bir okdan geçiş yapmalıyız.

Ayrıca, iş fonksiyonunun içine bazı kod eklememiz gerekir. Kontroller Simgeyi 'Oynat' '' 'duraklat'ı ve şarkı oynadığında zaman damgalarını güncellemek için başka bir işlevi değiştirecek bileşen.

 Render: Function () {
  sınıfnamalar olsun;
  Eğer (this.props.isplaying == 'duraklama') {
    sınıfnames = 'FA FA-FW FA-PAUSE';
  } Başka {
    ClassNames = 'FA FA-FW FA-PLAY';
  }
  dönüş {...}
}

Önceden zaman damgalarımızın güncellenmesini işlemek için bir işlev yazmamız gerekiyor. Bu kodu ayrı tutmak en iyisi, daha sonra başka bir şey için kullanmak istememiz durumunda.

 UpdateTime: İşlev (TimesTamp) {
  TIMESTAMP = MATH.FOOR (TIMESTAMP);
  this.setstate ({currenttime: timestamp});
}

Write a function to convert your numbers into timestamps — Numaralarınızı zaman damgalarına dönüştürmek için bir işlev yazın.

Sonunda, güncellememiz gerekiyor. playtoggle aramak için işlev Güncelleme zamanı fonksiyonu setinterval .

 ...
Audio.Play ();
_This = bu;
setinterval (işlev () {
  .....
  _This.UpdatesCrubber (yüzde);
  _this.updatetime (geçerli zaman);
}, 100);
...

İlerlemek

Şimdi parlak bir müzik çalarınız olmalı. Buraya gidebilir ve şarkıdan fırçalamak için özellikleri ekleyebilirsiniz. e.pagex veya bir dizi, sonraki ve önceki düğmelerde yaklaşan parça kimliklerini saklayarak Çalma Listesi işlevselliğini ekleyin. Eğer sıkışıp kalırsan, @mrjackolai - Yardım etmekten mutlu olacağım! Eğlenmene bak ve iyi şanslar.

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 289; buradan satın al K!

İlgili Makaleler:

20 zihninizi üflemek için javascript ipuçları
Javascript'e güvenen siteler inşa etmek tamam mı?
Bir chatbot deneyimi nasıl tasarlanır

Reaksiyona sahip basit bir müzik çalar oluşturun

Reakt UI'yi oluştur

Render, devlet, sahne

Geçiş sahne ve devlet

Süre hesaplaması

Oyna ve Duraklat

İlerlemek

Nasıl Yapılır - En Popüler Makaleler

Bir kuş nasıl çizilir

Facebook Gizlilik Ayarları: Profilinizi Nasıl Tutulur

Reaksiyona sahip bir gösterge paneli uygulaması nasıl oluşturulur

Geleneksel bir İngiliz köyünü nasıl boyanır

Cinema 4D'de Çizgi Film Karakterleri Nasıl Oluşturulur

Mükemmel kitap kapağı nasıl tasarlanır

Tasarım sistemlerinizi fraktal ile belgeleyin

Kıyafetten Kürklü 3D karakter oluşturun

Kategoriler