JSFiddle - React, Tailwind, and code Playground

by Burduja Serghei

HTML

<div class="board">
    <img src=""
         alt="cassete" width="300" height="200"
         id="1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"/>
    <audio class="splplayer" controls="controls" id="audio_player" preload="metadata">
        <source src="https://drive.google.com/uc?export=download&amp;id=1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG"></source>
    </audio>
</div>

JavaScript

number = 0;
    const animations = [
        'https://new2.bludelego.it/wp-content/uploads/2022/01/cassete.png',
        'https://static.wixstatic.com/media/6b2a99_687dc4cb09bc42bdb230d1c8ce7815a4~mv2.gif'
    ];

    const audio = document.getElementById('audio_player');
    audio.addEventListener('play', startGif);
    audio.addEventListener('pause', endtGif);

    endtGif();

    function startGif() {
        number = 1;
        character();
    }

    function endtGif() {
        number = 0;
        character();
    }

    function character() {
        image = document.getElementById('1BoXzCv8EbZ5BDnb47T31lPM1lKdne7wG');
        image.src = animations[number];
    }