如何在网页中插入音频并在html中隐藏控件

Question

如何在不显示任何控件的情况下插入本地音频（如果我们只能显示音量按钮则更好），它会不断循环...？ 我尝试了嵌入标签、iframe 标签、音频标签，但没有人是完美的，有些作品在边缘但不是在 chrome 上......

Answer 1

尝试使用 CSS 将“显示”设置为“无”来隐藏它。

audio { 
   display:none;
}

Answer 2

您可以使用 Web Audio API 在 html 页面中播放声音，而无需可见控件。
有loop选项可以激活循环播放。

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let source = audioCtx.createBufferSource();

fetch('sample.wav')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    audioCtx.decodeAudioData(buffer, data => {
      source.buffer = data;
      source.connect(audioCtx.destination);
      source.loop = true;
      source.start(0);
    })
  })

如果需要，您可以借助 gainNode 和范围滑块添加音量控制。

请注意，某些浏览器实现会在用户明确允许之前阻止播放音频。