Disable `audio` html tag

I have an html audio tag in my project, which in some situation I need to disable. In order to do it I apply the following css by adding disabled class to the audio tag:

audio.disabled {
  pointer-events: none
}

I would like to add a layer with opacity 50% that will cover the audio element, in order to give a different view for it when it is disabled.
I thought to use the pseudo class ::before, but do not manage to have a visible element.

Here is a snippet with what I have already:

function toggleAudioDisable() {
  document.getElementById('myAudio').classList.toggle("disabled");
}

.disabled {
  pointer-events: none
}

<audio id="myAudio" controls="controls" src="https://commondatastorage.googleapis.com/codeskulptor-assets/Epoq-Lepidoptera.ogg"></audio> <br> 

<button onclick="toggleAudioDisable()">Toggle Audio Disable</button>

Any idea how to implement it?

Solution

I added a layer with opacity: 0.5 and it will works as you want. Hope it helps you!

function toggleAudioDisable() {
  const audio = document.getElementById('myAudio');
  const isDisabled = audio.classList.toggle("disabled");

  const blocker = document.getElementById('blocker');
  if (isDisabled) {
    blocker.style.display = 'block';
  } else {
    blocker.style.display = 'none';
  }
}

.audio-wrapper {
  position: relative;
}

audio.disabled {
  pointer-events: none;
}

.blocker {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  cursor: not-allowed;
  display: none;
  z-index: 1000;
  background: #FFF;
}

<div class="audio-wrapper">
    <audio id="myAudio" controls src="https://commondatastorage.googleapis.com/codeskulptor-assets/Epoq-Lepidoptera.ogg"></audio>
    <div id="blocker" class="blocker"></div>
</div>
<br> 
<button onclick="toggleAudioDisable()">Toggle Audio Disable</button>