Untitled

<!DOCTYPE html>
<html>

<head>
	<style>
		button {
			width: 60px;
			cursor: pointer;
		}

		.a-btn:after {
			content: "Play";
		}

		.a-btn-restart:after {
			content: "Restart";
		}

		.a-btn.a-btn-on {
			background-color: lightblue;
		}

		.a-btn.a-btn-on::after {
			content: "Pause";
		}
	</style>
</head>

<body>

	<progress id="a-progress" min="0" max="100" value="0"></progress>
	<button id="a-rwd">rwd</button>
	<button id="a-play" class="a-btn"></button>
	<button id="a-ffw">ffw</button>
	<input id="a-slider" type="range" min="1" max="10" value="1">
	<script>
		var variable = function (element, attr) {

			return function () {
				if (arguments.length > 0)
					element.value = arguments[0];

				else return element.value;
			}

		}
		var i = new variable(document.getElementById("a-progress"));
		var s = document.getElementById("a-slider").value * 100;
		var id;
		var max = document.getElementById("a-progress").max;
		var pause = true;

		function intervalFunc() {
				i(i() + 1);
				if (i() >= max || i() <= 0) {
					pause = true;
					document.getElementById("a-play").className = "a-btn-restart";
					clearInterval(id);

				}
				if (pause === true) {
					clearInterval(id);
				}
			}

		document.getElementById("a-play").addEventListener('click', function () {
			if (this.className === "a-btn-restart") {
				this.className = "a-btn";
				i(0);
			}
			this.classList.toggle("a-btn-on");
			pause = !pause;
			if (pause) return;
			id = setInterval(intervalFunc, s);

		});

		document.getElementById("a-ffw").addEventListener('click', function () {
			if (i() < max - 5)
				i(i() + 5);
		});

		document.getElementById("a-rwd").addEventListener('click', function () {
			if (i() > 5)
				i(i() - 5);
		});
		document.getElementById("a-slider").addEventListener('change', function(){
			clearInterval(id);
			s = this.value * 100;
			id = setInterval(intervalFunc, s);
		});
	</script>

</body>

</html>