Passen Sie den SoundCloud Audio Player mit dem ToneDen SDK an

Audio-Streaming gibt es seit 1990 im Internet und es gibt nicht viele beliebte Audio-Streaming-Plattformen zur Auswahl. Einer der beliebtesten ist SoundCloud, der einige Vorteile gegenüber seinen Mitbewerbern hat und leicht einzubetten ist.

Während der eingebettete Player sehr benutzerfreundlich und reaktionsschnell ist - Sie können ihn in der Seitenleiste, auf einem Post oder auf einer Homepage platzieren - können Sie die Anpassung des Players einschränken. Sie können die Farbe und Größe nur ändern, bevor Sie sie teilen oder einbetten. Wenn Sie den Player mit einem ganz neuen Design auf Ihre Webseite stellen möchten, mögen Sie ToneDen.

ToneDen ist eine Javascript-Bibliothek zum Anpassen von SoundCloud Audio Player. Der Player ist anpassbar, anpassbar und erweiterbar. Sie können die Skin ändern, das Tastaturereignis aktivieren oder auswählen, ob der Player nur mit einer einzelnen Spur oder mit einer vollständigen Wiedergabeliste angezeigt werden soll. In diesem Beitrag werde ich Sie zur grundlegenden Installation und Optimierung führen. Lass uns anfangen!

Installieren des Players

Um einen benutzerdefinierten SoundCloud-Player zu erhalten, benötigen Sie kein eingebettetes Skript von der SoundCloud-Website. Sie müssen lediglich ein Element mit einer eindeutigen ID definieren und dann das erforderliche Skript hinzufügen.

Zum Beispiel möchte ich einen meiner Lieblingsbenutzer von SoundCloud, Regina Spektor, zu meiner Website hinzufügen. Das erste, was ich tun werde, ist ein div mit einer eindeutigen ID zu erstellen, sagen player, so.

Dann füge ich das folgende erforderliche Javascript vor dem schließenden Tag des body :

Die erste Funktion besteht im Wesentlichen darin, die Javascript-Bibliothek von ToneDen aufzurufen. Lassen Sie alles einfach so, wie es ist, und wenn Sie die Quelle auf Ihrem eigenen Server hosten wollen, holen Sie es hier her.

In der zweiten Funktion sollten Sie hier auf alle Ressourcen verweisen. Um den Player anzuzeigen, geben Sie der dom dieselbe ID wie zuvor definiert. urls die urls, muss ich nur die urls mit der urls Benutzer-URL hinzufügen. Wenn Sie nur ausgewählte Audiospuren benötigen, fügen Sie die Audio-URLs wie folgt ein:

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

Das ist es! Jetzt habe ich meinen schönen SoundCloud Player:

Anpassen des Players

Wie bereits erwähnt, können Sie den ToneDen-Player anpassen, wenn Sie die Standardoption nicht mögen. Um es anzupassen, schließen Sie einfach die entsprechende API in die zweite Funktion ein. Weitere Informationen finden Sie auf der API-Dokumentationsseite.

Das folgende Snippet ist eine Demo zur Verwendung einfacher APIs wie skin zum Ändern der Playerfarbe, single zum Ändern der Benutzeroberfläche als minimalistisch und visualizerType zum Anzeigen einer anderen Art von Visualisierung.

 ToneDenReady = window.ToneDenReady || []; ToneDenReady.push (function () {// Hier findet die ganze Aktion statt: 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 '});}); 

Unser Spieler sollte jetzt so aussehen:

Wenn Sie mehrere Player auf der Seite haben möchten, erstellen Sie einfach weitere ToneDen.player.create wie ToneDen.player.create :

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

Letzter Gedanke

Mit nur etwas zusätzlichem Code können Sie jetzt Ihre eigene Version des SoundCloud Players erstellen. Was ich an dieser Bibliothek am meisten mag, ist das minimalistische Design und die einfache Anpassung. Sie können diesen Player auch in Ihren WordPress-Blog mit einem einfachen Tutorial unten auf der ToneDen-Seite integrieren. Habe Spaß!

Top 5 Android Kalender Apps, die Sie auschecken sollten

Viele von uns verlassen sich heutzutage auf unsere Gadgets, um zu verfolgen, welche Ereignisse und Aktivitäten in unserem Leben stattfinden . So wird eine Kalender-App ziemlich wichtig. Im Google Play Store sind eine Reihe von Kalender-Apps verfügbar.Es kann sich jedoch als etwas schwierig herausstellen, ein kostenloses Produkt zu finden, das sowohl in Bezug auf die Funktionen als auch auf das Design gut ist, da es möglicherweise nicht in der Lage ist, das richtige mobile Erlebnis zu bieten oder effektiv mit Ihrem Android-Gerät zu integrieren. De

(Tech- und Design-Tipps)

Online-Shopping-Tipps, die Sie bereits wissen sollten

Online-Shopping ist Spaß, bequem, einfach und manchmal therapeutisch . Sie können Preise vergleichen, Online-Rabatte finden, viel sparen, mehr für weniger bekommen. Trotzdem tut es nicht weh, ein paar Tricks mehr zu lernen, wenn Sie in Online-Katalogen nach Ihrem nächsten Einkauf suchen.Wenn Sie daran interessiert sind, hier ist eine kurze, aber lustige Infografik von Collectplus voller Tipps für Leute, die gerne online einkaufen. Hol

(Tech- und Design-Tipps)