HTML5：在JS中控制音频播放时报错——DOMException: play() failed because the user didn‘t interact with the document

说明

在谷歌浏览器中打开，在JS中指定 src，鼠标移入 div 音频播放，移出时暂停

页面

<style>
    div {
        width: 100px;
        height: 100px;
        background: tomato;
        margin: 100px auto;
    }
</style>

<div id="test"></div>
<audio></audio>

<script>
var div = document.getElementById("test");
var audio = document.getElementsByTagName("audio")[0];
div.onmouseenter = function () {
  audio.src = "./source/Travel.mp3";
  audio.play();
};
div.onmouseleave = function () {
  audio.pause();
};
</script>

问题

移入时没有播放，浏览器报错：DOMException: play() failed because the user didn’t interact with the document

处理

谷歌浏览器要求：在用户没有与页面进行交互前，不允许播放音频
此时点击一下页面任何的位置，再次操作音频即可播放