使用JQuery播放音频

Question

我试图在鼠标输入事件上播放音频，但没有音频播放。它适用于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(); 
}); 

下面是我在凌动 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(); 
}); 

任何想法？

Answer 1

解决方案一：

<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*/ 
}); 

第三解决方案的所有代码： 把它放在你音频.js

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

享受。