Seite 1 von 2
#1 Sound beim Einloggen von Wolfgang 09.01.2015 19:59

avatar

Hallo Florian,
das Script ist nicht neu, aber der Sound-Befehl und der Befehl "document.getElementById" ist aktueller!
Aber es will nicht mit "document.getElementById" funktionieren!

Das Script mit "document.write" und neuem Sound-Befehl funktioniert.
Wo liegt der Fehler?
Kann man es mit ".innerHTML" nicht realisieren?

Kann man die Forum-Adresse so eintragen, dass die Forum-Nummer nicht notwendig ist?
../login.php geht nicht
/login.php geht nicht
login.php geht nicht
http://login.php geht nicht ....
Gibt es vielleicht ein Universalzeichen, das man für die Forum-Nummer einsetzen kann?

Als Link wird die Adresse immer angezeigt, aber im Script leider nicht erkannt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script language="JavaScript">
var loginsound='<audio autoplay="autoplay"><source src="http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3" type="audio/mp3"/><source src="" type="audio/ogg"/><source src="" type="audio/wav"/></audio>';
 
if(document.referrer=='http://104774.homepagemodules.de/login.php'){
 
//document.write(loginsound);
document.getElementById('soundlogin').innerHTML = loginsound;
 
}
else{}
 
</script>
 
<div id='soundlogin'></div>
<noscript></noscript>
 
{{user_registered==true.else}}
{{user_registered==true.end}}
 







Mit besten Dank im Voraus
Wolfgang

#2 RE: Sound beim Einloggen von florian-zier 09.01.2015 20:39

avatar

Hallo Wolfgang,

ist mit das gleiche Problem wie beim Bilderzoom in der zweiten Codebox. Du versuchst den Inhalt eines Tags zu ersetzen, bevor es überhaupt geladen wurde. Also entweder dafür sorgen, dass das Skript wartet, bis alle Tags geladen wurden oder die Reihenfolge für Skript und HTML tauschen.


Anstatt den HTML-Code nachträglich einzusetzen, ginge bestimmt auch folgendes:

Wie wäre es, wenn du das Audio-Tag direkt in die Seite schreibst, aber Autoplay dafür deaktivierst? Im Skript rufst du dann nur noch bei Bedarf dessen play()-Funktion auf, wenn es abgespielt werden soll. Ansonsten rufst du einfach nichts auf. Hierbei ist dann nur die Frage, ob die MP3-Datei dann trotz deaktiviertem Autoplay auch direkt vom Server abgerufen wird, was einen zusätzlichen Request bedeuten könnte. Ansonsten würdest du dir aber das aufwendige innerHTML sparen und auch das unübersichtliche verpacken von HTML-Code in einem JS-String.


#3 RE: Sound beim Einloggen von Wolfgang 10.01.2015 14:06

avatar

Hallo Florian,
document.write ist ziemlich unkompliziert. Funktioniert fast immer. Aber....

Super währe es, Dein Vorschlag umzusetzen.
Es funktioniert auch mit der Kurzversion "autoplay", nicht autoplay="autoplay".
Wie sieht es aus, wenn man die Option einfach einfügt? Kann Du mir da weiterhelfen?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script language="JavaScript">
if(document.referrer=='http://104774.homepagemodules.de/login.php'){
 
add ... data="autoplay"
 
}
</script>
 

<audio data="autoplay">
<source src="http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3" type="audio/mp3"/>
<source src="" type="audio/ogg"/>
<source src="" type="audio/wav"/>
</audio>
 

#4 RE: Sound beim Einloggen von florian-zier 11.01.2015 02:16

avatar

Hallo Wolfgang,

document.write gibt seinen Text einfach immer nur dort aus, wo das Skript gerade steht. Dann entsteht allerdings das Problem, dass die Skript-Position auf der Seite nicht beliebig verändert werden kann. Und ein zu später Aufruf (nach vollständig geladener Seite) löscht den kompletten vorher geladenen Inhalt.

Ich habe jetzt mal eine Testseite in den Anhang mit zwei Funktionen. Bei beiden werden Audio-Tags im Skript generiert und dann auch das Abspielen derselbigen ausgelöst. So kannst du einerseits sehen, wie man neue Elemente erzeugen und auch ohne ein extra DIV in der Seite einhängen kann, das eben mit Verzicht auf document.write. Die Funktions-Referenz für Audio-Tags zeigt, dass per Skript die play()-Funktion ausgelöst werden kann, um das Abspielen auszulösen. So hast du also im Prinzip für diese beiden Aufgaben ein Gesamt-Beispiel dazu.


Hier jetzt mal die beiden Skripte in ihrer kurzen Fassung:

1
2
3
4
5
6
7
8
9
 
/**
* Login-Sound mit einer Quellen bereitstellen.
*/
$(document).ready(function(){
if (document.referrer.search(/\/login.php([#?].*)?$/i) != -1) {
var loginSound = $('<audio>').attr('src', 'http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3');
loginSound.get(0).play();
}
});
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
/**
* Login-Sound mit mehreren Quellen bereitstellen.
*
* Das Array 'sourceUrls' enthält URL und Mimetype der Audio-Datei.
*/
$(document).ready(function(){
if (document.referrer.search(/\/login.php([#?].*)?$/i) != -1) {
var sourceUrls = [
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3', 'audio/mp3'],
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.ogg', 'audio/ogg'],
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.wav', 'audio/wav']
];
 
var loginSound = $('<audio>');
$.each(sourceUrls, function(index, source){
loginSound.append(
$('<source>').attr('src', source[0]).attr('type', source[1])
);
});
loginSound.get(0).play();
}
});
 


Die erzeugten HTML-Strukturen sehen dann in etwa so aus:

1
 
<audio src="http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3"></audio>
 

1
2
3
4
5
 
<audio>
<source type="audio/mp3" src="http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3">
<source type="audio/ogg" src="http://files.homepagemodules.de/b135428/f180t8864p113761n1.ogg">
<source type="audio/wav" src="http://files.homepagemodules.de/b135428/f180t8864p113761n1.wav">
</audio>
 


Ich habe nämlich festgestellt, dass ein Audio-Tag nur erzeugt, aber gar nicht auf der Seite eingebunden werden muss, um es abspielen zu können. Heißt also, mit den obigen Funktionen wirst du die generierten HTML-Strukturen gar nicht mit dem Inspektor (Entwicklertools im Browser) finden können. Wenn du also auch eine Ausgabe in den HTML-Quelltext sehen willst, kannst du das wie erwähnt in den Funktionen der Testseite. Dort habe ich das immer noch aktiviert gelassen.

Denn dort gibt es noch folgende Erweiterungen:

1
2
3
4
 
// Steuerung zu Testzwecken anzeigen (nur wenn dann in Quelltext eingehängt):
loginSound.attr('controls', 'controls');
// Audio-Element in Quelltext einhängen:
$('body').append(loginSound);
 


Die letzte Zeile bindet das im Skript generierte HTML-Tag auf der Seite ein. Damit das Abspielen während den Tests visuell dargestellt wird, lässt sich optional mit der ersten Zeile eine Player-Steuerung anzeigen. Dann sieht man über eine Zeitleiste, wie der Sound gerade abgespielt wird. Diese Zeilen sind also nicht wirklich unbedingt nötig, aber nützlich um sich vorübergehend den generierten HTML-Code ausgeben zu lassen und bei Bedarf auch die Steuerung dazu.





Der Unterschied der beiden Funktionen liegt eigentlich nur darin, dass die erstere direkt das src-Attribut des Audio-Tags verwendet. Die zweitere hingegen ermöglicht auch das einbinden mehrerer Audio-Dateien, um für möglichst viele Browser eine abspielbare Datei bereitstellen zu können. Dazu wird einfach das Array sourceUrls beliebig um weitere Audio-Dateien ergänzt. Damit der Browser dann auch die bestmögliche Quelle wählen kann, ist eine zusätzliche Angabe des entsprechenden Mimetypes erforderlich.

Eine kleine Abänderung der Referrer-Prüfung habe ich mir noch erlaubt, um nicht mehr fest an eine bestimmte Domain gebunden zu sein. Der Sound wird also immer abgespielt, wenn der Referrer auf "/login.php" endet, egal auf welcher Website/Forum das Skript läuft. Wobei sogar Anker ("/login.php#sprungmarke") und Parameter ("/login.php?param1=abc&param2=def") den Ablauf nicht stören sollten, da diese ggf. noch nach "/login.php" stehen könnten und auch dürfen.


#5 RE: Sound beim Einloggen von Wolfgang 11.01.2015 15:42

avatar

Wow,
das ist ja der absolute Hammer!
Ich bin super begeistert.
Das Kunstwerk muss ich mir allerdings erstmal in Ruhe ansehen und ausprobieren.






Bis dann und, mach weiter so!!!!
Wolfgang

#6 RE: Sound beim Einloggen von florian-zier 11.01.2015 19:39

avatar

Kein Problem, lass dir Zeit!

#7 RE: Sound beim Einloggen von Wolfgang 13.02.2015 22:43

avatar

Hallo Florian,
mir ist da noch etwas aufgefallen.
Der IE7 kann die neue Art der Soundwiedergabe nicht verarbeiten!

Kann man folgende Zeilen noch einbinden?

<!--[if IE 7 ]>
<embed width=0% height=0% fullscreen=no src="http://home.arcor.de/wolf.andres/forum/Sound/f180t8864p113761n1.wav">
<![endif]-->




Bis dann
Wolfgang

#8 RE: Sound beim Einloggen von florian-zier 14.02.2015 00:42

avatar

Hallo Wolfgang,

das geht im Prinzip schon. Du musst dir dann wie das audio-Tag dann das embed-Tag mit den entsprechenden Attributen aufbauen. Wie ein Tag mit $('body').append eingehängt wird, müsste bereits im letzten Beispiel zu sehen gewesen sein.

Natürlich wird es dann auch erforderlich, zu prüfen, ob es sich um einen IE7 handelt oder nicht. Dazu kannst du bspw. jQuery.browser mit IF-ELSE verwenden, bzw. dessen Eigenschaften mit $.browser.msie und parseFloat($.browser.version). Damit kannst du dann die Browser auseinanderhalten.

Für IE11 funktioniert das Abfragen der Browser-Version übrigens nicht korrekt, zumindest nicht mit der veralteten jQuery-Version in den Xobor-Foren. Angeblich handelt es sich dann um einen Mozilla-Browser. Falls du das also mal für ein anderes rojekt brauchen solltest.

Würde aber auch den IE7 nicht mehr unbedingt in das Skript aufnehmen, da es sich nicht um eine für den Betrieb elementare Funktion handelt und das Skript nur unnötig aufbläht. So langsam sollten auch die Nutzer mal vom veralteten IE7 abkommen, jetzt sowieso, wenn Microsoft bereits selbst seine alten Windows-Versionen langsam aber sicher aufgibt. Immerin ist seit Win7 bereits mindestens der IE8 an Bord.

#9 RE: Sound beim Einloggen von Triple M 14.02.2015 09:42

avatar

Also ich finde das sehr genial. Habe es bei mir mal eingebunden und es läuft im Business mit Chrome. und wichtig ist nur mir das es bei mir Klingelt. Wie das nun in anderen Browsern ist habe ich nicht getestet. Daumen Hoch Florian.

#10 RE: Sound beim Einloggen von Wolfgang 14.02.2015 09:57

avatar

Hallo Florian,
wie wäre es, wenn man nicht die Browser-Version abfragt, sondern ein nicht funktionieren beider Audio-Tags.
Dann könnte der übrig bleibende "embed-Tag" aktiv werden.
Ist die Typ-Abfrage unbedingt notwendig?


Gruß
Wolfgang

#11 RE: Sound beim Einloggen von florian-zier 14.02.2015 22:23

avatar

Also für Feature-Detection kannte ich bisher hauptsächlich nur die Bibliothek Modernizr, welche es ermöglicht, relativ leicht die Browser-unterstützung einer spezifischen Funktion abzufragen.

Das wäre in diesem Fall wohl etwas zu viel des Guten. Da ich das für Audio-Tags bisher selbst noch nicht gebraucht hatte, musste ich es allerdings auch erstmal nachschlagen.
Die Unterstützung sollte sich gemäß Browser Support mit Javascript prüfen folgendermaßen abfragen lassen:

1
 
!!(document.createElement('audio').canPlayType)
 

#12 RE: Sound beim Einloggen von toggodamian 15.02.2015 18:10

avatar

Ich finde dieses Script hier ganz cool, vielleicht hilft es euch:

1
2
3
4
5
6
7
8
9
10
 
											{{user_newmail==true.start}}
var newPostSound = "{{global_sound_new_pm}}";
try{
var newPostAudio = new Audio(newPostSound);
newPostAudio.play();
} catch(e){/*IE*/
var soundPlayer = $('<embed class="PostSound" id="PostSound" src="'+newPostSound+'" autostart="true" loop="false" hidden="true">');
soundPlayer.appendTo($('body'));
}
{{user_newmail==true.end}}
 


{{global_sound_new_pm}} gegen die URL des Audiostücks austauschen.

#13 RE: Sound beim Einloggen von Wolfgang 17.02.2015 16:27

avatar

Hallo zusammen,
konnte die Version von @toggodamina umsetzen.
Funktioniert!
Kann man gut im "IETester" ausprobieren!
Wie das mit "!!(document.createElement('audio').canPlayType)" aussieht, würde mich auch sehr interessieren.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<script>
// Das Script kommt in den Header / Obere Leiste
/**
* Login-Sound mit mehreren Quellen bereitstellen.
*
* Das Array 'sourceUrls' enthält URL und Mimetype der Audio-Datei.
*/
$(document).ready(function(){
if (document.referrer.search(/\/login.php([#?].*)?$/i) != -1) {
try{
 
var sourceUrls = [
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3', 'audio/mp3'],
['http://home.arcor.de/wolf.andres/forum/Sound/f180t8864p113761n1.wav', 'audio/wav']
];

var loginSound = $('<audio>');
$.each(sourceUrls, function(index, source){
loginSound.append(
$('<source>').attr('src', source[0]).attr('type', source[1])
);
});
loginSound.get(0).play();
 
} catch(e){/*IE*/
var soundPlayer = $('<embed class="PostSound" id="PostSound" src="http://home.arcor.de/wolf.andres/forum/Sound/f180t8864p113761n1.wav" autostart="true" loop="false" hidden="true">');
soundPlayer.appendTo($('body'));
}
 
}
});
</script>
 



Aber!
Foren mit Portal haben noch eine weitere Möglichkeit sich anzumelden!
Leider gibt es hier ein anderes Kriterium:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 

<form method="POST" action="./login.php" id="login_form"
name="login" onsubmit="return submitForm();">
<label class="formfield">
<strong class="caption">Benutzername:</strong>
<input type="text" name="name" value="" id="login_username" style="width:93%;"/>
</label>
<label class="formfield">
<strong class="caption">Passwort:</strong>
<input type="password" name="pww" class="login_password" id="login_password" style="width:93%;margin-bottom:3px;"/>
</label>
<br>
<input type="button" value="Einloggen" class="button" id="login_submit_button" style="display: none;"/>
<div style="text-align:center;">
<input type="submit" value="Einloggen" name="B1" class="button" id="login_submit" style="margin:0px;"/>
</div>
 
<center>
<div style="margin-top:5px;margin-left:-10px;white-space:nowrap;">
<a href="/login.php?pwforget=1" id="pwforget_link"><small>Passwort vergessen?</small></a>
</div>
</center>
</form>
 
 



Wie bekommt man das jetzt gelöst???


Gruß
Wolfgang

#14 RE: Sound beim Einloggen von toggodamian 17.02.2015 19:41

avatar

Funktioniert das vom Portal aus nicht bei dir?
Schließlich wird, sobald du auf den Button "Einloggen" klickst erstmal auf login.php weitergeleitet und süäter kommst du dann aufs Portal oder Forum Übersicht zurück, allerdings frägt dieses Script ja nach der Adresse auf der du davor warst, und das sollte die login.php Seite sein, oder etwa nicht?

#15 RE: Sound beim Einloggen von Wolfgang 18.02.2015 12:28

avatar

Ja, sieht so aus!!!
Hans58 aus aus meinem Forum hatte mich darauf aufmerksam gemacht!

Hast Du eine Idee?


Nachtrag: Vielleicht kann man ja den Button umbauen.


1
 
<a href="/login.php" onclick="" class="button" id="login_submit">Einloggen</a>
 

#16 RE: Sound beim Einloggen von florian-zier 20.02.2015 01:15

avatar

Hallo zusammen,

ich sehe das eigentlich auch so, dass beim Absenden die Daten an die login.php weitergegeben werden und damit der Referrer hätte passen sollen. Wäre natürlich unpraktisch, wenn beim Absenden eines Formulars der Referrer nicht wie gewünscht neu gesetzt wird. Was ist denn der Referrer bei der Login-Variante aus dem Portal?


Die Prüfung auf die Unterstützung des Audio-Tags wäre in dem Fall nur ein zusätzliches IF-ELSE. Die in meinem letzten Beitrag genannte Anweisung ist die Bedingung, von welcher abhängt, ob ein Audio-Tag generiert werden soll oder nicht. Ansonsten wird ein Embed-Tag erzeugt und auf der Seite eingehängt.

Müsste so wie in Zeilen 8(f), 23-29 ergänzt funktionieren:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
/**
* Login-Sound mit mehreren Quellen bereitstellen.
*
* Das Array 'sourceUrls' enthält URL und Mimetype der Audio-Datei.
*/
$(document).ready(function(){
if (document.referrer.search(/\/login.php([#?].*)?$/i) != -1) {
if (!!(document.createElement('audio').canPlayType)) {
// Audio-Tag zusammenbauen:
var sourceUrls = [
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3', 'audio/mp3'],
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.ogg', 'audio/ogg'],
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.wav', 'audio/wav']
];

var loginSound = $('<audio>');
$.each(sourceUrls, function(index, source){
loginSound.append(
$('<source>').attr('src', source[0]).attr('type', source[1])
);
});
loginSound.get(0).play();
}
else {
// Embed-Fallback ausgeben:
var loginSound = $('<embed>').attr('autostart', 'true').attr('loop', 'false').attr('hidden', 'true')
.attr('src', 'http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3');
$('body').append(loginSound);
}
}
});
 

#17 RE: Sound beim Einloggen von Wolfgang 20.02.2015 14:22

avatar

Wow,
ist ein tolles Script geworden!!!

Mal sehen warum der Login im Portal nicht läuft????


Nachtrag:
Keiner Fehler im Script. Es fehlte noch eine geschweifte Klammer.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<script>
/**
* Login-Sound mit mehreren Quellen bereitstellen.
*
* Das Array 'sourceUrls' enthält URL und Mimetype der Audio-Datei.
*/
$(document).ready(function(){
if (document.referrer.search(/\/login.php([#?].*)?$/i) != -1) {
if (!!(document.createElement('audio').canPlayType)) {
// Audio-Tag zusammenbauen:
var sourceUrls = [
['http://files.homepagemodules.de/b135428/f180t8864p113761n1.mp3', 'audio/mp3'],
['http://home.arcor.de/wolf.andres/forum/Sound/f180t8864p113761n1.wav']
];

var loginSound = $('<audio>');
$.each(sourceUrls, function(index, source){
loginSound.append(
$('<source>').attr('src', source[0]).attr('type', source[1])
);
});
loginSound.get(0).play();
} //Klammer hatte gefehlt!
 
else {
// Embed-Fallback ausgeben:
var loginSound = $('<embed>').attr('autostart', 'true').attr('loop', 'false').attr('hidden', 'true')
.attr('src', 'http://home.arcor.de/wolf.andres/forum/Sound/f180t8864p113761n1.wav');
$('body').append(loginSound);
 

}
 
}
});
 

</script>
 









Wolfgang

#18 RE: Sound beim Einloggen von Wolfgang 20.02.2015 18:52

avatar

Ich habe mir nochmal das Portal angesehen.
Es ist tatsächlich gleich, bis auf <form ... action="./login.php".

Es geht trotzdem nicht!
Das Script habe ich im Body, gleich nach <body> eingetragen.

?????
Woran kann es noch liegen?
Verhält sich das Portal anders?

Gruß
Wolfgang

#19 RE: Sound beim Einloggen von florian-zier 20.02.2015 22:13

avatar

Zitat von Wolfgang im Beitrag #17
Keiner Fehler im Script. Es fehlte noch eine geschweifte Klammer.

Wollte nur mal sehen, ob ihr es bemerkt.
Habe es natürlich gleich nachgetragen. Lag wahrscheinlich daran, dass ich erst vieles weggekürzt hatte, dann aber doch noch den ganzen Quellcode wieder zusammengebastelt habe.


Wie lautet denn nun der Referrer, wenn du dich über das Portal einloggst? Ist er gesetzt, und wenn ja, ist er falsch?

Du kannst das Skript übrigens überall einhängen wo du möchtest, es ist nicht von der Position abhängig. Es verwendet schließlich auch $(document).ready() sowie nirgendwo document.write, sondern nur DOM-Manipulation via jQuery. Zwischen den Head-Tags oder als Plugin ist ebenso möglich wie vorne oder hinten in den Body-Tags.

#20 RE: Sound beim Einloggen von Wolfgang 20.02.2015 23:30

avatar



Kannst Du den "Referrer" nicht über den Quellcode sehn???

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz