User:Wyn/Special Issue 25/Field Recording

   <a href="#" title="Click to play audio">DVD</a>

<style>

1. dvd-logo {

   position: relative;
   width: 100px;
   height: 50px;
   background-color: #fff;
   color: #000;
   text-align: center;
   line-height: 50px;
   font-weight: bold;
   cursor: pointer;
   user-select: none;

}

1. dvd-logo a {

   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
   color: inherit;

} </style>

<script> (function() {

   var dvdLogo = document.getElementById('dvd-logo');
   if (!dvdLogo) return;

   var audioElement = document.createElement('audio');
   audioElement.src = 'https://pzwiki.wdka.nl/mw-mediadesign/path/to/your/audio/file.mp3';  // Update this path

   var containerWidth = dvdLogo.parentElement.clientWidth - dvdLogo.clientWidth;
   var containerHeight = 300; // Adjust this value as needed
   var x = 0, y = 0;
   var xSpeed = 2, ySpeed = 2;

   function moveLogo() {
       x += xSpeed;
       y += ySpeed;

       if (x + dvdLogo.clientWidth > containerWidth || x < 0) {
           xSpeed = -xSpeed;
           changeLogoColor();
       }
       if (y + dvdLogo.clientHeight > containerHeight || y < 0) {
           ySpeed = -ySpeed;
           changeLogoColor();
       }

       dvdLogo.style.left = x + 'px';
       dvdLogo.style.top = y + 'px';

       requestAnimationFrame(moveLogo);
   }

   function changeLogoColor() {
       var randomColor = Math.floor(Math.random()*16777215).toString(16);
       dvdLogo.style.backgroundColor = "#" + randomColor;
   }

   dvdLogo.addEventListener('click', function(e) {
       e.preventDefault();
       audioElement.currentTime = 0;
       audioElement.play();
   });

   moveLogo();

})(); </script>