Aktion nach Start eines Audio-Elements

[stroika3]

Moin, bin ziemlicher Anfänger, habe vor Jahren (ca. 20) mal mit einem html do-it-yourself Heft (gedruckt!) ein paar Seiten zum Spaß erstellt, alles lange gelöscht und vergessen.

Jetzt möchte ich für einen Geocache eine Seite erstellen, auf die ich mit einem QR-Code verlinke.

Dort gibt es ein Audio-Element und und weitere Informationen. Da Autoplay auf vielen Endgeräten nicht problemlos funktioniert (Bsp. Iphone) möchte ich, dass die Informationen erst angezeigt werden, sobald Play gedrückt wurde. Ich müsste also eine Aktion starten (zB Seite laden) nachdem das Audio-Element gestartet wurde und dieses soll dadurch nicht wieder stoppen. Kann mir jemand weiter helfen?

Gruß stroika3

[Matthias Scharwies]

Servus!

Moin, bin ziemlicher Anfänger, habe vor Jahren (ca. 20) mal mit einem html do-it-yourself Heft (gedruckt!) ein paar Seiten zum Spaß erstellt, alles lange gelöscht und vergessen.

Jetzt möchte ich für einen Geocache eine Seite erstellen, auf die ich mit einem QR-Code verlinke.

Kein Problem: Hier ist ein HTML5-Grundgerüst

Dort gibt es ein Audio-Element und und weitere Informationen.

Das geht ganz einfach: HTML/Multimedia_und_Grafiken/audio

Da Autoplay auf vielen Endgeräten nicht problemlos funktioniert (Bsp. Iphone) möchte ich, dass die Informationen erst angezeigt werden, sobald Play gedrückt wurde.

works as intended! kein Browser sollte was automatisch abspielen!

Ich müsste also eine Aktion starten (zB Seite laden) nachdem das Audio-Element gestartet wurde und dieses soll dadurch nicht wieder stoppen. Kann mir jemand weiter helfen?

Jetzt kommt JavaScipt ins Spiel.

Die verborgenen Informationen erhalten ein hidden-Attribut.

Du musst auf das play-Event (JavaScript/DOM/Event/play) lauschen und wenn dieses feuert, das hidden-Attribut mit removeAttribute entfernen.

Herzliche Grüße

Matthias Scharwies

[stroika3]

Hallo, vielen Dank für die zügige Antwort. Bin ein paar Schritte weiter, aber noch nicht am Ziel, von daher noch ein paar Fragen: Audio-Player über HTML5 einbinden und gewünschten Song abspielen hab ich hingekriegt.

Javascript, dass bei Klick auf den einen Link die Musik abspielt ebenfalls. Wie ich per javascript auf das play event aus dem html5 player lausche habe ich mir allerdings nicht ergoogeln können.

Idealvorstellung:

Bild das ich bei onclick verlinke (kriege ich hin) und das dann eine neue Seite mit html5-Player öffnet. Nachdem ich dort auf Play gedrückt habe soll sich die Information zeigen (idealerweise zeitverzögert 10s).

Wo kann ich dazu noch mehr lesen zum lernen?

Gruß stroika3

[Gunnar Bittersmann]

@@stroika3

Wie ich per javascript auf das play event aus dem html5 player lausche habe ich mir allerdings nicht ergoogeln können.

Siehe Codepen.

Nachdem ich dort auf Play gedrückt habe soll sich die Information zeigen (idealerweise zeitverzögert 10s).

Ich bin mir nicht sicher, dass das ideal ist. Als Nutzer mache ich eine Interaktion, das Audio spielt ab. Irgendwann später ploppt aus heiterem Himmel irgendwas auf?

Vielleicht willst du auch Audio und Information getrennt voneinander steuern?

<audio …>…</audio>
<details>
  <summary>Informationen zum Stück</summary>
  <p>…</p>
</detais>

Sieht dann so aus: Codepen 2

😷 LLAP

[Gunnar Bittersmann]

@@Matthias Scharwies

Jetzt kommt JavaScipt ins Spiel.

Die verborgenen Informationen erhalten ein hidden-Attribut.

Du musst auf das play-Event (JavaScript/DOM/Event/play) lauschen und wenn dieses feuert, das hidden-Attribut mit removeAttribute entfernen.

In der Zeit, wo ich meinen Codepen erstellt habe, hast du die Erklärung dazu geschrieben. Da kann ich ja auf ausschweifende Prosa verzichten. 😀

Statt removeAttribute tut’s aber auch einfach <HTMLElement>.hidden = false.

😷 LLAP

[stroika3]

Moin und Danke, das erste ist ziemlich genau das was ich suche. Jetzt muss ich nur noch das was Du da gemacht hast verstehen und für mich "umbauen".

Falls ich gar nicht klar komme werde ich mich hier wieder melden. Vielen Dank! Gruß

[stroika3]

Hat so weit super geklappt, funktioniert jetzt so wie ich mir das denke.

Jetzt ergeben sich für mich leider 2 neue Fragen:

1. Ich habe einfach Deinen Quelltext kopiert und angepasst wo nötig. Wieso funktioniert es nicht mehr, wenn ich <div id="ode-to-joy-info" etc. anpasse und überall das ode-to-joy durch 1234 ersetze? Bezieht sich das auf ein irgendwo anders verlinktes Script oder mache ich einfach nur irgendwas falsch?

2. Ich habe versucht das event nach play über SetTimeout zu verzögern, leider habe ich das nicht so hinbekommen, das es funzt. An welcher Stelle muss ich das einbauen?

Gruß

[Tabellenkalk]

Hallo,

das ode-to-joy durch 1234 ersetze? Bezieht sich das auf ein irgendwo anders verlinktes Script oder mache ich einfach nur irgendwas falsch?

Id

Gruß
Kalk

[stroika3]

ok, heißt für mich das ist "intern".

Verstehen tue ich es trotzdem leider nicht warum es nicht mehr funktioniert nachdem ich die beiden id's umbenannt habe und auch alles im Dokument das sich darauf bezieht entsprechend umbenannt habe.

So lange ich es so belasse ist es für meine Zwecke zwar vollkommen ok, aber würde gerne versuchen es zu verstehen.

Gruß

[Tabellenkalk]

Hallo,

ok, heißt für mich das ist "intern".

K.A. was du damit meinst. Ich hatte dir die Seite verlinkt, auf der du finden konntest, dass Ids mit Buchstaben beginnen. Wenn du also statt "ode..." irgendwas mit "1..." nimmst, wäre es falsch.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Ich hatte dir die Seite verlinkt, auf der du finden konntest, dass Ids mit Buchstaben beginnen. Wenn du also statt "ode..." irgendwas mit "1..." nimmst, wäre es falsch.

Du hast die Seite, die du da verlinkt hast, auch selbst gelesen?

Da steht eindeutig, dass IDs in HTML nicht mit einem Buchstaben beginnen müssen.

Dass das früher mal so war, ist mitlerweile irrelevant und sollte im SELFHTML-Wiki auch nicht mehr auftauchen. Oder begreift sich das Wiki als Museum?

😷 LLAP

[Tabellenkalk]

Hallo,

Du hast die Seite, die du da verlinkt hast, auch selbst gelesen?

Ja, natürlich! Aber ich hab rechtzeitig äh, zu früh aufgehört…

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

unser Wiki ist an der Stelle nicht ganz klar. Es beschreibt die Regeln für HTML4 id und CSS Identifier. Eine ID in HTML5 darf mehr sein. Die HTML Spec sagt (mittlerweile):

The id attribute specifies its element's unique identifier (ID). There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Beispielsweise findet document.getElementById("1234-info") ein Element mit id="1234-info" durchaus. CSS weiß von dieser Erweiterung noch nichts, hinter dem # muss ein gültiger CSS Identifier stehen und der entspricht im Wesentlichen den HTML4 Regeln.

Rolf

[Gunnar Bittersmann]

@@Rolf B

CSS weiß von dieser Erweiterung noch nichts, hinter dem # muss ein gültiger CSS Identifier stehen und der entspricht im Wesentlichen den HTML4 Regeln.

Nein, das stimmt so nicht.

Natürlich kann man auch in CSS ID-Selektoren verwenden, wo die ID mit einer Ziffer beginnt. Man muss dann eben den Kontextwechsel beachten, d.h. die Ziffer escapen.

Siehe dieses Posting und das darauf folgende.

😷 LLAP

[Tabellenkalk]

Hallo,

Natürlich kann man auch in CSS ID-Selektoren verwenden, wo die ID mit einer Ziffer beginnt. Man muss dann eben den Kontextwechsel beachten, d.h. die Ziffer escapen.

Na super, also in HTML sind Ziffern erlaubt, will man diese aber mit CSS ansprechen, muss man sich entsprechend verrenken. Also sind Ziffern dann wohl doch falsch.

Aber für vorliegendes Problem scheint CSS doch irrelevant, oder? Die Ids werden doch nur im JS angesprochen. Wie siehts da mit den Ziffern aus?

Gruß
Kalk

[Tabellenkalk]

Hallo,

Wie siehts da mit den Ziffern aus?

Auf jedenfall sind sie schuld am Nichtfunktionieren. Auch wenn Gunnar mir für diese Aussage schon ein -1 verpasst hat: Das erste Zeichen in der id darf keine Ziffer sein.

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

Das erste Zeichen in der id darf keine Ziffer sein.

Können wir uns auf diese Formel einigen: „Das erste Zeichen in der id sollte keine Ziffer sein, um Mühsal und Elend im CSS zu vermeiden.“?

Rolf

[Tabellenkalk]

Hallo,

Können wir uns auf diese Formel einigen: „Das erste Zeichen in der id sollte keine Ziffer sein, um Mühsal und Elend im CSS zu vermeiden.“?

Ist das jetzt poetisch oder diplomatisch?

Gruß
Kalk

Edith glaubt „diploetisch“

[Rolf B]

Hallo Tabellenkalk,

Jein. querySelector("#blabla") ist CSS.

Ich wusste, dass ich die Escaperei schonmal gesehen hatte, fand es aber nicht wieder und habe den Abschnitt in der CSS Spec offenbar auch nicht verstanden.

In JavaScript kommt dann noch hinzu, dass man doppelt escapen muss, damit der Backslash im CSS API ankommt: querySelector("#\\31 234-info") funktioniert. Brrr 😨 😱 🤮

Rolf

[Tabellenkalk]

Hallo,

Brrr 😨 😱 🤮

also Murx. Ich hab im Wiki ein Beachten Sie ergänzt.

Gruß
Kalk

[Tabellenkalk]

Hallo,

In JavaScript kommt dann noch hinzu, dass man doppelt escapen muss, damit der Backslash im CSS API ankommt: querySelector("#\\31 234-info") funktioniert. Brrr 😨 😱 🤮

Und damit es hier im Forum ankommt, dreimal…

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

LOL.

Ich habe das Wiki noch etwas mehr angereichert. Den Artikel über CSS Maskierung muss ich mir noch angucken; ich habe nur gesehen dass es im WIKI schon drin war und schnell mal verlinkt.

Rolf

[stroika3]

Oh man, da habe ich ja was losgetreten 🙈 Naja, habe es jetzt mit nem Buchstaben probiert und es klappt. Vielen Dank an alle, wieder was gelernt... Jetzt muss ich nur noch das mit dem Timeout hinbekommen. Falls da noch einer nen Tipp hat...

Gruß stroika3

[Gunnar Bittersmann]

@@Tabellenkalk

Aber für vorliegendes Problem scheint CSS doch irrelevant, oder? Die Ids werden doch nur im JS angesprochen. Wie siehts da mit den Ziffern aus?

JavaScript hat damit überhaupt kein Problem – document.getElementById('1823-audio') etc. funktioniert bestens. IDs beginning with digits; getElementById

Aber ja, ich hatte nicht genau formuliert. Das Problem tritt bei den Selektoren auf – welche in CSS verwendet werden; aber auch in JavaScript bei document.querySelector. Auch dort muss der Kontextwechsel beachtet und die erste Ziffer escapet werden: 1 → \31 .

Und wie bereits angesprochen, findet ein weiterer Kontextwechsel statt, wenn das in JavaScript gebracht wird. Dann muss auch das \ escapet werden: \31 → \\31 . Und dann funktioniert das auch: IDs beginning with digits; querySelector

😷 LLAP

[Matthias Apsel]

Hallo Gunnar Bittersmann,

ich würde dennoch den einfacheren Weg wählen. Und der heißt, auf IDs, die mit Ziffern beginnen, zu verzichten.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

ich würde dennoch den einfacheren Weg wählen. Und der heißt, auf IDs, die mit Ziffern beginnen, zu verzichten.

Ich auch. Die Escaperei macht den Code schlecht lesbar und damit fehleranfällig; das sollte man sich nicht antun …

… wenn man nicht muss. Wenn man die IDs von anderen Teilen des Systems so vorgegeben bekommt und man damit leben muss, dann hieße das in dem Fall nicht querySelector zu verwenden, sondern getElementById.

😷 LLAP

[Tabellenkalk]

Hallo,

funktioniert bestens.

Nein. Eine Maskierung, die aus zwei Zeichen (\3) besteht, statt aus nur einem, und das zweite wirkt völlig willkürlich, kann man nicht als funktionell bezeichnen.

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

du bist zu streng. Das dritte \ ist nur für das Forum. Im JS sind es 2, und in einer CSS Datei ist es nur eins.

Plus das eventuelle Space hintendran.

Aber bestimmt hat irgendwer ein JS Erweiterung geschrieben mit einer String.prototype Ergänzung namens escapeCssId(), der Du "123" hineingibst und die Dir das "\\31 23" liefert.

Hey, LOL, das ist tatsächlich schon passiert. Und steht sogar im Self WIKI und es gi(b)t einen Polyfill dazu.

Rolf

[Gunnar Bittersmann]

@@Tabellenkalk

Nein. Eine Maskierung, die aus zwei Zeichen (\3) besteht, statt aus nur einem, und das zweite wirkt völlig willkürlich, kann man nicht als funktionell bezeichnen.

Nee, so nich’.

Die Maskierung ist nicht \3 davorschreiben, sondern \<codepoint> . ä (U+00E4) escapet wäre nicht \3ä , sondern \E4 .

Der Codepoint von 1 ist U+0031. Das kann man escapet als \31 schreiben oder als \031 , \0031 , …

😷 LLAP

[Rolf B]

Hallo Gunnar,

Die Maskierung ist nicht \3 davorschreiben, sondern <codepoint>

Hach, nee, da editier ich mir die Finger wund und dann liest es keiner.

Rolf

[Tabellenkalk]

Hallo,

Nee, so nich’.

Achso! Dann versteh ich auch das Leerzeichen.

Also ists eher keine Maskierung, sondern wohl ne Umkodierung.

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

Umcodierung genau so wie &#x31; in HTML, nur kürzer 😉

Rolf