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.

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:

/**
 * 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();
	}
});
 

/**
 * 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();
	}
});
 

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

<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>
 

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

Kein Problem, lass dir Zeit!

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.

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:

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

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:

/**
 * 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);
		}
	}
});
 

Zitat von Wolfgang im Beitrag #17

---

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

---