How to mute audio tag with css?

Question

目前我正在制作一个仅使用 html 和 css 的动画。在动画结束时，我需要播放一段简短的声音。我目前的想法是有一个静音并循环播放的音频标签。在动画结束时，我会取消静音理论上应该产生我想要的结果的标签。我想我需要这样的东西

    <audio id="background_audio" controls autoplay loop muted>
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 

.
.
.

@keyframe my-animation{
from{<something>}
to{
   <something>
   // unmute the tag here
}
}

但是，我找不到可以使音频静音和取消静音的音频 css 属性。

是否有这个属性，如果没有，是否可以在没有 javascript 的情况下做类似的事情？

Answer 1

你不能用 css 静音/取消静音你将不得不使用 JS。 但是使用js你可以在动画结束时使用监听器播放一个函数

animationend

如果不需要，您也可以通过直接创建要在动画结束时播放的音频来避免 html 音频元素

const yourElem = document.querySelector({selector where animation will be played});
yourElem.addEventListener("animationend", function() {
        const audio = new Audio('static/audio/clip.mp3');
        audio.play();
});