Rakenna yksinkertainen musiikkisoitin reagoimaan

Sep 13, 2025

Miten tehdään

Reagoida on suosittu JavaScript-kirjasto käyttöliittymien rakentamiseen, ja tässä opetusohjelmassa näytän sinulle, kuinka voit käyttää sitä yksinkertaisen vuorovaikutteisen musiikkisoittimen rakentamiseen. Aiomme työskennellä Codepenissa, ja voit myös kirjoittaa tämän projektin offline-tilaan reagoivan sovelluksen sisällä, koska kaikki komponentit voidaan siirtää repolle melko helposti.

Aiomme tutkia rekvisiitta , osavaltio Ja miten komponentit toimivat yhdessä ja kommunikoivat keskenään reagoivan ekosysteemin sisällä. Käytämme myös Fontti mahtava , joten varmista, että se sisältyy Codepen CSS-paneelin sisällä.

Saada sinut ylös ja käynnissä reagoida hyvin nopeasti, olen koonnut yhteen Kokoelma sinulle koodi , ja jakaa sen vaiheittain, jotta voit hypätä missään vaiheessa, haarruttaa askelta ja mennä eteenpäin sieltä. Olen myös kirjoittanut CSS sinulle, joten voit keskittyä vain reagoida ja miten se on kaikki työskentelevät.

Luo reagoi UI

Aloitetaan! Ensinnäkin meidän on luotava joitakin komponentteja reagoida. Aiomme ottaa koodin Vaihe 1 Oheinen kynä ja muuntaa sen komponentteihin. Aloitetaan luomalla pääkomponentti, jonka laitat kaiken muun sisälle. Soitamme tätä komponenttia Pelaaja .

Komponentin luominen näyttää tältä:

 Anna pelaajan = reagoida.createclass ({
  Render: Toiminto () {paluu (
      & lt; div classname = "soitin" & gt;
        & lt; childcomponent / & gt; // Tämä on lapsikomponentti, sisäinen sisäpuolella.
      & lt; / div & gt;
  )}
});

Huomaa, että sinun on käytettävä luokan nimi koska luokka on varattu JavaScript. Siirry Codepenin kautta ja muunna perus HTML, jonka löydät siellä reagoimaan komponentteja.

Seuraavaksi keskitymme kahteen awesome-käsitteisiin reagoiessa: osavaltio ja rekvisiitta . Et näe mitään vielä, koska emme ole antaneet sovellustamme.

Renderointi, valtio, rekvisiitta

Jotta voimme reagoida awesomeness, meidän on kerrottava työkalu, mistä sijoittaa itsensä Dom. Voit tehdä tämän käytämme Reachom.Render () . Löydät koodin tähän vaiheessa 2 koodipentiin.

 Reakhominen.Render (& lt; soitin / & gt;, document.queryelector ('body');

Jos olet tehnyt kaiken oikein, sinun pitäisi nähdä, että soitin tulee näkyviin. Seuraavaksi aiomme rakentaa meidän rekvisiitta esine. rekvisiitta On lyhyitä ominaisuuksia, ja nämä ovat tietoja, joita siirrätte komponentteihisi käyttää niitä. Meidän on annettava pelaaja tietoa kappaleesta, joten teemme sen nyt.

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 — Tätä demoa varten olemme käyttäneet Odeszan "taidetta" olimme nuoria ". Napsauta kuvaa napata bändin kesän mennyt LP ilmaiseksi

Sinun rekvisiitta Objekti tallennetaan sisälle GetDeFaultProps , ja pitäisi näyttää tältä:

 GetDeFaultProps: Toiminto () {
  palaa {
    Seuraa: {
      Nimi: "Olimme nuoria",
      Taiteilija: "Odesza",
      Albumi: "Summer's Gone",
      Vuosi: 2012,
      Taideteos: "https://funkadelphia.files.wordpress.com/2012/09/odesza-summer-gone-lp.jpg",
      Kesto: 192,
      Lähde: "https://s3-us-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
  }}
}

Meidän on myös luotava a osavaltio Objekti tallentaa laulun nykyinen aika ja toisto / taukotila:

 GetinitialState: Toiminto () {
  Palaa {PLAYSTATUS: "PLAY", Käynnistätime: 0}
}

Sovelluksesi valtion muuttuu jatkuvasti, ja se tallennetaan osavaltio esine. Tämä on tärkeää muistaa, kun kirjoitat reagoivaa, koska komponentit, jotka luottavat kyseiseen tilaan omaisuutena muuttuvat, jos valtio tekee. Mikä tekee reagoida niin hienoa työskennellä, on se, että se laskee muutokset sinulle ja päivittää DOM: n tehokkaasti, kun sivu muuttuu. Kaikki pysyy synkronoituna.

Kuljetus rekvisiitta ja tila

Nyt aiomme siirtää rekvisiitta ja osavaltio arvot komponentteihimme ( Vaihe 3 ). Meidän Pelaaja Komponentin pitäisi nyt näyttää tältä:

Render: Toiminto () {
  paluu (& lt; div classname = "soitin" & gt;
    & lt; div classname = "tausta" tyyli = {{"backgroundkuva tausta": "URL ('+ this.proops.track.artwork +') '}} & gt; & lt; / div & gt;
    & lt; div classname = "otsikko" & gt; & lt; div classname = "otsikko" & gt; nyt pelissä & lt; / div & gt; & lt; / div & gt;
    & lt; div classname = "kuvitus" Style = {{"taustakuva": "URL ('+ this.props.track.artwork +') '}} & gt; & lt; / div & gt;
    & lt; trackinformation track = {this.props.track} / & gt;
    & lt; Scrubber / & gt; Controls / & gt;
    & lt; aikaleimat kesto = {this.props.track.duration} Currentime = {this.state.currenttime} / & gt;
    & lt; audio & gt; & lt; lähde src = {this.props.track.source} / & gt; & lt; / audio & gt;
    & lt; / div & gt;
)}

Voimme sitten valita nämä arvot lapsillamme. Esimerkiksi:

 var aterestamps = reagoida.createclass ({
  Render: Toiminto () {paluu (
    & lt; div classname = "aikaleimat" & gt;
      & lt; div classname = "Aika-aika - nykyinen" & gt; {this.props.currenttime} & lt; / div & gt;
      & lt; div classname = "Aikaaika - yhteensä" & gt; {this.props.duration} & lt; / div & gt;
    & lt; / div & gt;
  )}
});

Katsoa läpi Vaihe 4 Codepenissa Jos haluat nähdä, kuinka kaikki rekvisiitteet siirretään ja käytetään lasten komponenteissa.

Kestolaskenta

Aikaleimat ovat juuri nyt tavalliset numerot. Meidän on muunnettava ne aikaleimpuksille ennen kuin niitä voidaan käyttää sovelluksessamme. Teemme tämän kirjoittamalla toiminnon komponenttimme:

 Converttime: Toiminto (aikaleima) {
    Anna minuutti = Math.floor (aikaleima / 60);
  Anna sekuntia = aikaleima - (minuutit * 60);
    Jos (sekuntia & lt; 10) {sekuntia = 0 '+ sekuntia; }
    aikaleima = minuutti + ':' + sekunnit;
    Palauta aikaleima;
}

Voimme sitten käyttää tätä meidän Aikaleima Komponentti:
{this.converttime (this.props.currenttime)} .

Toista ja tauko

Aiomme sitoutua tehtävän klikkaamalla Toisto / tauko-painikkeen tapahtuma ja siirrä se takaisin pääkomponenttiin: & lt; Controls iSPlaying = {this.state.playstatus} Onclick = {this.toggleplay} / & gt; .

Vaihto näyttää tältä:

 Toggleplay: Toiminto () {
  anna status = this.state.playstatus;
  Anna audio = document.getelementbyID ('audio');
  jos (tila === "toisto) {
    status = 'tauko'; audio.play ();
  } muu {
    Tila = "PLAY"; audio.pause ();
  }
  tämä.SetState ({PLAYSTAUS: Tila});
}

We need to adjust the code so the icon toggles from an arrow representing 'play' and two parallel lines representing 'pause' — Meidän on säädettävä koodi niin, että kuvake vaihtaa nuolesta, joka edustaa "Play" ja kaksi rinnakkaista linjaa, jotka edustavat "taukoa"

Meidän on myös lisättävä koodi Valvonta Komponentti vaihtaa kuvaketta "PLAY" "Tauko" ja toinen toiminto päivittää aikaleimat, kun kappale toistetaan.

 Render: Toiminto () {
  Anna classnames;
  jos (tämä.props.isplaying == "tauko") {
    classnames = 'fa fa-fw fa-tauko';
  } muu {
    ClassNames = 'FA FA-FW FA-PLAY';
  }
  Palaa {...}
}

Meidän on kirjoitettava tehtävä, joka käsittelee aikaleimmemme päivittämistä ennen. On parasta pitää tämä koodi erillään, jos haluamme käyttää sitä jotain muuta myöhemmin.

 UpdateTime: Toiminto (aikaleima) {
  TIMEAMP = MATH.FLOOR (TIMESTH);
  Tämä.SetState ({CORRENTIME: TIMESTH});
}

Write a function to convert your numbers into timestamps — Kirjoita toiminto muuntaa numerot aikaleimmiksi

Lopuksi meidän on päivitettävä meidän playtoggle Toiminto soittaa UpdateTime Toiminto a Setinterval .

 ...
audio.play ();
anna _this = tämä;
SetItinterval (toiminto () {
  .....
  _THIS.UPDATESCRUBBER (prosentti);
  _THIS.UPDATETTIME (käynnissä);
}, 100);
...

Siirtyä eteenpäin

Joten nyt sinun pitäisi olla kiiltävä työmusiikkisoitin. Voisit mennä eteenpäin ja lisää ominaisuuksia pyyhkimällä laulun e.pagex , tai lisää soittolistan toiminnot tallentamalla tulevia Track-tunnuksia ryhmään, seuraavaan ja edelliseen painikkeeseen. Jos tulet jumissa, päästä ulos @mrjackolai - Autan mielelläni! Pidä hauskaa ja onnea.

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti numero 289; Osta se täällä !

Aiheeseen liittyvät artikkelit:

20 JavaScript Vinkkejä puhaltaa mielesi
Onko kunnossa rakentaa sivustoja, jotka luottavat JavaScriptiin?
Kuinka suunnitella chatbot-kokemus

Rakenna yksinkertainen musiikkisoitin reagoimaan

Luo reagoi UI

Renderointi, valtio, rekvisiitta

Kuljetus rekvisiitta ja tila

Kestolaskenta

Toista ja tauko

Siirtyä eteenpäin

Miten tehdään - Suosituimmat artikkelit

Rakenna nopeasti reaktiivinen blogi Svelteen ja Sapperin kanssa

Chiaroscuro Art: vaiheittainen opas

Kuinka veistää ihmisen nenä Zbrush: 4 Helppo vaiheet

Management Menettelymallinnus

Kuinka välittää äänen maalauksessa

Kuinka saada lisää digitaalisista tekstuureista

Tutustu siihen, miten voit hyödyntää sitä

Tutustu typografian tyyliin ja sisällön

Luokat