Audio Animation Control

<body> This side implements the code
<img id="myImage" src="blue2.gif" alt=animation-cover width=400 height=310>
<div id=prof><img src="images/profteach.gif" width=136 height=128></div>
<div id=hide>
<img src="blue2.gif" width=70 height=30 style="border-radius:60px;" alt=audio-control-cover></div>
<div id=tri><img src=g/triangle.png" alt=audio-animation-selector></div>
<div id=data><audio src="guitar-piano-boogie.mp3" controls loop onplay="playAnimation()"  onpause="pauseAnimation()" style="width:100px;height:30px;">
</div>
        <script>
        var selectImg=document.getElementById("myImage");
        function playAnimation(){
          selectImg.src="four-for-texas.gif";
        }
        function pauseAnimation(){
          selectImg.src="blue2.gif";
        }
      </script>
</body>
</html>

The way this works is that when the audio is paused you see the "animation-cover" id=myImage and when the audio is played you see the animation four-for-texas.gif. The right 70% of the audio tag is covered by the "audio-control-cover" id=hide with the left 30% covered by the triangle.png. There are six basic reqirements that MUST adhered to for this technique to work properly.

The "animation-cover" must be the same size as the "animation image".
The "animation-cover" must be the same color as the page color.
The "audio-control-cover" must be styled to <style="width:100px;height;30px;">
The "audio-control-cover" must be the same color as the page color.
The triangle id #tri must have z index of -1 z-index:-1;. This places the triangle beneath the audio tag.
Now for the real magic. The data id's #data opacity is set at 10% opacity:0.1;.
This gives the illusion of the triangle controlling the audio and the animation as it is now visible through the audio tag.
Source the page, take the code to my Pc Test Bed and change the body color to black to see the covers

Audio~Animation~Control