我们如何（或者我们可能）如何通过 CSS 实现表现音效？答案

【问题标题】：How can we (or might we) achieve presentational sound effects via CSS?我们如何（或者我们可能）如何通过 CSS 实现表现音效？
【发布时间】：2022-08-18 16:21:01
【问题描述】：

如果我们从接受这一点开始：

HTML 用于结构体
CSS 用于介绍
JS 用于行为

注：我们可以辩论是否响应用户的演示文稿相互作用只是另一种说法行为.这当然是一种观点。

然而，网络上的大量交互式视觉效果宣布完全在 CSS 中，由 :hover 和 :focus 发起 :focus-within 等伪类状态表明另一种观点被广泛传播分享说 CSS 是一种合法的技术，可以处理我们可能发生的事情称呼交互式演示.

我想问一下（因为我什么也找不到），对于部署 CSS 来处理的所有多种方式交互式视觉呈现它曾经被部署来处理交互式听觉演示?

有没有尝试引入听觉呈现到 CSS？

有没有建议介绍听觉呈现到 CSS？

是否有任何官方方法（即使浏览器从未实现或尚未实现）来使用以下（虚构的）CSS属性来实现以下演示的功能：

audio
audio-duration
audio-play

工作示例：

请取笑我，假装下面仓促编写的 javascript 不存在，就好像 CSS 样式如下：

.square:unhover {
  audio: url(//cdn.freesound.org/previews/628/628357_1486333-lq.mp3);
  audio-duration: 1.776s;
  audio-play: 2;
}

照原样工作。

// BUILD STYLESHEET ARRAY
const stylesheet = document.head.querySelector(\'style\');
let stylesheetText = stylesheet.textContent.replace(/\\s/g, \'\');
let stylesheetArray = stylesheetText.split(\'}\');
stylesheetArray.pop();

// BUILD SELECTORS ARRAY
let selectorsArray = [];
for (let i = 0; i < stylesheetArray.length; i++) {
  selectorsArray[i] = {
    selector: stylesheetArray[i].split(\'{\')[0],
    styles: {}
  };
  
  let selectorRules = stylesheetArray[i].split(\'{\')[1].split(\';\')
  selectorRules.pop();
  
  for (let j = 0; j < selectorRules.length; j++) {
  
    selectorsArray[i].styles[selectorRules[j].split(\':\')[0]] = selectorRules[j].split(\':\')[1];
  }
}

// BUILD TARGET QUERIES ARRAY
let targetQueriesArray = [];

for (let i = 0; i < selectorsArray.length; i++) {
  
  if ((/:hover|:unhover/).test(selectorsArray[i].selector)) {
  
    if (Object.keys(selectorsArray[i].styles).includes(\'audio\')) {
  
      let targetQuery = selectorsArray[i];
      
      switch (true) {
    
        case (targetQuery.selector.includes(\':hover\')): targetQuery.event = \'mouseover\'; break;
        case (targetQuery.selector.includes(\':unhover\')): targetQuery.event = \'mouseout\'; break;
      }
    
      targetQueriesArray.push(targetQuery);
    }
  }
}

// DECLARE playAudioViaCSS FUNCTION
const playAudioViaCSS = (audioURL, audioDuration, audioPlays) => {

  let soundEffectViaCSS = new Audio(audioURL);
  soundEffectViaCSS.loop = true;
  soundEffectViaCSS.play();
  
  setTimeout(() => soundEffectViaCSS.loop = false, (audioDuration * audioPlays));
}

// ATTACH AUDIO EVENTS TO TARGET ELEMENTS
for (let i = 0; i < targetQueriesArray.length; i++) {
 
  let targetAudio = targetQueriesArray[i].styles.audio.replace(\'url(\', \'\').replace(\')\', \'\');
  let targetAudioDuration = (targetQueriesArray[i].styles[\'audio-duration\'].replace(\'s\', \'\') * 1000) || 1000;
  let targetAudioPlays = targetQueriesArray[i].styles[\'audio-play\'] || 1;
  let targetEvent = targetQueriesArray[i].event;
  let targetQuery = targetQueriesArray[i].selector.replace(/:hover|:unhover/g, \'\');

  let targetElements = [...document.querySelectorAll(targetQuery)];
  targetElements.forEach((element) => element.addEventListener(targetEvent, () => playAudioViaCSS(targetAudio, targetAudioDuration, targetAudioPlays), false));
};

:root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.square {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  border-radius: 50%;
  cursor: pointer;
  transform: scale(1);
  transition: all 0.9s ease-out; 
}

.square:hover {
  border-radius: 0;
  transform: scale(1.5);
  audio: url(//cdn.freesound.org/previews/354/354062_1490240-lq.mp3);
  audio-duration: 2.304s;
  audio-play: 3;
}

.square:unhover {
  audio: url(//cdn.freesound.org/previews/628/628357_1486333-lq.mp3);
  audio-duration: 1.776s;
  audio-play: 2;
}

<div class=\"square\">
Hover me
</div>

答案是否定的...
w3.org/Style/CSS/Speech/NOTE-ACSS-961210
developer.mozilla.org/en-US/docs/Web/CSS/@media/aural
精彩的！谢谢你，@epascarello。我确实花了一些时间在 Smashing Magazine、AListApart、SitePoint、CSS-Tricks 等上寻找博客文章，但我只是在画空白。如果您想在答案中发布下面的这两个链接，我将很高兴接受。再次感谢。
@Rounin-StandingwithUkraine 音频在您的示例中出现的方式是“背景音频”（就像与常规图像元素相对的背景图像），因此确实是“听觉呈现”，而不是 HTML 元素的动作（= 行为，即悬停、单击等）。

标签： javascript html css audio presentation

【解决方案1】：

CSS 处理网页的外观部分。使用 CSS，您可以控制文本的颜色、字体的样式、段落之间的间距、列的大小和布局等。 CSS 节省时间 - 您可以编写一次 CSS，然后在多个 HTML 中重复使用同一张表页。

【讨论】：

谢谢，@Avihaa - 请参阅我的问题听觉的演示与视觉呈现.