如何在加载 JS 时播放声音

有时候我们需要在网页加载完成后播放一段声音来提醒用户或做其他交互。本文将介绍如何使用 JavaScript 在加载 JS 时播放声音。

使用 HTML5 Audio 元素

HTML5 中有一个音频元素 <audio>，可以在网页中插入音频文件并进行控制。我们可以在 JS 文件中动态创建 <audio> 元素，添加音频文件地址，然后调用 play() 方法来实现播放。

var audio = new Audio("audio.mp3");
audio.play();

上述代码将创建一个名为 audio 的变量，并将其赋值为一个新创建的 <audio> 元素。接着，我们使用 audio.src 属性来设置音频文件路径，并调用 play() 方法开始播放。

自动播放

如果要在页面加载完成后自动播放声音，可以将以上代码加入到 window.onload 中。

window.onload = function() {
  var audio = new Audio("audio.mp3");
  audio.play();
}

修改音量和循环播放

除了播放外，我们还可以通过调用对象属性来修改音量、设置循环播放等。

var audio = new Audio("audio.mp3");
audio.volume = 0.5; // 0.0 ~ 1.0，设为 0.5 表示半音量
audio.loop = true; // 循环播放
audio.play();

一些注意事项

在移动端，自动播放声音需要用户点击屏幕后才可以执行。因此，建议为自动播放添加一个按钮，让用户自己触发播放。

此外，为了防止声音被浏览器拦截，可以在音频文件名称后添加时间戳参数，强制浏览器重新加载成新的资源。

var audio = new Audio("audio.mp3?" + Date.now());
audio.play();

完整示例代码：

window.onload = function() {
  var audio = new Audio("audio.mp3?" + Date.now());
  audio.volume = 0.5;
  audio.loop = true;
  audio.play();
}

以上就是在加载 JS 时播放声音的基础知识。希望本文能对您有所帮助。