Bisher kann man in Webflow lediglich Musik von Soundcloud über ein Rich-Text-Feld einfügen. Hier ist eine Alternative dazu, mit der man unabhängig von Soundcloud sein kann.
Als erstes musst du deine Audio-Datei in deiner Google Drive abspeichern. Wo du die Datei abspeicherst, spielt dabei keine Rolle.
Als nächstes brauchen wir den Share-Link vom Audio File. Dafür machen wir einen Rechtsklick auf das Audio-File, dann klicken wir auf «Link abrufen»
Den Link kopieren wir nun in irgend einen Texteditor, um die Media-ID auslesen zu können.
Im Texteditor markieren wir uns nun die Media-ID am ende des Links und kopieren sie.
Nun können wir in Webflow auf dem Canvas ein Custom-Code-Feld erstellen. Dieses Feld wird am Ende als Audio-Player sichtbar sein.
Sobald du das Custom-Code-Feld erstellt hast, fügst du folgenden Code in das Feld ein:
Am Ende des src Links fügst du nun die Media-ID ein. Das sieht dann am Ende etwa so aus:
<audio src="http://docs.google.com/uc?export=open&id=1xYNHcZ0GLiLGbZd-shQUACRkDgn9qU6y" controls autoplay></audio>
Leider kann nicht jeder Browser jedes Audio-Format abspielen. Deshalb muss man sich entscheiden, welche Browser man unterstützen möchte und welche nicht.
Im HTML Text gibt es verschiedene Anpassungsmöglichkeiten, um das Verhalten und Aussehen des Audio-Players zu ändern (z.B. Autoplay, Loop, Ein-/Ausblenden, usw.)
Hier findest du eine Liste aller Anpassungsmöglichkeiten und jeweils eine Erklärung, was die Anpassung genau macht:
https://docs.microsoft.com/en-us/previous-versions/msdn10/hh527168(v=msdn.10)
Den jeweiligen Code kannst du in deinem Custom-Code-Feld jeweils direkt nach controls eingeben.
