Tilpass SoundCloud Audio Player med ToneDen SDK

Audio streaming har eksistert på Internett siden 1990, og det er ikke mange populære lyd streaming plattformer å velge mellom nå. En av de mest populære er SoundCloud som har noen distinkte fordeler over sine konkurrenter, inkludert å være enkel å legge inn.

Mens den innebygde spilleren er veldig brukervennlig og responsiv - du kan sette den på sidelinjen, på et innlegg eller en hjemmeside - du kan begrense når det gjelder å tilpasse spilleren. Du kan bare endre farge og størrelse før du deler eller integrerer den. Hvis du vil sette spilleren på nettsiden din med helt nytt design, kan du kanskje like ToneDen.

ToneDen er et javascript bibliotek bygget for å tilpasse SoundCloud lydspiller. Spilleren er responsiv, tilpassbar og utvidbar. Du kan endre huden, aktivere tastaturet eller velge å vise spilleren med bare ett spor eller full med spilleliste. I dette innlegget vil jeg veilede deg til grunnleggende installasjon og optimalisering. La oss komme i gang!

Installere spilleren

For å få tilpasset SoundCloud-spiller trenger du ikke noe innebygd skript fra SoundCloud-siden. Alt du trenger å gjøre er bare å definere et element med unikt id, og legg til det nødvendige skriptet.

For eksempel vil jeg legge til en av mine favorittbrukere fra SoundCloud, Regina Spektor, til nettstedet mitt. Det første jeg skal gjøre er å lage en div med unikt id, si player, slik som.

Deretter legger jeg til følgende obligatoriske javascript før den avsluttende koden:

Den første funksjonen er i utgangspunktet å ringe javascriptbibliotek av ToneDen. Bare legg alt som det er, og hvis du vil være vert for kilden på din egen server, få den her.

I den andre funksjonen er dette her du bør referere til alle ressurser. For å vise spilleren, gi dom den samme id som vi definerer før. Og for å ringe lydkilden, trenger jeg bare å legge til urls med brukeradressen jeg vil ha. Hvis du bare trenger valgte lydspor, må du inkludere lydnettadressene slik:

 urls: ['https://soundcloud.com/reginaspektor/samson', 'https://soundcloud.com/reginaspektor/us', 'https://soundcloud.com/reginaspektor/alltherowboats', ] 

Det er det! Nå har jeg fått min vakre SoundCloud-spiller:

Tilpasse spilleren

Som nevnt kan du tilpasse ToneDen-spilleren hvis du ikke liker standardalternativet. For å tilpasse det, bare ta med tilhørende API i den andre funksjonen. Gå over til API-dokumentasjonssiden for flere detaljer.

Følgende utdrag er en demonstrasjon av bruk av enkel API som skin å endre spillerens farge, single for å endre brukergrensesnittet ser ut til å være minimalistisk og visualizerType å vise en annen type visualisering.

 ToneDenReady = window.ToneDenReady || []; ToneDenReady.push (funksjon () {// Dette er hvor all handlingen skjer: ToneDen.player.create ({dom: '#player', urls: ['https://soundcloud.com/reginaspektor/samson', ' https://soundcloud.com/reginaspektor/us ', ' https://soundcloud.com/reginaspektor/alltherowboats ', ], single: true, skin:' dark ', visualizerType:' bars '});}); 

Vår spiller nå skal se slik ut:

Hvis du vil ha flere spillere på siden, kan du enkelt lage litt mer ToneDen.player.create slik:

 ToneDenReady.push (funksjon () {ToneDen.player.create ({dom: '# player1', urls: ['https://soundcloud.com/giraffage']}); ToneDen.player.create ({dom: ' # player2 ', urls: [' https://soundcloud.com/teendaze ']}); ToneDen.player.create ({dom:' # player3 ', urls: [' https://soundcloud.com/beat- kultur ']});}); 

Endelig tanke

Med bare noen ekstra koden, kan du nå lage din egen versjon av SoundCloud-spilleren. Det jeg liker mest fra dette biblioteket er minimalistisk design og enkel tilpasning. Du kan også integrere denne spilleren i WordPress-bloggen din med litt enkel opplæring i bunnen av ToneDen-siden. Ha det gøy!

20 mest vanedannende iPhone spill av 2018

Mobilspill er ment å gi deg en god underholdnings mulighet når du kjeder deg eller bare vil gi deg en pause. Noen spill er imidlertid så engasjerende at du pleier å bli avhengige av dem.Vel, jeg er selv skyldig i å være avhengige av CandyCrush og FarmVille en gang, men det var bare før jeg ble kjent med at det er noen andre kule vanedannende spill på iPhone som jeg kan miste meg til.Hvis du

(Tekniske og design tips)

Få mest mulig ut av Reddit: 20 tips, triks og verktøy

Reddit regner seg som The Front Page Of The Internet, og tittelen er ikke uten fortjeneste, siden nettstedet har en Alexa Global Rank innen de 100 beste og millioner av sidevisninger på en dag. Nettstedet har en absurd mengde innhold med brukere, kjent som Redditors, og legger ut interessant innhold hver time.

(Tekniske og design tips)