Fading effect between play and play-over and pause and pause-over

Joined
Nov 8, 2019
Messages
11
Reaction score
0
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


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:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top