Background music with on/off toggle
You can follow these steps:
1) First of all upload your mp3-file and the 2 images for the toggle (on and off image).
Go to theme (on top of the page) > Edit HTML/CSS (bottom left) > upload your files under assets (left side).
2) Make a copy of the header type you are using.
1. Copy all the code.
2. Add a new header type.
3. Delete the code that is in it, and paste the code you copied.
4. Under pages, change the header type of the page where you added the music.
3) Add the following code just before the end of the head tag (</head>)
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("#mute").click(function(e) {
e.preventDefault();
var song = $('audio')[0]
if (song.paused){
song.play();
document.getElementById("mute").src = "http://dddproduktionen.weebly.com/
files/theme/sound-on.svg";
}else{
song.pause();
document.getElementById("mute").src = "http://dddproduktionen.weebly.com/
files/theme/sound-off.svg";
}
});
});
</script>
(Make sure to change link so it has you domain name and file name in it)
4) Add the following code just before the end of the navigation tag:
<div id="bgAudioControls">
<a href="#" >
<img id="mute" src="http://dddproduktionen.weebly.com/files/theme/
sound-on.svg"/>
</a>
<audio id="bgAudio" autoplay loop preload src="http://dddproduktionen.weebly.com/
files/theme/DDDmusic.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
(Make sure to change link so it has your domain name and file name in it)
5) Add the following code in the css:
Go to theme (on top of the page) > Edit HTML/CSS (bottom left) > Go to assets (left side) > and click main_style.css
#bgAudio, #bgAudioControls {
float:right;
position:fixed;
top:5%;
right:5%;
z-index: 32;
opacity: 0.5;
}
#bgAudio:hover, #bgAudioControls:hover {
opacity: 1;
}
You can downoad the sound buttons below:
Popular posts
Copyright © 2017 DDDproduktionen. All rights reserved. Powered by Weebly