javascript - 无法使用JQuery播放音频

我正在尝试在鼠标Enter事件上播放音频，但是没有音频播放。它可以在Codepen(http://codepen.io/adamfaraj/pen/QpRjKL)上运行，但是在我将代码导入Atom时却无法正常工作。
这是Codepen代码。

var nas_mp3 = $("#nasmp3")[0];
$("#nas")
.mouseenter(function() {
nas_mp3.play();
});
var nas_mp3 = $("#nasmp3")[0];
$("#nas")
.mouseout(function() {
nas_mp3.pause();
});

这是我在Atom中拥有的
HTML:

<script src="jquery-3.2.1.min.js"></script>
<script src="audio.js" type ="text/javascript" ></script>

<div id="nas-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Nas-04.jpg/220px-Nas-04.jpg" id="nas">
<span id="nas-text">Nas</span>
</div>
<audio id="nasmp3" preload="auto">
<source src="https://old.undergroundhiphop.com/media/audios/320kbps/oldschool/Nas_Represent_OldSchool_320VBR.mp3"></source>
</audio>

Audio.js文件:

var nas_mp3 = $("#nasmp3")[0];
$("#nas")
.mouseenter(function() {
nas_mp3.play();
});
var nas_mp3 = $("#nasmp3")[0];
$("#nas")
.mouseout(function() {
nas_mp3.pause();
});

有任何想法吗？

最佳答案

第一个解决方案:

    <div id="nas-container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Nas-04.jpg/220px-Nas-04.jpg" id="nas">
        <span id="nas-text">Nas</span>
        </div>
        <audio id="nasmp3" preload="auto">
        <source src="https://old.undergroundhiphop.com/media/audios/320kbps/oldschool/Nas_Represent_OldSchool_320VBR.mp3"></source>
        </audio>
<!-- Load all js in the end of document -->
        <script src="jquery-3.2.1.min.js"></script>
        <script src="audio.js" type ="text/javascript" ></script>

第二种解决方案:

在您的 audio.js 中，将所有代码放入

$(document).ready({
/*your code here*/
});

第三种解决方案:
将其放入您的 audio.js

$(document).ready(function(){
    var nas_mp3 = document.getElementById('nasmp3');
    $('#nas').on('mouseenter',function(){
        nas_mp3.play();
    }).mouseout(function(){
        nas_mp3.pause();
    });
});

请享用。

关于javascript - 无法使用JQuery播放音频，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43441029/