Die folgenden Schritte zeigen dir, wie du einen Chordify-Player in wenigen einfachen Schritten auf deiner Website oder in deinem Blog einbinden kannst.
Schritt 1: Wähle deinen Song aus
Du kannst jeden beliebigen Chordify-Song teilen, indem du ihn auf deiner Website einbettest – aber Achtung: Wir unterstützen keine bearbeiteten Songversionen, sondern nur die Standardversionen. Vergewissere dich immer, dass die Akkorde an der richtigen Stelle stehen, bevor du sie teilst. Wenn du bereit bist, eine Version eines Songs einzubetten, kannst du auf das vertikale Ellipsen-Symbol „…“ (oben links neben dem Titel des Songs) klicken, wodurch sich ein Menü öffnet. Dort findest du die Option „Einbetten“.
Schritt 2: Den Code kopieren
Klicke auf das Einbettungssymbol, und es erscheint ein Pop-up-Fenster mit einem HTML-Codeausschnitt. Du kannst diesen kopieren, indem du auf „Kopieren“ klickst oder den Text markierst und Strg + C drückst. Dieser vorgefertigte Codeausschnitt wird als „Inline-Frame“ bezeichnet und wird in HTML durch einen <iframe>-Tag angegeben. Wir haben die Formatierung (d. h. die Festlegung der Breiten- und Höhenwerte) bereits für dich übernommen, sodass du den Code nur noch kopieren und einfügen musst.
Schritt 3: Den Iframe-Code einfügen und anpassen
Die meisten Content-Management-Systeme (wie WordPress) passen den Chordify-Player automatisch an das Design deiner Website an. Achte darauf, dass der „Text“-Modus ausgewählt ist (oben rechts im Bild unten) und nicht der „Visuell“-Modus. Wie du im Code sehen kannst, sind für die Anzeigegröße bereits Standardwerte voreingestellt: Die Breite ist auf 100 % und die Höhe auf 500 Pixel festgelegt. Das gewährleistet in den meisten Fällen eine automatische Anpassung an das Layout deiner Website. Du kannst die Abmessungen aber auch anpassen, indem du die Werte änderst. Beachte, dass das Seitenverhältnis des Einbettungscodes beibehalten wird, wenn du die Größe änderst. Wenn du mehr über <iframe> erfahren möchtest und wissen willst, wie du weitere Parameter hinzufügen kannst, schau dir die Dokumentation an.
Schritt 4: Das Einbettungselement testen
Wie du sehen kannst, haben wir unten in diesem Blogbeitrag einen Song eingebettet, damit du sehen kannst, wie es funktioniert. Es handelt sich um eine abgespeckte Version der Benutzeroberfläche, die du auf unserer Website und in unserer App findest, aber sie verfügt über die wesentlichen Funktionen, mit denen man schnell mitspielen kann – ganz unkompliziert und ohne Hürden. Oben links im Player kannst du zwischen „AKKORDDIAGRAMME“ und „AKKORDÜBERSICHT“ wählen, und oben rechts kannst du dein bevorzugtes Instrument auswählen: Gitarre, Ukulele, Klavier oder Mandoline. Genau wie auf unserer Website wird das YouTube-Video an die angezeigten Akkorde angepasst.
Mit dieser einfachen, aber effektiven Einbettungsfunktion hast du nun die Möglichkeit, einen Chordify-Player ganz einfach auf deiner eigenen Website einzubinden. Du kannst jedem, der Interesse hat, zeigen, wie man deine Musik oder deine Chordify-Bearbeitungen spielt. Wir haben hart daran gearbeitet, einen reibungslosen Ablauf und eine Benutzeroberfläche zu gewährleisten, die das Mitspielen so einfach wie möglich macht. Und genau darum geht es ja!