如何在JavaScript中播放音频？实现HTML5桌面通知触发音效功能

没问题！我来帮你把音效添加到你的桌面通知里，同时也给你梳理下JavaScript中播放音频的通用方法～

修改后的通知代码（带音效） #

我已经在你的原代码基础上，添加了播放alarm.mp3的逻辑，你可以直接用：

function notifyMe() {
  if (!("Notification" in window)) {
    alert("This browser does not support system notifications");
  } else if (Notification.permission === "granted") {
    notify();
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      if (permission === "granted") {
        notify();
      }
    });
  }

  function notify() {
    // 创建音频实例并播放
    const notificationSound = new Audio('alarm.mp3');
    // 添加错误处理，避免文件加载失败影响通知逻辑
    notificationSound.onerror = function() {
      console.error('音效文件加载失败，请检查路径是否正确');
    };
    notificationSound.play().catch(err => {
      console.error('无法播放音效:', err);
    });

    var notification = new Notification('TITLE OF NOTIFICATION', {
      icon: 'http://carnes.cc/jsnuggets_avatar.jpg',
      body: "Hey! You are on notice!",
    });

    notification.onclick = function () {
      window.open("http://carnes.cc");
    };

    setTimeout(notification.close.bind(notification), 7000);
  }
}

notifyMe();

关键改动说明： #

• 在notify函数开头创建了Audio实例，指向你的alarm.mp3文件
• 添加了错误监听和播放异常捕获，方便排查路径错误、浏览器禁止播放等问题

JavaScript播放音频的通用方法 #

下面给你介绍几种常用的播放音频的方式，以及需要注意的细节：

1. 直接创建Audio对象（最常用） #

这种方式适合快速播放短音效（比如通知音、提示音），代码简洁：

// 创建音频实例
const audio = new Audio('your-audio-file.mp3');
// 播放
audio.play().catch(err => {
  console.error('播放失败:', err);
});
// 其他控制：暂停、循环、音量
audio.pause(); // 暂停
audio.loop = true; // 设置循环播放
audio.volume = 0.5; // 音量范围0-1

2. 使用HTML5 <audio>元素 #

如果需要更复杂的控制（比如显示播放进度、自定义播放界面），可以先在HTML中定义<audio>标签：

<audio id="myAudio" src="your-audio-file.mp3" controls></audio>

然后在JS中获取元素并操作：

const audioElement = document.getElementById('myAudio');
audioElement.play(); // 播放
audioElement.pause(); // 暂停
audioElement.currentTime = 10; // 跳转到第10秒

3. 重要注意事项 #

• 自动播放限制：现在主流浏览器都禁止无用户交互的自动播放，所以你的notifyMe函数最好绑定到用户的点击、触摸等操作上（比如按钮点击事件），否则可能会播放失败。
• 文件格式兼容性：不同浏览器支持的音频格式略有差异，推荐优先使用MP3（兼容性最好），也可以同时提供多种格式做降级：

  const audio = new Audio();
  if (audio.canPlayType('audio/mpeg')) {
    audio.src = 'your-audio-file.mp3';
  } else if (audio.canPlayType('audio/ogg')) {
    audio.src = 'your-audio-file.ogg';
  }
  

• 资源预加载：如果需要立即播放，可以提前加载音频：

  const audio = new Audio('your-audio-file.mp3');
  audio.preload = 'auto'; // 预加载音频资源
  

内容的提问来源于stack exchange，提问作者Arnav Nath