Dabei verändere ich die Anzeige vom Button mit seinem jeweiligen Mobirise-Icon
für den Sound.Weiterhin habe ich einen Lautstärkeregler hinzugefügt, dessen Einstellungen über `localStorage` im Browser gespeichert werden, sodass die Lautstärke beim erneuten Aufruf der Seite bereits voreingestellt ist.
Beispielseite:
https://www.mobirise-tutorials.com/Tuto ... Video.html
JavaScript - in den Seiteneinstellungen:
Die Icon-Bezeichnungen (Suchbegriff: "Volume") sind von Mobirise und können natürlich entsprechend des jeweiligen Icon-Namens angepasst werden.
In diesem Beispiel also die beiden Lautsprecher-Icons mit diesen Mobirise-Bezeichnungen:
sli-volume-2
sli-volume-off
Code: Alles auswählen
<!-- JavaScript Background Sound -->
<script>
function aud_play_pause() {
var myAudio = document.getElementById("myAudio");
var icon = document.getElementById("soundIcon");
var text = document.getElementById("soundText");
if (myAudio.paused) {
myAudio.play();
icon.classList.remove("sli-volume-off");
icon.classList.add("sli-volume-2");
text.textContent = "Sound on";
} else {
myAudio.pause();
icon.classList.remove("sli-volume-2");
icon.classList.add("sli-volume-off");
text.textContent = "Sound off";
}
}
// Volume control with localStorage
document.addEventListener("DOMContentLoaded", function () {
var myAudio = document.getElementById("myAudio");
var volumeSlider = document.getElementById("volumeSlider");
// Lautstärke aus localStorage laden (wenn vorhanden)
var savedVolume = localStorage.getItem("bgAudioVolume");
if (savedVolume !== null) {
myAudio.volume = savedVolume;
volumeSlider.value = savedVolume;
} else {
myAudio.volume = 1; // Standardlautstärke
}
// Bei Änderung speichern
volumeSlider.addEventListener("input", function () {
myAudio.volume = this.value;
localStorage.setItem("bgAudioVolume", this.value);
});
});
</script>HTML - im Block:
Code: Alles auswählen
<!-- Audio Code -->
<audio id="myAudio" autoplay loop>
<source src="./sound/ocean-waves.mp3" type="audio/mpeg">
Dieser HTML5 Player wird von Deinem Browser nicht unterstützt.
</audio>
<!-- Button on / off -->
<div class="mbr-section-btn align-center" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove" onclick="aud_play_pause()">
<a class="btn btn-primary notranslate" href="javascript:void(0);" data-app-placeholder="Type Text">
<span id="soundIcon" class="sli-volume-2 mbr-iconfont mbr-iconfont-btn"></span>
<span id="soundText">Sound on</span>
</a>
</div>
<!-- Volume control -->
<div class="volume-control" style="margin-top: 1rem; text-align: center;">
<!-- Label (Beschriftung) hier auskommentiert und durch Bootstrap `tooltip` ersetzt -->
<!-- <label for="volumeSlider" style="margin-right: 10px;">Lautstärke:</label> -->
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" title="Lautstärke">
</div>