javascript - 为什么我必须点击网页才能激活 javascript

Question

为什么每次刷新后都必须点击一次页面才能激活音频？我无法弄清楚发生了什么。刷新页面后音频播放器无法工作。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<div class="musical-container">
  <div class="musicHolder">
    Mouse over Image to play Music 1
    <audio preload="auto">
      <source src="https://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.mp3" type="audio/mpeg">
      <source src="https://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_001.ogg" type="audio/ogg">
      Your browser does not support this audio format.
    </audio>
    <img src="https://www.lucedigitale.com/blog/wp-content/uploads/2013/07/audio.png">
  </div>
  
  <br><br>
  
  <div class="musicHolder">
    Mouse over Image to play Music 2
    <audio preload="auto">
      <source src="https://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_002.mp3" type="audio/mpeg">
      <source src="https://www.lucedigitale.com/blog/wp-content/uploads/2013/07/danosongs_002.ogg" type="audio/ogg">
      Your browser does not support this audio format.
    </audio>
    <img src="https://www.lucedigitale.com/blog/wp-content/uploads/2013/07/audio.png">
  </div>
</div>

$(function() {
  $('.musical-container img').hover(function() {
    $(this).prev()[0].play()
  }, function() {
    $(this).prev()[0].pause()
  })
})

标签： javascripthtmljqueryhtml5-audio