获得用户播放音频的权限后是否可以播放音频文件？

Question

我尝试在没有任何用户交互的情况下播放音频并收到错误：

未捕获（承诺中）DOMException：当前上下文中的用户代理或平台不允许播放方法，可能是因为用户拒绝了权限。`

这是我的代码：

<audio id="beep">
    <source src="~/Content/Sounds/beep.mp3" type="audio/mp3">
</audio>

<script>
var playAudio = $("#beep")[0];
playAudio.play();
</script>

据我了解，当前的浏览器拒绝在没有明确用户交互的情况下播放音频。是否有可能在页面加载时询问用户播放音频的权限，并且仅在用户明确许可后加载页面，然后在我需要时在 JS 中调用此代码？

Answer 1

用户交互基本上是指用户单击页面上的任意位置。以下示例具有

<dialog>

提示用户允许音频播放或拒绝播放。示例中注释了详细信息。响应式它很不错，但如果在全页模式下查看，它看起来很棒。

// Reference <dialog>
const modal = document.querySelector("dialog");
// Reference <form>
const io = document.forms[0];
// Load the audio object
const mp3 = new Audio("https://glsbx.s3.amazonaws.com/-/dd.mp3");

// Open <dialog>
modal.showModal();
// Pre-adjust audio volume
mp3.volume = 0.5;

/**
 * This event handler determines if the audio will be played depending
 * on which <button> the user clicked.
 * @param {object} event - Event object
 */
const player = event => {
  // Determine which element the user clicked
  const clk = event.target;
  // If the user clicked button#no...
  if (clk.id === "no") {
    // close the <dialog> and...
    modal.close();
    // end the function
    return;
  }
  // If the user clicked button#yes...
  if (clk.id === "yes") {
    // close the <dialog>...
    modal.close();
    // play the audio and...
    mp3.play();
    // end the function
    return;
  }
};

/*
  Register the <form> to listen for any "click" events fired in 
  itself
  or any of it's children.
  When the "click" event is triggered function player() will be called.
*/
io.addEventListener("click", player);

:root {
  font: 2ch/1.2 "Segoe UI";
}

dialog {
  width: 50vw;
  padding: 0.75rem 1rem 1.25rem;
  border: 1.51515px outset rgb(240, 240, 240);
  border-radius: 8px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

dialog::backdrop {
  background: rgba(38, 57, 77, 0.4)
}

fieldset {
  padding: 0 1.25rem;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

legend {
  margin-bottom: -0.25rem;
}

sup {
  position: relative;
  top: -0.2em;
  vertical-align: top;
  font-size: smaller;
}

button {
  float: right;
  width: 4rem;
  padding: 4px;
  font: inherit;
  cursor: pointer;
}

details {
  font-size: smaller;
}

summary {
  display: block;
  cursor: pointer;
}

summary::before {
  content: '✤';
  display: inline-block;
  margin-right: 1ch;
  transition: 0.2s;
}

details[open] summary::before {
  transform: rotate(45deg);
}

footer {
  clear: both;
  padding: 1rem 0;
}

#yes {
  margin-left: 0.25rem;
}

<dialog>
  <form>
    <fieldset>
      <legend>Autoplay Policy</legend>
      <p>In compliance with autoplay policy of your browser<sup>✤</sup> this site will only play audio with your explicit permission. Please choose your preference.</p>
      <button id="yes" type="button">Permit</button>
      <button id="no" type="button">Deny</button>
      <footer>
        <details>
          <summary>More on autoplay policies</summary>
          <ul>
            <li><a href="https://developer.chrome.com/blog/autoplay" target="_blank">Chrome</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide" target="_blank">Firefox</a></li>
            <li><a href="https://webkit.org/blog/6784/new-video-policies-for-ios/" target="_blank">iOS</a></li>
          </ul>
        </details>
      </footer>
    </fieldset>
  </form>
</dialog>