如何使用 Javascript 向 HTML 添加声音？ [复制]

Question

我使用以下代码向我的 HTML 文档添加声音。

function sound(src) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    this.play = function(){
      this.sound.play();
    }
    this.stop = function(){
      this.sound.pause();
    }
}
var bite = new sound("Bite+2.mp3");
var slurp = new sound("Slurp+4.mp3");
var hiss = new sound("snakehiss2.mp3");
var bg = new sound("gameSound.mp3");

现在，我想设置 'bg' 的音量并使其 loop = true 我想不出办法来做到这一点。请帮忙！！
另外，我在网上某处看到了代码，但我无法理解“this.sound”是如何工作的。请解释一下
编辑：
事实证明，我只需要执行 bg.sound.volume = 0.5 即可。同样，bg.sound.loop = true。
我也理解“this”的用法，但为什么需要“sound”？用 this.src 代替 this.sound.src 还不够吗？

Answer 1

我是 stackoverflow 的新手，但这是我的猜测

首先声明全局变量

let siteSound;

然后像你一样声明函数

function createSound(src) { //src stands for source
  this.sound = document.createElement("audio");
  this.sound.src = src;
  this.sound.setAttribute("preload", "auto");
  this.sound.setAttribute("controls", "none");
  this.sound.style.display = "none";
  document.body.appendChild(this.sound);
  this.play = function(){
    this.sound.play();
  }
  this.stop = function(){
    this.sound.pause();
  }
}

然后创建一个启动声音的函数

function startSound(dirToSound){
   siteSound = new createSound();
   siteSound.play();
}

如您所见，我们将变量 siteSound 声明为新的 createSound()，并且在该 createSound() 方法中，“this”指的是导致该方法的变量，在我们的原因中是 siteSound。 （this.sound 代表 siteSound.sound，this.sound.src 代表 siteSound.sound.src 等）

由于网站播放音乐的方式受到限制（用户必须先在页面上做某事，例如单击），我想您使用某种事件来创建音乐，例如添加事件侦听器“onclick”为鼠标，并调用函数startSound：

someHTMLElement.domElement.addEventListener('onclick', startSound(dirToSound), false);

当您单击 someHTMLElement 时，应调用 startSound(dirToSound) 并开始播放音乐。

如果你想循环，在方法createSound(src)中添加this.loop = true（我不确定是否是html，但这在其他地方有效，你必须测试）

如果您想将响度调整为 50%，请尝试将 this.volume = 0.5 添加到 createSound(src) 函数（从 0 到 1 的数字）