Bessere Lösung

[Dieter Rayen]

Ich habe auf einer Seite einen Link der auf eine Sounddatei verweist. So weit funktioniert dies auch prima...aber wenn der Browser die mp3 Datei erkennt öffnet er eine neue Seite mit den Reglern zum Abspielen der Datei. Meine ursprüngliche Seite ist ausgeblendet und es wird die Aktion zum starten der mp3-Datei angezeigt. Der Nutzer muss also jetzt noch einmal den Sound starten. Kann man dies nicht eleganter lösen?

Am Besten: Meine Ausgangsseite bleibt bestehen... und wenn schon die Regler sein müssen, dann in einem kleinen Popup.

Hilfe ist ist sehr willkommen. Danke.

[Raketenverlinker]

https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/audio

[Rolf B]

Hallo Dieter,

hast Du Dich schonmal mit dem <audio> Element befasst?

<audio> im SelfHTML Wiki
<audio> bei Mozilla Developer Network

Edit: Verdammt, die Rakete war schneller 😉

Rolf

[Gunnar Bittersmann]

@@Rolf B

Edit: Verdammt, die Rakete war schneller 😉

Ach was! Da hatte ich das schon längst eingebaut! 😉🎵

LLAP 🖖

[Der Martin]

Hallo,

gute und vermutlich zielführende Hinweise hast du ja schon bekommen, daher möchte ich nur etwas Prinzipielles ergänzen.

Ich habe auf einer Seite einen Link der auf eine Sounddatei verweist. So weit funktioniert dies auch prima...

das kommt darauf an, was du unter prima verstehst. Bei mir würde dann eine Abfrage des Browsers kommen, wo ich denn die Audiodatei speichern möchte.

Denn wenn du nur einfach einen Link auf eine andere Ressource setzt, überlässt du es komplett dem Browser deiner Besucher und dessen Konfiguration, was damit passiert. Du kannst nicht davon ausgehen, dass ein beliebiger Browser z.B. Audio, Video oder PDF direkt anzeigt (auch wenn er es in den meisten Fällen könnte).

Wenn du also ein ganz bestimmtes Verhalten willst, musst du auch eine spezielle Lösung suchen. Und dich vorher kritisch fragen: Wollen deine Besucher dieses Verhalten auch? Ungefragt startende Sound- und Videoressourcen sind z.B. für viele Nutzer ein Ärgernis. Deswegen kann man das auch über die Browserkonfiguration abstellen (auch wenn diese Möglichkeit bei manchen Browsern sehr gut versteckt ist).

Lass also im Zweifelsfall lieber dem Nutzer die Entscheidungsfreiheit.

Live long and pros healthy,
 Martin

[Dieter Rayen]

Danke, für die Anregungen... klaro habe ich gesucht und nicht gefunden audio / sound / mp3 / ogg / Popup / Seitenformat... Ich habe ein Piktogramm, welches deutlich macht, hier wird per klick etwas abgespielt. Wer dies nicht will, wird hier nicht klicken.

Wenn also geklickt wird, möchte ich gerne die vorhandene Seite soll so bleiben und nicht geändert werden. Der Ton (es handelt sich um eine Sprachnachricht) soll abgespielt werden und alles endet nach einem Durchgang. Wer es nicht verstanden hat, oder es nochmal hören möchte kann ja noch einmal klicken.

Ich bekomme diese Lösung nicht hin. Oder geht diese Idee überhaupt nicht.

Vielen Dank für weitere Hinweise.

[Der Martin]

Hallo Dieter,

Ich habe ein Piktogramm, welches deutlich macht, hier wird per klick etwas abgespielt. Wer dies nicht will, wird hier nicht klicken.

ach so, also erst durch eine Benutzer-Aktion (hier: ein Klick) soll die Sounddatei abgespielt werden. Das ist okay, das ist aus Usability-Sicht zumindest nicht kritikwürdig.

Ich bekomme diese Lösung nicht hin. Oder geht diese Idee überhaupt nicht.

Hast du denn das audio-Element mal ausprobiert? - Dann hast du die Player-Controls als deutlich sichtbares Bedienelement auf der Seite. Das sieht für die meisten Nutzer vertraut aus und ist einigermaßen intuitiv bedienbar.

Wenn man die Standard-Controls nicht will, die der Browser hier zur Verfügung stellt, und stattdessen ein anderes klickbares Element, dann muss man ein wenig tricksen: Das audio-Element unsichtbar machen und per Javascript steuern.
Aber ganz ehrlich: Würde ich Audio-Inhalte anbieten, dann wären für mich die Player-Controls des Browsers völlig in Ordnung.

Live long and pros healthy,
 Martin

[Felix Riesterer]

Lieber Dieter,

ich halte es für den Königsweg, wenn Du sowohl einen Download-Link, als auch ein <audio>-Element bereithältst, damit der Benutzer frei entscheiden kann, wie er vorgehen möchte.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

ich halte es für den Königsweg, wenn Du sowohl einen Download-Link, als auch ein <audio>-Element bereithältst, damit der Benutzer frei entscheiden kann, wie er vorgehen möchte.

Das kann der Nutzer beim audio-Element, ohne dass es dazu eines Download-Links bedarf. Rechte Maustaste öffnet wie gewohnt ein Kontextmenü, womit man die Audiodatei speichern kann.

Der Link wäre für alte Browser, die das audio-Element nicht unterstützen. Und zwar als Fallback – innerhalb des audio-Elements, wie in meinem Beispiel bereits gezeigt:

<audio property="contentUrl" src="/audio/mit-jedem-wunsch.mp3" preload="metadata" controls="">
	<a href="/audio/mit-jedem-wunsch.mp3">mp3</a>
</audio>

Moderne Browser zeigen den Inhalt des audio-Elements nicht an – wozu auch? Alte Browser ignorieren das ihnen unbekannte audio-Element und zeigen den Link an.

LLAP 🖖

[Dieter Rayen]

Vielen Dank für alle Hinweise. Diese Möglichkeiten habe ich vielfach probiert. Was mich nicht glücklich macht, der Nutzer muss 2x klicken. Er entscheidet beim Klick 1 = Ich will das hören. Dann fragt der Browser auf einer neuen Seite = Soll ich es abspielen // Klick 2 II JA II

Jetzt ist aber die ursprüngliche Seite nicht mehr aktiv. Ich habe auch Möglichkeiten versucht... rechter Klick, öffnen im neuen Tab. OK, geht, dann kann der User im 2. Tab das Control "Start" anklicken (2. Mal) und dann steht meine Seite und die mp3 läuft.

Damit jederman dies begreift, muss ich ja einen Hinweis geben, wie alles zusammen kommt.

Vielleicht muss ich genauer beschreiben: auf einer Seite sind Bewertungen. Kennen Sie sicherlich alle in Textform. Ich möchte aber persönliche Aussagen von Kunden im O-Ton zum hören anbieten. Also Klick auf der Seite. Seite ist weiterhin sichtbar und der O-Ton läuft einmal. Ende aus. Prima.

...was hat der Kunde gesagt? ...will ich noch einmal hören. Prozedur Klick und alles läuft wieder. Kein Tab, kein Popup, keine neue Seite, keine Controls. Kann man dies realisieren?

Vielen Dank für Eure Ideen. Dieter.

[Gunnar Bittersmann]

@@Dieter Rayen

Was mich nicht glücklich macht, der Nutzer muss 2x klicken. Er entscheidet beim Klick 1 = Ich will das hören. Dann fragt der Browser auf einer neuen Seite = Soll ich es abspielen // Klick 2 II JA II

?? Was für eine neue Seite?

Nutzer entscheidet: ich will das hören, Klick 1 auf ▶︎. Dann spielt der Browser das Audio auf der bestehenden Seite ab // kein Klick 2.

Damit jederman dies begreift, muss ich ja einen Hinweis geben, wie alles zusammen kommt.

Bist du es, der begreifen muss, dass wir dir Hinweise gegeben haben?

LLAP 🖖

[Dieter Rayen]

Hallo, ich glaube, es ist einfacher einmal den html Code hier einzufügen. So habe ich die Seite aufgebaut:

<!DOCTYPE html>
<html lang="de">
  <head>
	<meta charset="utf-8" />
	<meta name="author" content="Goldletter-Design" />
    <meta name="description" content="Matthias Klein Tischlermeister informiert über Fensterservice. Reparaturen, Wartungen und Instandsetzungen." />
	<meta name="keywords" content="Fenster, Türen, Rolladen, Reparaturen, Service, Wartung, Instandsetzung, Meisterbetrieb, Nachrüsten, Scheiben, Fensterscheiben, Austausch, Montage, Überprüfungen, Wärmedämmung," />   
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
	 <link rel="stylesheet" href="design.css" /> 

 
  </head>
  <body>
  <figure id="imagemap">
<svg viewBox="0 0 1920 1080" >
  <defs>
    <style>
      rect:hover {
	    fill: white;
	    opacity:0.5;
	  }
    </style>
  </defs> 
  <image width="1920" height="1080" xlink:href="start.jpg">
    <title>Auswahl</title>
  </image>	
  

 
 
	<a  xlink:href="Anfang.mp3" >
    <rect x="205" y="848" opacity="0" width="120" height="130" /> </a>

	<a xlink:href="ansage.mp3">
    <rect x="1525" y="648" opacity="0" width="120" height="130" /> </a>
	
	
	
	
	 <a xlink:href="Home.html">
    <rect x="404" y="292" opacity="0" width="90" height="35" /> </a>
	
	 <a xlink:href="Leistungen.html">
    <rect x="520" y="292" opacity="0" width="136" height="35" /> </a>
	
	 <a xlink:href="Foto.html">
    <rect x="695" y="292" opacity="0" width="175" height="35" /> </a>
	
	 <a xlink:href="Impressum.html">
    <rect x="887" y="292" opacity="0" width="140" height="35" /> </a>
	
	<a xlink:href="Kontakt.html">
    <rect x="1056" y="292" opacity="0" width="99" height="35" /> </a>
	
	 <a xlink:href="Datenschutz.html">
    <rect x="1190" y="292" opacity="0" width="156" height="35" /> </a>
	
	<a xlink:href="Ueber.html">
    <rect x="1370" y="292" opacity="0" width="125" height="35" /> </a>
	
</svg>
  
</figure> 
		</body>
</html>

Ich hoffe, jetzt kann man sehen, was ich gemacht habe. Danke. Dieter

[Tabellenkalk]

Hallo,

Ich hoffe, jetzt kann man sehen, was ich gemacht habe. Danke. Dieter

Zumindest kann man jetzt sehen, dass du die vielen Hinweise auf das Audio-Element ignoriert hast…

Gruß
Kalk

[Der Martin]

Moin,

<!DOCTYPE html>
<html lang="de">
  <head>
	<meta charset="utf-8" />
	<meta name="author" content="Goldletter-Design" />
    <meta name="description" content="Matthias Klein Tischlermeister informiert über Fensterservice. Reparaturen, Wartungen und Instandsetzungen." />
	<meta name="keywords" content="Fenster, Türen, Rolladen, Reparaturen, Service, Wartung, Instandsetzung, Meisterbetrieb, Nachrüsten, Scheiben, Fensterscheiben, Austausch, Montage, Überprüfungen, Wärmedämmung," />   
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
	 <link rel="stylesheet" href="design.css" /> 

 
  </head>
  <body>
  <figure id="imagemap">
<svg viewBox="0 0 1920 1080" >
  <defs>
    <style>
      rect:hover {
	    fill: white;
	    opacity:0.5;
	  }
    </style>
  </defs> 
  <image width="1920" height="1080" xlink:href="start.jpg">
    <title>Auswahl</title>
  </image>	
  

 
 
	<a  xlink:href="Anfang.mp3" >
    <rect x="205" y="848" opacity="0" width="120" height="130" /> </a>

	<a xlink:href="ansage.mp3">
    <rect x="1525" y="648" opacity="0" width="120" height="130" /> </a>
	
	
	
	
	 <a xlink:href="Home.html">
    <rect x="404" y="292" opacity="0" width="90" height="35" /> </a>
	
	 <a xlink:href="Leistungen.html">
    <rect x="520" y="292" opacity="0" width="136" height="35" /> </a>
	
	 <a xlink:href="Foto.html">
    <rect x="695" y="292" opacity="0" width="175" height="35" /> </a>
	
	 <a xlink:href="Impressum.html">
    <rect x="887" y="292" opacity="0" width="140" height="35" /> </a>
	
	<a xlink:href="Kontakt.html">
    <rect x="1056" y="292" opacity="0" width="99" height="35" /> </a>
	
	 <a xlink:href="Datenschutz.html">
    <rect x="1190" y="292" opacity="0" width="156" height="35" /> </a>
	
	<a xlink:href="Ueber.html">
    <rect x="1370" y="292" opacity="0" width="125" height="35" /> </a>
	
</svg>
  
</figure> 
		</body>
</html>

Ich hoffe, jetzt kann man sehen, was ich gemacht habe.

du meine Güte, ja. Was ist denn das? Schlechte Angewohnheiten der frühen 2000er-Jahre mit modernen Mitteln wiederbelebt?

Warum SVG? Was hast du gegen normales HTML? Ich sehe in deinem Beispielcode nichts, was man nicht ebenso einfach mit HTML umsetzen könnte - nur eben mit deutlich mehr Semantik. SVG nur um ein paar rechteckige Boxen, Links und Rastergrafiken zusammenzubauen, ist Overkill. Im übrigen bin ich nicht sicher, ob das audio-Element innerhalb von SVG ebenfalls anwendbar wäre.

Und dann das ganze Layout festbetoniert - das meinte ich mit der 20 Jahre alten Unart. Ja, mittlerweile können die Browser auch zoomen anstatt scrollen, aber sinnvoll ist eine solche starre Struktur trotzdem nicht.

Ich sehe in deinem Code - wenn man ihn mal "normal" in HTML formuliert, einfach ein Seiten-Grundgerüst mit einer horizontalen Navigationsleiste. Links (am Anfang) und rechts (am Ende) je ein Audio-Element, dazwischen sieben Links zu anderen Seiten.
Also ein nav-Element mit einer Liste (ol, weil du die Reihenfolge für wichtig erachtest), die insgesamt neun li-Kinder enthält. Das Ganze mit CSS ein bisschen "schön" gemacht, that's it.

Übrigens fehlt auch das title-Element im head. Das aber nur am Rande, hat mit dem eigentlichen Thema nichts zu tun.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

du meine Güte, ja. Was ist denn das?

Eine responsive image map.

Schlechte Angewohnheiten der frühen 2000er-Jahre mit modernen Mitteln wiederbelebt?

Warum SVG?

Weil HTML an der Stelle doof ist.

Auch wenn das früher mal anders gedacht war, sind in HTML die Koordinaten bei areas feste Pixelwerte. Prozentangaben gehen nicht. (Vielleich wurden die wegen nicht vorhandener Browserunterstützung aus dem Standard genommen?) Also keine responsive image maps mit HTML. Deshalb SVG mit relativen Angaben, so dass die clickbaren Flächen mit dem Bild mitskalieren.

☞ proof of concept

Es gibt auch einen schlechten Artikel im Wiki dazu. Die Links haben keinerlei accessible labels. Diese müssen noch ergänzt werden.

Bei Dieter fehlen sie auch.

Im übrigen bin ich nicht sicher, ob das audio-Element innerhalb von SVG ebenfalls anwendbar wäre.

Mein erster Gedanke war: nein. Mein zweiter: hm, vielleicht doch?

Ansonsten: im SVG Schaltflächen vorsehen, die per JavaScript das Audio steuern.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die Links haben keinerlei accessible labels. Diese müssen noch ergänzt werden.

Wie müssen die denn aussehen?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Hallo Gunnar Bittersmann,

Die Links haben keinerlei accessible labels. Diese müssen noch ergänzt werden.

Wie müssen die denn aussehen?

Auf die Schnelle hab ich Léonie Watsons Tips for Creating Accessible SVG gefunden. Unter #6:

<a xlink:href="…">
  ⋮
  <text>accessible label</text>
</a>

Den Text visuell verstecken.

Accessibility Features of SVG, §5.3 verweist aufs xlink:title-Attribut.

Mit aria-label bzw. aria-labelledby sollte auch was zu machen sein.

LLAP 🖖