it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Personalizza SoundCloud Audio Player con ToneDen SDK

Lo streaming audio è in circolazione su Internet dal 1990 e non ci sono numerose piattaforme di streaming audio popolari tra cui scegliere. Uno dei più popolari è SoundCloud che presenta alcuni vantaggi distinti rispetto ai suoi concorrenti, incluso l'essere facile da incorporare.

Mentre il player incorporato è molto intuitivo e reattivo - puoi metterlo nella barra laterale, in un post o in una home page - puoi limitarti quando si tratta di personalizzare il player. Puoi modificare il colore e le dimensioni solo prima di condividerli o incorporarli. Se vuoi mettere il giocatore nella tua pagina web con un design completamente nuovo, potresti apprezzare ToneDen.

ToneDen è una libreria javascript per la personalizzazione del lettore audio SoundCloud. Il giocatore è reattivo, personalizzabile ed estensibile. Puoi cambiare skin, abilitare l'evento tastiera o scegliere di visualizzare il player con una sola traccia o pieno con playlist. In questo post, ti guiderò all'installazione e all'ottimizzazione di base. Iniziamo!

Installazione del lettore

Per ottenere un lettore SoundCloud personalizzato, non è necessario alcuno script incorporato dal sito SoundCloud. Tutto quello che devi fare è solo definire un elemento con ID univoco quindi aggiungere lo script richiesto.

Ad esempio, voglio aggiungere uno dei miei utenti preferiti da SoundCloud, Regina Spektor, al mio sito. La prima cosa che farò è creare un div con id unico, ad esempio player, in questo modo.

Quindi aggiungo il seguente javascript richiesto prima del tag di chiusura del body :

La prima funzione è fondamentalmente chiamare la libreria javascript di ToneDen. Lascia tutto come è e se vuoi ospitare la fonte sul tuo server, procurati qui.

Nella seconda funzione, è qui che devi fare riferimento a tutte le risorse. Per visualizzare il giocatore, dai alla stessa ID che definiamo prima. E per chiamare la sorgente audio, ho solo bisogno di aggiungere gli urls con l'url dell'utente che voglio. Se hai bisogno solo di tracce audio selezionate, quindi includi gli URL audio in questo modo:

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

Questo è tutto! Ora ho ottenuto il mio bellissimo lettore SoundCloud:

Personalizzazione del lettore

Come accennato, puoi personalizzare il lettore ToneDen se non ti piace l'opzione predefinita. Per personalizzarlo, basta includere l'API correlata nella seconda funzione. Vai alla pagina della documentazione dell'API per maggiori dettagli.

Il seguente frammento di codice è una demo dell'utilizzo di API semplici come skin per cambiare il colore del player, single per cambiare l'interfaccia utente sembra essere minimalista e visualizerType per mostrare un diverso tipo di visualizzazione.

 ToneDenReady = window.ToneDenReady || []; ToneDenReady.push (function () {// Qui è dove avviene tutta l'azione: 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 '});}); 

Il nostro giocatore ora dovrebbe assomigliare a questo:

Se vuoi avere più giocatori sulla pagina, crea facilmente più ToneDen.player.create modo:

 ToneDenReady.push (function () {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- cultura ']});}); 

Pensiero finale

Con solo un po 'di codice aggiuntivo, ora puoi creare la tua versione del player SoundCloud. La cosa che mi piace di più di questa libreria è il suo design minimalista e la facile personalizzazione. Puoi anche integrare questo lettore nel tuo blog WordPress con alcuni semplici tutorial nella parte inferiore della pagina ToneDen. Divertiti!

30 set di icone mediche gratuite che puoi scaricare

30 set di icone mediche gratuite che puoi scaricare

Le icone sono uno di quegli elementi apparentemente banali che influenzano notevolmente l'aspetto generale dell'interfaccia utente . Pertanto, i progettisti di app Web e mobile sono sempre alla ricerca di accumuli set di icone di qualità nella loro raccolta di omaggi.In questa raccolta, ho messo insieme 30 set di icone mediche che è possibile scaricare gratuitamente e utilizzare per siti Web sanitari e medici, app mobili e altri progetti correlati.

(Consigli tecnici e di design)

Designer: 10 brevi libri elettronici per uccidere il tuo tempo libero

Designer: 10 brevi libri elettronici per uccidere il tuo tempo libero

Di solito, passiamo così tanto tempo a controllare i nostri aggiornamenti di stato sui social network e a giocare ai nostri giochi, quindi quando si tratta di percorrere lunghe distanze, forse è tempo di cambiare. Piuttosto che ricorrere ai libri di stampa, perché non afferrare gli ebook in modo da poter passare da un titolo all'altro senza portare tutto quel peso in più .Tut

(Consigli tecnici e di design)