Hi everybody:
I've been trying to add a fading effect between the play and play-over and pause and pause-over images in the following audio player, like the infobox fades in and out, but for weeks I've failed.
Would you please show me how it can be done?
Thanks,
Kenny
jsfiddle.net
I've been trying to add a fading effect between the play and play-over and pause and pause-over images in the following audio player, like the infobox fades in and out, but for weeks I've failed.
Would you please show me how it can be done?
Thanks,
Kenny
Chimes Audio Player Test - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Code:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chimes Audio Player Test</title>
<style>
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
#infobox { margin-left:0% !important;margin-right:0% !important;width:100% !important; color:#FFFFFF;opacity:0; text-shadow:1px 1px 1px #000000; border-radius:0em; margin-bottom:0em; opacity:0; padding:0.6em 0em 0.3em 0em !important; background:rgba(0,0,0,0.6); font-size:1.04em; line-height:1.2;text-align:center }
#infobox.show { -webkit-animation:fadein 1s both; animation:fadein 1s both }
#infobox.hide { -webkit-animation:fadeout 1s both; animation:fadeout 1s both }
@-webkit-keyframes fadein { 0% {opacity:0} 100% {opacity:1} }
@keyframes fadein { 0% {opacity:0} 100% {opacity:1} }
@-webkit-keyframes fadeout { 0% {opacity:1} 100% {opacity:0} }
@keyframes fadeout { 0% {opacity:1} 100% {opacity:0} }
#toggle { border-style:none; display:block; height:100px; width:100px; margin-top:0% !important; margin-bottom:71% !important;margin-left:30% !important; background:url(https://itsabouttime.gallery/images/pause.png) 50% no-repeat; border:0em solid transparent; border-radius:0%; cursor:pointer; }
#toggle:hover, #toggle:focus { background-image:url(https://itsabouttime.gallery/images/play.png);}
#toggle.pause { background-image:url(https://itsabouttime.gallery/images/pause.png);}
#toggle.pause:hover { background-image:url(https://itsabouttime.gallery/images/pause-over.png); }
#toggle.play { background-image:url(https://itsabouttime.gallery/images/play.png);}
#toggle.play:hover { background-image:url(https://itsabouttime.gallery/images/play-over.png); }
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- START CHIMES AUDIO PLAYER -->
<div style="position:fixed; left: -1% !important; bottom:-7.8%;z-index:2;">
<audio autoplay="autoplay" id="music" preload="auto">
<source src="//itsabouttime.gallery/chimes/Beethoven's_9th_Symphony.mp3"/>
</audio>
<script>
document.getElementById("music").volume = 0.7;
</script>
<div id="audioplayer">
<div id="toggle-wrap">
<button id="toggle"></button>
</div>
<div class="timeline-wrap">
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
</div>
</div>
<div style="width:100%; position:fixed; bottom:0%;" id="infobox">Now Playing: '<em><strong>Beethoven's 9th Symphony</strong></em>' <br>Different Chimes Play on Page Refresh</div>
<!-- END CHIMES AUDIO PLAYER -->
<!-- START CHIMES AUDIO PLAYER SCRIPT -->
<script>
var toggle = document.getElementById('toggle'),
music = document.getElementById('music'),
infobox = document.getElementById('infobox'),
cookie = getCookie('fofrandomaudio');
music.addEventListener('playing', function() { // while playing
if (cookie != 'audiooff') {
toggle.className = 'pause';
infobox.className = 'show';
infobox.style.display = 'block';
}
}, false);
music.addEventListener('ended', function() { // while paused
toggle.className = 'play';
infobox.className = 'hide';
}, false);
function play() { // button + infobox toggle
if (music.paused) {
music.play();
toggle.className = 'pause';
infobox.className = 'show';
infobox.style.display = 'block';
document.cookie = 'fofrandomaudio=audioon; max-age=0; path=/'; // delete cookie
} else {
music.pause();
toggle.className = 'play';
infobox.className = 'hide';
if (document.all && !window.atob) { infobox.style.display = 'none'; } // IE9
document.cookie = 'fofrandomaudio=audiooff; max-age="+60*60*24*30+"; path=/'; // set cookie for 30 days
}
}
toggle.addEventListener('click', play, false); // toggle action
function getCookie(name) {
var value = new RegExp(name + "=([^;]+)").exec(document.cookie);
return (value != null) ? unescape(value[1]) : null;
}
/* remove this block of code to stop auto-play*/
window.addEventListener('load', function(){ // auto-play
if (cookie != 'audiooff') {
play();
} else {
toggle.className = 'play';
infobox.style.display = 'none';
}
}, false);
</script>
<!--<![endif]-->
<!-- END CHIMES AUDIO PLAYER SCRIPT -->
<!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
Last edited: