mouse movement recorder

by neonDog

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse Recorder and Playback</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="record-button" id="record">Start Recording</div>
  <div class="record-button" id="stop">Stop Recording</div>
  <div class="record-button" id="play">Playback</div>
  <div class="record-button" id="download">Download</div>
  <div id="playback-element" style="top:200px; left:200px;"></div>

  <script src="script.js"></script>
</body>
</html>

CSS

.record-button {
  display: inline-block;
  margin: 5px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

#playback-element {
  width: 30px;
  height: 30px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  border-radius: 50%;
}

.color-danger {
   background-color: red;
   color: white;
}

JavaScript

const recordButton = document.getElementById('record');
const stopButton = document.getElementById('stop');
const playbackButton = document.getElementById('play');
const downloadButton = document.getElementById('download');
const playbackElement = document.getElementById('playback-element');

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
playbackButton.addEventListener('click', playback);
downloadButton.addEventListener('click', downloadRecording);
document.addEventListener('mousemove', recordMouseMovement);


// Add event listener to handle spacebar press for toggling recording
document.addEventListener('keydown', function (event) {
  if (event.code === 'Space') {
    event.preventDefault(); // Prevent the default action (e.g., scrolling) when spacebar is pressed
    toggleRecording();
  }
});

let isRecording = false;
let movements = [];

let lastX = null;
let lastY = null;
let lastMouseMove = null;
const threshold = 1; // Adjust this value to set the minimum movement threshold in pixels

function toggleRecording() {
	
  if (!isRecording) {
    startRecording();
  } else {
    stopRecording();
  }
};

function recordMouseMovement(event) {
  if (isRecording) {
    const x = event.clientX;
    const y = event.clientY;
    
    const currentTime = Date.now();
    if (lastMouseMove !== null && currentTime - lastMouseMove > 200) {
      // If there is a pause for more than 0.2 seconds, record the duration
      const duration = (currentTime - lastMouseMove) / 1000;
      movements.push('d', duration); //'d' = delay
    }

    lastMouseMove = currentTime;

    if (lastX !== null && lastY !== null) {
      const distance = Math.sqrt((x - lastX) ** 2 + (y - lastY) ** 2);
      if (distance >= threshold) {
        movements.push(x, y); // Record the movement
      }
    } else {
      movements.push(x, y); // Record the initial position
    }

    lastX = x;
    lastY = y;
  }
}

function startRecording() {
...