Kuinka tehdä reaaliaikaisia ​​SoundCloud-aaltomuotoja React Native -sovelluksessa

Johdanto

SoundCloud on musiikki- ja podcast-suoratoistoalusta miljoonien aitojen kappaleiden kuunteluun. Heillä on todella interaktiivinen käyttöliittymä kappaleiden toistamiseen / kuunteluun.

Tärkein ominaisuus niiden rajapinnassa on raidan etenemisen näyttäminen sen taajuusaaltomuodon perusteella. Tämä auttaa käyttäjiä tunnistamaan sen luonteen.

Heillä on myös blogikirjoitus, joka kuvaa aaltomuodon käyttöä kuvan perusteella. On vaikea käyttää samoja tekniikoita aaltomuodon luomiseen React Native -sovelluksessa. Heidän Waveform.js SDK muuntaa aaltomuodon kelluviksi pisteiksi hahmonnettavaksi HTML5-kankaalle, eikä se ole tällä hetkellä enää toiminnassa.

Tässä artikkelissa keskustellaan siitä, kuinka samaa aaltomuotoa käytetään React Native -sovelluksillemme.

Miksi minun pitäisi käyttää SoundCloudin aaltomuotoja?

  • SoundCloudin aaltomuoto näyttää vaikuttavammalta kuin vanha tylsä ​​tapa näyttää edistymispalkki.
  • Esiladattu aaltomuoto antaa käyttäjälle käsityksen kappaleessa esiintyvistä eri taajuuksista.
  • Puskuroidun raidan prosenttiosuuden näyttäminen on myös paljon helpompaa aaltomuodossa kuin sen näyttäminen tyhjällä etenemispalkilla.

Opitaan lisää SoundCloudin aaltomuodoista

SoundCloud tarjoaa waveform_urlraitojensa sovellusliittymän.

  • Jokaisella radalla on oma ainutlaatuinen waveform_url.
  • waveform_urlOn linkki kuvaan nostetaan yli pilvi.

Esimerkki - //w1.sndcdn.com/PP3Eb34ToNki_m.png

Jokainen argumentti on staattinen, joten sitä ei voida käyttää tässä nykyisessä tilassa. Siksi meidän on luotava aaltomuoto uudelleen sen perusteella käyttäen React Native -säiliöitä , jotta pääsemme kosketustapahtumiin, tyyleihin jne.

Päästä alkuun

Tässä on luettelo tarvitsemistasi asioista:

  • d3-asteikko
  • d3-matriisi

Ensinnäkin tarvitsemme näytteenoton aaltomuodosta. Temppu on korvata .pngkanssa .jsonvarten waveform_url. GETPuhelun se antaisi meille vastauksen esine, joka sisältää

  • leveys (aaltomuodon leveys )
  • korkeus (aaltomuodon korkeus)
  • näytteet (taulukko)

Lisätietoja saat kokeilemalla seuraavaa linkkiä //w1.sndcdn.com/PP3Eb34ToNki_m.json.

Sukella koodiin

Lisää mukautettu SoundCloudWave-komponentti

function percentPlayed (time, totalDuration) { return Number(time) / (Number(totalDuration) / 1000)}

Olisi parempi luoda mukautettu SoundCloudWave- komponentti, jota voidaan käyttää useissa paikoissa tarpeen mukaan. Tässä vaaditaan props:

  • waveformUrl - aaltomuodon URL-objekti (käytettävissä Tracks-sovellusliittymän kautta)
  • korkeus - aaltomuodon korkeus
  • width - Aaltomuodon komponentin leveys
  • percentPlayable - Puskuroidun raidan kesto sekunteina
  • percentPlayed - Toistetun raidan kesto sekunteina
  • setTime - Takaisinkutsujen käsittelijä muuttaa nykyistä jäljen aikaa

Hanki näytteet

fetch(waveformUrl.replace('png', 'json')) .then(res => res.json()) .then(json => { this.setState({ waveform: json, waveformUrl }) });

Hanki näytteet yksinkertaisen GETAPI-kutsun avulla ja tallenna tulos state.

Luo aaltomuodon komponentti

import { mean } from 'd3-array';
const ACTIVE = '#FF1844', INACTIVE = '#424056', ACTIVE_PLAYABLE = '#1b1b26'
const ACTIVE_INVERSE = '#4F1224', ACTIVE_PLAYABLE_INVERSE = '#131116', INACTIVE_INVERSE = '#1C1A27'
function getColor( bars, bar, percentPlayed, percentPlayable, inverse) { if(bar/bars.length < percentPlayed) { return inverse ? ACTIVE : ACTIVE_INVERSE } else if(bar/bars.length < percentPlayable) { return inverse ? ACTIVE_PLAYABLE : ACTIVE_PLAYABLE_INVERSE } else { return inverse ? INACTIVE : INACTIVE_INVERSE }}
const Waveform = ( { waveform, height, width, setTime, percentPlayed, percentPlayable, inverse } ) => { const scaleLinearHeight = scaleLinear().domain([0, waveform.height]).range([0, height]); const chunks = _.chunk(waveform.samples, waveform.width/((width - 60)/3)) return (  {chunks.map((chunk, i) => (  { setTime(i) }}>   ))}  ) }

Aaltomuoto Komponentti toimii seuraavasti:

  • Palat jakoivat samplesobjektin sen perusteella width, minkä käyttäjä haluaa tehdä näytöllä.
  • Palat kartoitetaan sitten Touchabletapahtumaan. Tyylit nimellä width:2ja height: scaleLinearHeight(mean(chunk)). Tämä aiheuttaa sen meanpäässä d3-array.
  • Se backgroundColorvälitetään menetelmänä, jolla on eri parametrit getColormenetelmälle. Tämä määrittää sitten palautettavan värin asetettujen ehtojen perusteella.
  • Touchable onPressTapahtuma soittaa mukautetun käsittelijä kulunut siihen, asettaa uuden hakuaika radan.

Nyt tämä valtioton komponentti voidaan tehdä lapsikomponenttisi muodossa

render() { const {height, width} = this.props const { waveform } = this.state if (!waveform) return null; return (     )}

Tässä yksi aaltomuodon komponenteista on alkuperäinen ja toinen ylösalaisin kuten SoundCloudin soittimessa.

Johtopäätös

Tässä ovat linkit reagoivaan-äänikuvaan-aaltomuotoon

  • Github
  • npm

Olen myös tehnyt sovelluksen reagoivassa - MetalCloud for Metal Music -faneille, jossa näet yllä olevan komponentin työssä.

Tässä ovat linkit:

  • IOS
  • Android

Kiitos lukemisesta. Jos pidit tästä artikkelista, ilmaise tukesi taputtamalla sitä jakamaan muiden Mediumissa olevien ihmisten kanssa.

Lisää hienoja juttuja löytyy StackOverflow- ja GitHub-profiileistani.

Seuraa minua LinkedInissä, Mediumissa, Twitterissä päivittääksesi uusia artikkeleita.