Question

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

Answer 1

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

audio { 
   display:none;
}

Answer 2

您可以使用 Web音频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和范围滑块的帮助下添加音量控件。

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

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

2 个答案: