Hi Forum,
gibt es eine Möglichkeit zum ein- und ausschalten von Hintergrundmusik eigene Grafiken zu verwenden wenn die Musik mit
[code]
[/code]eingefügt wurde?
So in etwa:
LG
Gockel
Es gibt mehrere möglichkeiten… eigl. alle mit Javascript.
Einmal die direkte Variante dank HTML5 in dem man via .pause();.currentTime=0 und .play() das ganze “stoppen” und erneut “starten” kann…
Siehe hier für ein play/pause beispiel: w3schools.com/tags/tryit.asp?fil … play_pause
Oder man packt das audio Element in ein div und entfernt das Element bei nem gewünschten “stop”, und fügt es erneut hinzu bei einem “start”.
Siehe auch die referenz zum audio tag: w3schools.com/tags/ref_av_dom.asp
Hi White-Tiger,
danke für den Hinweis. Das hilft mir schonmal etwas weiter.
Allerdings hab ich noch zwei Probleme dabei.
- Es soll nur das Bild und nicht der Button selber zu sehen sein.
und
- Es soll nur EIN Button zum ein- und ausschalten sein der jeweils das Bild wechselt.
Früher hatte ich so eine Lösung in Javascript. Darauf würde ich aber gerne verzichten und das in PHP machen. Falls das überhaupt geht.
LG
Gockel
Vermutlich hast du nicht so richtig verstanden, daß PHP auf dem Dienstrechner hier ausgeführt wird, audio und javascript, Interaktivität und Ereignisse werden aber vom Darstellungsprogramm auf dem Rechner des Nutzers behandelt oder aber auch nicht, darauf hat man als Autor keinen Einfluß. Kurzum, mit PHP kannst du Daten, auch Musikdateien ausgeben, was damit gemacht wird, ergibt sich aber auf dem Rechner des Nutzers und hat mit dem hiesigen PHP nichts mehr zu tun.
Dies audio entspringt ja einem Arbeitsentwurd zu HTML5 (Standard gibt es da ja noch nicht).
Wenn man das nicht unterbindet, soll das Darstellungsprogramm selbständig Bedienelemente anbieten, JavaScript oder eigene Bemühungen des Autors sind also eigentlich überflüssig.
Über das DOM kann man das aber natürlich alternativ anbieten - dann sollte man aber insbesondere die Attribute autoplay=on controls=off nicht im HTML setzen, sondern ebenfalls per JavaScript, um das sauber zu trennen und den Leuten keine Probleme zu bereiten.
Die Leute die Javascript aus haben, haben selbst schuld 
Jeder der Ahnung hat weiß das Javascript schon lange nicht mehr wirklich gefährlich ist. [size=85](ok, beim IE würde ich nicht darauf wetten)[/size]
Zu viele Leute folgen der Massenhysterie, wissen aber über die Technik nix. Auch schön zu sehen bei Heartbleed als Beispiel.
Klar wäre es besser die controls aktiv zu lassen solange es mit der Seite vereinbar ist… Allerdings stellt sich nicht die Frage ob man autoplay wegen Leuten die JS unterdrücken deaktiviert weil diese es sonst nicht stoppen könnten, JS Anwender schon und darum dort autoplay zu aktivieren, sondern generell ob die Music so störend sein könnte das man in keinem Fall autoplay nutzt.
Wenn autoplay ok ist, dann auch für jene die es mangels JS nicht abstellen können. Sind immerhin selber schuld.
Wenn das nicht ok wäre, dann generell aus.
War auch nur so ne Idee von mir das wieder einzubinden. Aber bei dem Aufwand lass ich das vielleicht oder bau das Teil doch wieder per JS ein.
Gruss
Gockel
Im Sinne des Schichtenmodells trennt man ja immer Inhalt von Dekoration. Wie die Musik abgespielt wird, ist klar Dekoration. Die Bedienelemente sind inhaltlich relevant.
Daher macht man den eigentlichen Inhalt so, daß er unabhängig von der Skriptfrage immer zugänglich ist (ich glaube, die HTML5-Entwürfe schreiben sogar vor, daß Darstellungsprogramme controls ignorieren sollen, wenn keine Skriptinterpretation gegeben ist).
Und es ist ja für denjenigen, der JavaScript benutzt wohl kein Problem, damit irgendwelche Attribute zu setzen, sonst sollte er da wohl besser die Finger von lassen.
Lustiges Mischen der verschiedenen Schichten zeigt dann jedenfalls, daß man nichts über die Erstellung digitaler Dokumente, insbesondere (X)HTML, CSS oder JavaScript verstanden hat ;o)
Ansonsten hat das Element source gar keine Attribute autoplay, controls und loop, die kann man allenfalls in dem Zusammenhang bei audio setzen.
Gockel - ist ja kein Aufwand, das audio funktioniert gegebenenfalls ohne Skript und Anstrengungen des Autors. Je mehr man als Autor an sowas selbst machen will, desto kniffliger wird es, das noch zugänglich und sinnvoll hinzubekommen.
Solltest eventuell alternativ nur noch ein lizenzfreies Format wie OGG bereitstellen, nicht nur MP3 ;o) Das erhöht die Chancen, daß ein Nutzer das bei Bedarf auch abspielen kann.
Es gehört ansonsten zum guten Benehmen im Netz, daß der Nutzer Musikberieselung bei Interesse selbst aktiviert und dies nicht automatisch durch den Autor passiert.
Hi White-Tiger,
kannst du mir das mit dem DIV entfernen mal genau erklären? Wäre echt lieb von dir.
Gruss
Gockel
wieso gerade die div Methode? der direkte Javascript Weg is um einiges besser
Einzige Vorteil von der div Methode wäre das es auch geht wenn die User ältere Browser nutzen… allerdings nutzt du ja eh den audio tag… Browser die den kennen, sollten auch mit Javascript Steuerung kein Problem haben.
Allerdings könnte man die Methode auch leicht um alternative zu audio ergänzen^^ z.B. Flash, WMP etc. (eigl. reicht WMP für ältere IE’s, alles andere kann eh audio^^)
Wobei man sagen muss das Firefox den audio tag schon seit Firefox 3.5 kennt xD IE wie üblich erst seit 9^^
Ansonsten würde nen Beispiel so aussehen: jsfiddle.net/q9fh4y1h/2/
Hi White-Tiger,
du Schlingel du 
. Das ist doch genau das was ich gesucht habe. Hat nur einen Button. Gut, ist jetzt Java statt PHP. Aber das soll mir mal egal sein. Funktioniert fast einwandfrei.
Allerdings hab ich noch ein kleines Problem. Ich habe den Button in einer Tabellenzelle eingefügt. Diese Tabelle wird in die eigentliche Seite includiert. Und ich schaffe es einfach nicht das wenn der Ton abgeschaltet ist das richtige Bild angezeigt wird. Beim Hover erscheint das richtige Bild - bleibt aber leider nicht stehen wenn ich mit der Maus wieder weggehe.
Hier mal der Code der veränderten CSS:
.bgm{top: 30px !important;}/*JSFiddle fix*/
.bgm{position: inherit; top: 0; right: 0;}
.bgm input{width: 48px; height: 48px; border: 0; cursor: pointer; background-image: url(images/speaker.png) ;}
.bgm input:hover{background-position: 0 -48px;}
.bgm input.off{background-position: 0 -48px;}
.bgm input.off:hover{background-position: 0 0;}
Das Bild ist etwas abgeändert und um 50% vergrössert.
Wäre schön wenn du mir da noch helfen könntest. Kannst es dir ja auch mal anschauen.
www.mein-weihnachtszauberland.de
Gruss und schönes WE
Gockel
[quote=„Gockel“]Hi White-Tiger,
du Schlingel du . Das ist doch genau das was ich gesucht habe. Hat nur einen Button. Gut, ist jetzt Java statt PHP. Aber das soll mir mal egal sein. Funktioniert fast einwandfrei.
Allerdings hab ich noch ein kleines Problem. Ich habe den Button in einer Tabellenzelle eingefügt. Diese Tabelle wird in die eigentliche Seite includiert. Und ich schaffe es einfach nicht das wenn der Ton abgeschaltet ist das richtige Bild angezeigt wird. Beim Hover erscheint das richtige Bild - bleibt aber leider nicht stehen wenn ich mit der Maus wieder weggehe.
Hier mal der Code der veränderten CSS:
.bgm{top: 30px !important;}/*JSFiddle fix*/
.bgm{position: inherit; top: 0; right: 0;}
.bgm input{width: 48px; height: 48px; border: 0; cursor: pointer; background-image: url(images/speaker.png) ;}
.bgm input:hover{background-position: 0 -48px;}
.bgm input.off{background-position: 0 -48px;}
.bgm input.off:hover{background-position: 0 0;}
Das Bild ist etwas abgeändert und um 50% vergrössert.
Wäre schön wenn du mir da noch helfen könntest. Kannst es dir ja auch mal anschauen.
mein-weihnachtszauberland.de
Gruss und schönes WE
Gockel[/quote]
du solltest echt anfangen Code zu verstehen anstatt diesen nur zu misshandeln^^
Die 1. Zeile mit /JSFiddle fix/ war nur zum test drin und auch nur für JSFiddle^^ Hatte aber eh nie funktioniert 
Habs wohl verplant das zu entfernen.
.bgm{position: inherit; top: 0; right: 0;}kannst du dir auch sparen^^ Du hast ja vor deinem „edit“ gesehen was es gemacht hatte, wenn du das nicht willst, brauchst du auch nix davon, gehörte alles zusammen
Dein Problem ist allerdings das du den button vom div getrennt hast^^ War nicht so vorgesehen… Du solltest auch eigl. ohne Probleme das div oben in deine tabelle setzen können. Ändern hättest du da eigl. nix müssen außer dem audio tag etc.
Aber wenn ich den div in die Tabelle einfüge und diese dann in einem Unterverzeichnis includiert wird stimmt doch der Pfad zur Sounddatei nicht. Hab ja schon versucht das über eine Klasse zu definieren. Hat aber leider nit gefunzt
.soundquelle{
src: url(sound/music.mp3);
}
<div class="bgm" id="bgm">
<div>
<audio autoplay="autoplay" loop="loop">
<source class="soundquelle" type="audio/mpeg" autoplay=on controls=off loop=true>
</audio>
</div>Deshalb hab ich das Div vom Button getrennt. Aber auch wenn ich den Div Testweise mit richtigem Pfad in die Tabelle einfüge ändert das nichts daran dass das Bild nach dem Stummschalten nicht richtig angezeigt wird.
LG
Gockel
Wenn du mein div so wie es war in die Tabelle packst ist alles ok… allerdings ist das div aktuell bei deiner Seite eh kaputt xD
Und du darfst nach wie vor PHP nicht mit Client seitigen Sachen wie HTML,JS und CSS verwechseln^^
Nen include in PHP ist für HTML gänzlich irrelevant. Weil es in PHP ist und nicht in HTML. Die Ausgabe ist eh nur eine Seite.
PHP generell hat mit der Seite wenig am hut… es werkelt nur ein wenig aufm Server und spuckt i.d.R. HTML Code aus welche dann beim Client sein Werk verrichtet^^
Du kannst auch Music mit PHP ausgeben, Bilder erstellen etc. Es ist egal was raus kommt, PHP gibt nur aus und kann auf verschiedene Anfragen reagieren.
HTML ist aber die Darstellung, mit Javascript für Dynamik und CSS für’n fein schliff.
Würdest du durch PHP nen Bild ausgeben wäre es nicht viel anders als HTML… ist auch nur ne Darstellung.
Worauf ich hinaus will, die Pfade sind da eh alles eine HTML Seite ist, auch alle gleich.
Was du in PHP für Pfade nutzt und hast ist für den Browser relativ egal.
Oder Music…
Das PHP Serverseitig und Java Clientseitig läuft weis ich auch.
LG
Gockel
[quote=„Gockel“]Das PHP Serverseitig und Java Clientseitig läuft weis ich auch.
LG
Gockel[/quote]
Du meinst sicher JavaScript? (oder hab ich was überlesen?)
Und nur zur info: node.js ist in letzter Zeit recht beliebt. Das ist Serverseitiges JavaScript
Sorry, meinte auch Javascript 
Ich hab jetzt alles so wie du es gesagt hast in die Tabelle die includiert wird eingebaut. Läuft dann auch alles super. Aber leder nur von der Startseite aus. Wenn ich die Tabelle in einer Unterseite includiere läuft die Musik nicht weil der Pfad dann nicht mehr sondern
Ich hoffe ich konnte mich jetzt verständlich ausdrücken und du verstehst was ich meine.
LG
Gockel
Edit: Boah, manchmal ist man echt so blöd und sieht den Wald vor lauter Bäumen nicht. Wenn ich nen absoluten Pfad nehme gehts!!!
Ein einfacher fix: Du könntest den kompletten (absoluten) Pfad angeben.
Lol, war mir auch grad aufgefallen 
Hab meinen Beitrag grad editiert.
Ich danke dir ganz herzlich. Werde dich lobend in mein Nachtgebet mit einschliessen 
Jetzt funktioniert alles so wie ich es schon am Anfang wollte. Thema erledigt.
LG
Gockel
PS: ein absoluter Pfad is i.d.R. ohne Protokoll und Domain^^
Also “/home/sound/music.mp3”, das macht die Seite kleiner und flexibler^^
Du solltest auch auf deine Groß-/kleinSchreibung achten…
Die Links werden später noch korrigiert. Sonst funzt das bei mir auf locahlhost nit. Weiß auch nit warum.
Öhm, wo meinst du jetzt mit Groß-/Kleinschreibung?
