Audiodatei in Website einfügen

Fridoya schrieb am 24.10.2018 um 13:28 Uhr

Liebe Forum Nutzer

Ich möchte euch – einmal mehr – um Rat bitten. Ich habe vergeblich in diesem Forum nach einem Thread gesucht, der mir weiterhelfen könnte (gesucht in "Web und Technik" nach „Audiodatei in Website einfügen“ – keine Beiträge). Sollte mein Problem aber trotzdem irgendwo bereits behandelt worden sein, möchte ich euch um einen entsprechenden Hinweis bitten.

Ansonsten hier mein Problem, zu dem ich trotz tagelanger Internetrecherche und ausgiebigem „Herumpröbeln“ keine Lösung gefunden habe. Was ich im Internet gefunden habe, scheint bereits veraltet, auf Youtube gibt es zwar ein Video dazu aus 2018, dieses bezieht sich aber auf WordPress und nicht auf den Web Designer 15 Premium, den ich verwende. Ich möchte also eine eigene Audiodatei in meine Website einfügen. Durch einfaches Verlinken ist das problemlos möglich, wird auch von allen Browsern akzeptiert. Nur: Um sich dann die Audiodatei anzuhören, wird die Website verlassen und der Besucher muss sich zurück auf die Website klicken. Ich möchte deshalb einen Player einfügen, über den dann die Audiodatei abgespielt werden kann. Ich habe Folgendes gemacht:

1. Einem entsprechenden Internethinweis folgend (veraltet?) habe ich zuerst meine Audiodatei ins mp3-Format umgewandelt und in „index_html_files“ hochgeladen.

2. Ich habe anschliessend einen Platzhalter in meine Website eingefügt und im „Body“ folgenden HTML-Code eingegeben, um einen HTML-Player zu erhalten (ein HTML5-Player soll in allen gängigen Browsern verfügbar sein – stimmt diese Internetaussage?):

</audio>

Nach dem Hochladen der ganzen Website hat sich dann in Firefox und Chrome tatsächlich ein Player dargestellt, über den ich meine Audiodatei aber nicht abspielen konnte. Im Internet Explorer (auf meinem PC habe ich noch Windows 7 installiert) zeigte sich kein Player aber der Hinweis: „Ungültige Quelle“. Im Migrosoft Edge (auf meinem Laptop ist Windows 10 installiert) steht: „Dieser Audiotyp wird nicht unterstützt.“

Meine Fragen sind deshalb die folgenden:

1. In welches Format muss ich meine Audiodatei umwandeln, damit sie von allen Browsern erkannt wird?

2. Stimmt der HTML-Code?

3. Gibt es andere Möglichkeiten, ein in allen Browsern sichtbarer Player einzufügen? Wie würde der HTML-Code dafür lauten?

4. Befindet sich meine Audiodatei im richtigen Verzeichnis?

Für jeden Hinweis bin ich sehr froh und danke euch im Voraus herzlich. Schönen Tag!

Fridoya

Kommentare

marboe schrieb am 24.10.2018 um 14:10 Uhr

Also, ich mache es mir da viel einfacher.
Wenn du die browserseitige Bereitstellung möchtest, dann kannst du

1. Einen Text, oder ein Symbol oder ein Bild oder ... oder verlinken
2. per http://deine Domain.de/Musikordner/deinSong.mp3
3. der Browser spielt automatisch ab. Das funktioniert mit Firefox, Chrome und Apple-Geräten der neueren Generation auf jeden Fall.

Einzig schiebe ich mit der Hand meine Musikdateien in den o.g. Ordner https://meineDomain/Musik/
Sobald der Name der Datei exakt mit dem Linkaufruf von Nr. 2 übereinstimmt, wird der Song gespielt. (hier muss man peinlichst auf die gleiche Rechtschreibung achten wie auch auf Groß- und Kleinschreibung).

Wäre das auch eine Lösung für dich? Als FTP-Programm nutze ich FileZilla. Ich benötige keinen Platzhalter, keinen Code. Es ist einfach nur ein Link auf Internetadresse (Webeigenschaften).

ein HTML5-Player soll in allen gängigen Browsern verfügbar sein – stimmt diese Internetaussage?

Ja. Das stimmt.

Ein weiterer Vorteil kommt bei meinem beschriebenen Vorgehen zum Tragen:
- die Projektdatei bleibt sehr schlank, da ich die Musik ja neben dem WD auf den Server kopiere.
- es ist ein Teilen zwischen den Varianten ohne Probleme möglich

Gruß marboe

Fridoya schrieb am 24.10.2018 um 15:10 Uhr

Herzlichen Dank für deine rasche Antwort, Marboe!

Ich habe versucht, deinen Vorschlag, der für mich durchaus in Frage kommt, umzusetzen, scheitere aber bereits an den "Basics"... Ich habe einen Ordner "Musik" angelegt und die Audiodatei hineinverschoben. Wie komme ich nun aber zu https://meine Domain.de/Musik/meineAudiodatei.mp3? Wie kriege ich den Ordner "Musik" auf den Server? Ich nutze auch FileZilla, kann dort aber nur einzelne Dateien hochladen.

Ich weiss, ich stelle immer wieder dumme Fragen, aber wer nicht fragt, bleibt dumm... 😉

Ich freue mich auf deine Antwort!

marboe schrieb am 24.10.2018 um 16:56 Uhr

Ah, das ist überhaupt nicht schwer.

Falls du schon Hilfe beim ersten Schritt bräuchtest (das hat wohl bei dir geklappt, wenn ich dich richtig verstehe):

Auf dem Server den Ordner für deine Homepage suchen. In der Regel ist dass das Rootverzeichnis.
Bei mir zB nicht. Ich habe die Homepage in einem Unterordner.
So sieht es aus (leider leicht abgeschnitten)

1. Mein Rootverzeichnis
2. Der Ordner wo meine Homepage liegt.
Dort hin zB machst du einen Rechtsklick auf den Ordner und wählst "neues Verzeichnis erstellen".

Ich habe den Ordner "musik" genannt.

Im nächsten Schritt schiebst du nun deine mp3 vom PC in diesen Ordner.

Auch dies hat bei dir wohl geklappt.

Wenn du nun die neue Datei auf dem Server im Ordner /musik anklickst, kannst du per Rechtsklick wählen:

Fügst du den Inhalt deiner Zwischenablage nun im WD unter "Link auf Internetadresse" ein, musst du nur noch eine Kleinigkeit korrigieren.
Denn der gespeicherte Link aus FileZilla sieht ungefähr so aus:
sftp://xxxxxxxxx@home1111111111.1and1-data.host/meineDomain/Ordner/musik/Songtitel.mp3.

Den musst du nur anpassen indem du vorne alles löschst bis zu "meineDomain".
meineDomain= wird zu DeineDomain.de -- hier musst du nur .de oder .com oder ähnliches ergänzen
(Ordner = falls du nochmal geschachtelt hast; entfällt ggf auch. )
/musik = das ist schon richtig kopiert; hier erscheint dein neuer Ordnername den du erstellt hast
Songtitel.mp3 = hier erscheint der richtige Namen des Songs.mp3

So wird daraus die in diesem Falle richtige Adresse:

http oder https://www.deineDomain.de/musik/Songtitel.mp3
Du musst also nur vorne das sftp.... löschen und dein .de oder .com ergänzen; und schon ist dein Link fertig. Der übrigens schon im Browser aufgerufen werden kann zum Testen, sobald du die Musiktitel kopiert hast.

Ich hoffe, des hilft dir weiter.
Dir fehlt wohl nur der richtige Link im WD. Das sollte eine Kleinigkeit sein.
Viel Erfolg! Gruß marboe

marboe schrieb am 24.10.2018 um 17:12 Uhr

Was dir evtl. noch Probleme bereiten könnte, wäre

- du musst richtig eintragen, ob du http oder https nutzt.

- du musst richtig eintragen, ob du deine Domain mit www. oder ohne betreibst.

Am einfachsten: einfach im Browser versuchen auf einer leeren Seite deinen Link aufzurufen.
Erscheint der Player, musst du nur noch die Adresse kopieren und im WD richtig einfügen.
Und wenn es einmal stimmt, weißt du zukünftig wie du es schreiben musst - bist also in Sekunden damit fertig bei allen zukünftigen Verlinkungen.
Gruß Marboe

Fridoya schrieb am 24.10.2018 um 18:21 Uhr

Ich danke dir sehr, dass du dir die Zeit für diese ausführlichen Erklärungen genommen hast. Ich bin - auch dank deiner Illustrationen - so weit gekommen, dass ich nun den Inhalt der Zwischenablage im WD unter "Link auf Internetadresse" einfügen soll. Ich weiss aber nicht, wo ich den in FileZilla gespeicherten Link sehen und somit an der entsprechenden Stelle des WD einfügen könnte. Ich sehe - auf FileZilla - nirgends den Link sftp://... Würdest du bitte noch einmal helfen? Herzlichen Dank!

marboe schrieb am 24.10.2018 um 19:10 Uhr

Markiere die Datei in FileZilla auf die du verlinken möchtest. Dann ein Rechtsklick und URL kopieren anklicken.

Gruß marboe

Fridoya schrieb am 24.10.2018 um 19:54 Uhr

Irgendetwas läuft nicht richtig - ich weiss nicht was. Um einen Schritt zurück zu gehen: Ich habe auf der in die Zwischenablage zu verschiebenden Audiodatei (im auf dem Server sich befindenen Ordner "Musik") einen Rechtsklick gemacht und dann "URL(s) in die Zwischenablage kopieren" angeklickt. Optisch geschieht dabei nichts. Die Datei sollte doch dann aber in der Zwischenablage sein. Markiere ich erneut diese Datei und führe ich einen Rechtsklick darauf aus, sollte ich also die ftp.URL sehen. Das tue ich aber nicht, statdessen öffnet sich erneut das Fenster mit dem Eintrag "URL(s) in die Zwischenablage kopieren" - also ist die Datei doch nicht in der Zwischenablage? Was mache ich denn da falsch?

marboe schrieb am 24.10.2018 um 20:14 Uhr

Dabei wird doch nur der link in die Zwischenablage getan. Nicht die Datei.

Die hast du doch vorher selbst an die richtige Stelle kopiert 😉.

Fridoya schrieb am 25.10.2018 um 03:25 Uhr

Danke, Marboe, für deine erneute Antwort und deine Geduld. Ich habe in FileZilla einen Rechtsklick auf meine Audiodatei gemacht, "URL(s) in Zwischenablage kopieren" angeklickt und dann im WD ein Objekt verlinkt und bei der Verlinkung Ctrl+V eingefügt. Dabei habe ich gesehen, dass die eingefügte ftp.URL wie von dir angegeben aufgebaut war, jedoch ohne "s" vor "ftp" - was hat das zu bedeuten? Ich änderte die URL nach deiner Vorgabe um und erhielt nach dem Hochladen dann aber dasselbe Resultat, wie ich es durch das Hochladen der Audiodatei in index_html_files und der Verlinkung eines Objektes mit der Audiodatei auf meinem Rechner erhalten hatte - "Auf Datei verlinken (PDF, AVi etc.)". Es wird nun erneut beim Abhören der Audiodatei die Website "verlassen", und man muss sich nach Anhören der Audiodatei zurück auf die Website klicken. Ich hatte mir eher vorgestellt, auf der Seite selber einen kleinen Audio Player einfügen zu können, wie es der HTML5-Player der jeweiligen Browser ermöglicht, nur konnte ich über das Einfügen eines Platzhalters und dem entsprechenden Code im "Body" aus dem Internet einen solchen Player im IE gar nicht darstellen, bei Firefox und Chrome war es möglich, die Datei konnte ich dann aber auch im Player des Firefox und Chrome nicht abspielen. Ich habe es mit der neuen ftp.URL nun aber noch einmal versucht und im Code die ganze neue URL als Pfad eingegeben. Dadurch war auch die Darstellung des Audio Players im IE und das Abspielen der Audiodatei in allen Browsern möglich. Der Audio Player in Firefox und Chrome ist genauso, wie ich ihn gerne hätte, derjenige in IE ist im Verhältnis aber viel zu gross und eher plump und gefällt mir gar nicht. Ich werde deshalb darauf verzichten und doch die von dir vorgeschlagene Lösung bevorzugen.

Nach deinen wie immer sehr sorgfältigen Anweisungen habe ich jetzt sehr viel gelernt. Vielen Dank und liebe Grüsse,

Fridoya

marboe schrieb am 25.10.2018 um 06:37 Uhr

Dabei habe ich gesehen, dass die eingefügte ftp.URL wie von dir angegeben aufgebaut war, jedoch ohne "s" vor "ftp" - was hat das zu bedeuten?

Das sftp erscheint immer dann, wenn der Server durch ein SSL-Zertifikat geschützt ist.
Läuft deine Seite nicht so, reicht auch oft ein Aufruf nur per "ftp". Da musst du dir also keine Gedanken machen.

Wenn du mit der Lösung so zufrieden bist, dann lass es so. Es hat viele Vorteile - ganz besonders die Ladezeit und die kleine Projektdatei.
Wenn du dennoch mit einem Player liebäugelst, gibt es auch das. Die Probleme hast du ja schon gemerkt. Unterschiede in den Browsern sind nie ganz auszuschliessen.
Man könnte die mp3-Datei einfach auf die Seite im WDprojekt ziehen und fallen lassen; es würde ein Player erzeugt. Möchtest du hier aber noch einen weiteren Song auf der Seite abspielen, sind die Probleme schon vorprogrammiert.
Alternativ kannst du natürlich grundlegend immer irgendeinen HTML5-Player aus dem Netz nehmen. Dann musst du widerum mit Code und Platzhaltern arbeiten und das Laden der Seite dauert wieder länger.

Deswegen mache ich es so wie beschrieben. Im Browserverlauf einen Link zurück zu klicken nachdem das Lied angehört wurde, ist i.d. R. kein Problem und grad für Smartphones sehr einfach umsetzbar.
Ist vielleicht eine Sache, die sich danach richtet mit welchen Geräten deine Seiten überwiegend aufgerufen werden.
Viele Grüße Marboe