javascript - 页面audio播放提示音?

Question

想在页面有提醒消息，目前做了个隐藏的audio，想通过js获取到然后play一下这样提示音就出来了。但是会出现这个报错，并不能通过这个方式。Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

Answer 1

MDN 媒体和 Web Audio API 的自动播放指南

Answer 2

这个错误通常出现在尝试自动播放音频或视频时，特别是在没有用户与页面进行交互的情况下。许多现代浏览器为了提升用户体验和避免不必要的媒体噪音，实施了自动播放策略。这意味着在没有用户明确的交互行为（如点击、触摸等）之前，音频或视频可能不会自动播放。

为了解决这个问题，你可以尝试以下方法：

1. 用户交互后再播放：在播放音频之前，确保用户已经与页面进行了某种形式的交互。例如，你可以在按钮点击事件的处理函数中播放音频。
2. 使用playsinline和muted属性：在<audio>标签中添加playsinline和muted属性。playsinline用于在移动设备上内联播放音频，而muted属性表示音频默认是静音的。虽然这不会解决自动播放的问题，但它可以帮助改善用户体验。
3. 检查浏览器策略：不同的浏览器可能有不同的自动播放策略。确保你了解并遵守目标浏览器的自动播放指南。
4. 使用autoplay属性：尽管不推荐依赖autoplay属性，因为它可能受到浏览器策略的限制，但你可以尝试在<audio>标签中添加autoplay属性。然而，请注意，这可能不会在所有情况下都有效。
5. 错误处理：使用Promise的错误处理回调来捕获并处理播放失败的情况。这样，即使音频无法自动播放，你的代码也不会因此而崩溃。

示例代码：

<audio id="myAudio" src="your_audio_file.mp3" preload="auto" muted></audio><button onclick="playAudio()">Play Audio</button><script>  function playAudio() {    var audio = document.getElementById('myAudio');    audio.muted = false; // 取消静音    audio.play().catch(function(error) {      console.error('Failed to play audio:', error);    });  }</script>

在这个示例中，音频文件默认是静音的，并且只有在用户点击按钮后才会取消静音并播放。同时，我们还添加了一个错误处理回调来捕获可能的播放错误。