JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:none;" class="image-preloader">
    <img id="record" src="http://benlevywebdesign.com/somafm/images/SomaFMrecord2.png" />
    <img id="needle" src="http://benlevywebdesign.com/somafm/images/recordneedle2.png" />
</div>
    
<canvas class="recordplayer" id="player1" height="220" width="220"></canvas>
<hr/>
<canvas class="recordplayer" id="player1" height="220" width="220"></canvas>

JavaScript

// setup
var imgRecord = $('#record').get(0);
var imgNeedle = $('#needle').get(0);
$('.recordplayer').each(function() {
    var ctx = this.getContext('2d');
    ctx.clearRect(0, 0, 220, 220);
    drawRecord(ctx);
    drawNeedle(ctx, 10, 15, 0);
});

// event handler
$('.recordplayer').click(function(event) {
    var $obj = $(event.target);
    if($obj.hasClass('playing')) {
        $obj.removeClass('playing');
        stopPlayer($obj);
    } else {
        $obj.addClass('playing');
        startPlayer($obj);
    }
});

// animation functions
function drawRecord(ctx) {
    ctx.save();
    ctx.drawImage(imgRecord, 0, 0);
    ctx.restore();
}
function drawNeedle(ctx, rotPtX, rotPtY, rot) {
    ctx.save();
    ctx.translate(0, 190);
    ctx.translate(rotPtX, rotPtY);
    ctx.rotate(rot);
    ctx.drawImage(imgNeedle, -(rotPtX/2), -(rotPtY/2));
    ctx.restore();
}
function startPlayer($obj) {
    var ctx = $obj.get(0).getContext('2d');
    var rot = 0.0;
    var evt = setInterval(function() {
        ctx.clearRect(0,0,220,220);
        drawRecord(ctx);
        drawNeedle(ctx, 10, 15, rot);
        rot = rot - 0.1;
        if(rot < -0.5) clearInterval(evt);
    }, 100);
}
function stopPlayer($obj) {
    var ctx = $obj.get(0).getContext('2d');
    var rot = -0.5;
    var evt = setInterval(function() {
        ctx.clearRect(0,0,220,220);
        drawRecord(ctx);
        drawNeedle(ctx, 10, 15, rot);
        rot = rot + 0.1;
        if(rot > 0.0) clearInterval(evt);
    }, 100);
}