Golb Slexa ::

Ich bin dabei, eine e-Card vorzubereiten und habe einen loopenden Song erstellt. Wenn ich diesen mit dem Audio Tag mitsamt loop Attribut einbinde:

<audio title="Hintergrundmusik" preload="auto" controls="controls" loop="loop" 
	autoplay="autoplay"
	id="audioBgSound"
	>
	<source type="audio/ogg" src="/axel/download/easter2014-bg_2.0_.ogg" >
	<source type="audio/mp3" src="/axel/download/easter2014-bg_2.0_.mp3" >
</audio>

… so gibt es am Ende des Songs immer eine kurze Pause von ein..zwei Zehntel, bevor der Song von vorn beginnt. Das ist unschön, ich wollte eigentlich einen soften Übergang ohne diese Zwangspause.

Einen Evenlistener auf “ended” zu setzen, der die Position auf 0 (Anfang) setzt, hat genau denselben Effekt, wie das Loop Attribut.

Nun habe ich eine Krüppel-Lösung hergenommen.

Mit window.setTimeout wird eine Funktion forlaufend wiederholt. Diese prüft die Position und ob das Ende “fast” erreicht ist. Fast heisst hier: Länge des Audios ([audio].duration) minus etwas Luft. Ich hab mal 0.2 Sekunden gesetzt.

/**
 * sound hook
 * @returns {undefined}
 */
function soundtrigger() {
	oAudioBgsound = document.getElementById("audioBgSound");
	iPos = oAudioBgsound.currentTime;
	if (iPos>oAudioBgsound.duration - 0.2){
		oAudioBgsound.currentTime=0;
	}
	if (iPos > (oAudioBgsound.duration - 6)) {
		window.setTimeout("soundtrigger();", 50);
	} else {
		window.setTimeout("soundtrigger();", 5000);
	}
}

Es ist echt unschön, aber falls wer was besseres weiss…

weiterführende Links:

• Musik zur Osterkarte 2014