Hogyan készítsünk valós idejű SoundCloud hullámformákat a React Native-ban

Bevezetés

A SoundCloud egy zenei és podcast streaming platform, amely több millió hiteles szám meghallgatására szolgál. Valóban interaktív interfésszel rendelkeznek a zeneszámok lejátszásához / meghallgatásához.

Interfészük legfontosabb jellemzője a sáv haladásának bemutatása a frekvencia hullámformája alapján. Ez segít a felhasználóknak azonosítani a természetét.

Van egy blogbejegyzésük is, amely leírja a hullámforma használatát a képe alapján. Nehéz ugyanazokat a technikákat használni a hullámforma előállításához a React Native alkalmazásban. A Waveform.js SDK- juk lebegőpontokká alakítja át a hullámformát egy HTML5 vászonon való megjelenítés céljából, és jelenleg már nem működik.

Ebben a cikkben megvitatjuk, hogyan lehet ugyanazt a hullámformát használni a React Native alkalmazásokhoz.

Miért használjam a SoundCloud hullámformáit?

  • A SoundCloud hullámformája lenyűgözőbbnek tűnik, mint a haladássáv régi unalmas módja .
  • Az előre betöltött hullámforma képet ad a felhasználónak a dal különböző frekvenciáiról.
  • Sokkal könnyebb megmutatni a pufferelt sáv százalékát egy hullámformán, semmint egy üres haladási sávon.

Tudjon meg többet a SoundCloud hullámformáiról

A SoundCloud waveform_urla pályáin API-t biztosít.

  • Minden pályának megvan a maga egyedi waveform_url.
  • A waveform_urltartalmaz egy linket a felhő fölé emelt képhez.

Példa - //w1.sndcdn.com/PP3Eb34ToNki_m.png

Mostantól minden argumentum statikus, ezért ebben a jelenlegi állapotban használhatatlan. Ezért a React Native tárolóinak használatával újra létre kell hoznunk a hullámformát annak érdekében, hogy hozzáférjünk az érintési eseményekhez, stílusokhoz stb.

Elkezdeni

Itt van egy lista a szükséges dolgokról:

  • d3-skála
  • d3-tömb

Először szükségünk van a hullámforma mintavételére. A trükk az, hogy cserélje ki .pnga .jsonaz waveform_url. Ha GETfelhívjuk, válaszobjektumot kapunk, amely tartalmazza

  • szélesség (a hullámforma szélessége)
  • magasság (a hullámforma magassága)
  • minták (tömb)

További információért próbálja ki a következő linket: //w1.sndcdn.com/PP3Eb34ToNki_m.json.

Merüljön el a kódban

Adjon hozzá egy egyedi SoundCloudWave-összetevőt

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

Jobb lenne egy egyedi SoundCloudWave komponenst létrehozni, amely szükség szerint több helyen is használható. A következőkre van szükség props:

  • waveformUrl - A hullámalak URL-objektuma (a Tracks API-n keresztül érhető el)
  • magasság - A hullámforma magassága
  • szélesség - A hullámalakú alkatrész szélessége
  • percentPlayable - A sáv pufferelt időtartama másodpercben
  • percentPlayed - A lejátszott szám időtartama másodpercben
  • setTime - A visszahívás kezelője az aktuális műsoridő megváltoztatásához.

Szerezd meg a mintákat

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

Szerezze be a mintákat egy egyszerű GETAPI-hívás használatával, és tárolja az eredményt a state.

Hozzon létre egy hullámforma-összetevőt

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) }}>   ))}  ) }

A Waveform Component a következőképpen működik:

  • A darabok felosztják az samplesobjektumot annak alapján, widthamelyet a felhasználó a képernyőn meg akar jeleníteni.
  • Ezután a darabokat feltérképezik egy Touchableeseménybe. A stílusok width:2és height: scaleLinearHeight(mean(chunk)). Ez generálja meana d3-array.
  • Ezt backgroundColora metódust különböző paraméterekkel adják át a getColormetódusnak. Ez majd meghatározza a visszatérni kívánt színt a beállított feltételek alapján.
  • Az Touchable onPressesemény felhívja az átadott egyedi kezelőt, hogy beállítsa a pálya új keresési idejét .

Ez a hontalan alkotóelem a gyermekkomponensként a következőképpen jeleníthető meg:

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

Itt az egyik hullámalakú komponens eredeti és egy fordított, mint a SoundCloud lejátszójában.

Következtetés

Itt találhatók a linkek a reakció-natív-hangfelhő-hullámalakra

  • Github
  • npm

Készítettem egy olyan alkalmazást is, amely a reakciókban honos - MetalCloud for Metal Music rajongók számára, ahol láthatja a fenti összetevőt munkájában.

Itt vannak a linkek:

  • IOS
  • Android

Thanks for reading. If you liked this article, show your support by clapping to share with other people on Medium.

More of the cool stuff can be found on my StackOverflow and GitHub profiles.

Follow me on LinkedIn, Medium, Twitter for further update new articles.