JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "controls">
    <audio id = "audio" controls></audio>
  </div>

CSS

#controls {
    position:absolute;
    top: 35px;
    left:73px;
    height: 20px;
    width: 180px;
    display: none;
}

#audio {
  opacity: 0;
}

JavaScript

var audio = document.getElementById("audio")
var controls = document.getElementById("controls")
controls.style.display = "block";
setTimeout(function(){
 audio.style.setProperty("-webkit-transition", "opacity 2s");
 audio.style.opacity = 0.7;
}, 0)