JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<button onmousedown="backward(this)" onmouseup="play(this)"><<</button>
<button onmousedown="forward(this)" onmouseup="play(this)">>></button>

<div id="target"></div>

JavaScript

var intervalRef;

var audio = document.createElement("audio");
audio.setAttribute("controls", true);

var source = document.createElement("source");
source.setAttribute("type", "audio/mpeg");
source.src = "https://mixtapearkivet.org/wp-content/uploads/0057-A-dj_source-chillin_deep.mp3";

audio.appendChild(source);
document.getElementById("target").appendChild(audio);


function backward(elem) {
	intervalRef = setInterval(function(){
  	audio.currentTime += -1;
  }, 50)
}

function forward(elem) {
  audio.playbackRate = 4;
  audio.play();
}

function play(elem) {
	clearInterval(intervalRef);
  audio.playbackRate = 1;
  audio.play();
}