前端网页BGM没声音

Question

给网页添加了BGM，在HbuilderX里打开edge浏览器运行时能正常播放BGM，但是从电脑文件夹里点开网页运行就没有声音，这是怎么回事啊。
我们只学了html和css，还没学JavaScript 希望大家能用我学到的知识点🥲

，看了路径也没什么问题

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

前端网页BGM没声音

你遇到的问题是：在 HBuilderX 中打开 Edge 浏览器运行网页时，BGM 可以正常播放，但是从电脑文件夹里点开网页运行时就没有声音。

可能的原因是：在 HBuilderX 中，Edge 浏览器可能会自动启用音频输出，而在从电脑文件夹里点开网页运行时，可能没有启用音频输出。

解决方案：

1. 检查网页的音频文件路径是否正确。
2. 在网页的 HTML 文件中添加 audio 标签，并设置 autoplay 属性为 true，以便在网页加载完成后自动播放 BGM。
3. 在网页的 CSS 文件中添加 audio 标签的样式，例如 audio { display: block; }，以便在网页中显示音频控件。
4. 在网页的 JavaScript 文件中添加代码，例如 document.addEventListener('DOMContentLoaded', function() { var audio = document.getElementById('bgm'); audio.play(); });，以便在网页加载完成后自动播放 BGM。

核心代码：

<audio id="bgm" src="bgm.mp3" autoplay="true"></audio>

audio {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {
  var audio = document.getElementById('bgm');
  audio.play();
});

希望这些解决方案能够帮助你解决问题！