如何为禁用的HTML audio标签添加半透明遮罩层？

云原生阿岚

2026-6-18

问题描述

项目中的HTML audio 标签需要在特定场景下禁用，目前通过添加disabled类并设置pointer-events: none实现了点击禁用，但想给禁用状态的audio添加50%不透明度的遮罩层，尝试用::before伪类没效果，现有代码如下：

JavaScript

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

CSS

.disabled {
  pointer-events: none
}

HTML

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

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

解决方案

audio属于浏览器的替换元素（类似img、input，内部UI由浏览器渲染），伪元素无法直接作用在这类元素上。解决思路是给audio套一层容器，把遮罩伪元素加在容器上，同时将禁用逻辑绑定到容器：

完整修改代码

JavaScript

function toggleAudioDisable() {
  document.querySelector('.audio-container').classList.toggle("disabled");
}

CSS

.audio-container {
  position: relative;
  display: inline-block; /* 让容器适配audio的宽度 */
}

/* 禁用audio的交互 */
.audio-container.disabled audio {
  pointer-events: none;
}

/* 添加50%不透明度的遮罩层 */
.audio-container.disabled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10; /* 确保遮罩在audio控件上方 */
}

HTML

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

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