在 onmouseover 播放歌曲并在 onmouseout 停止歌曲

Question

我正在为学校项目制作鼠标悬停播放歌曲。我已经找到了 onmouseover 和 onmouseout 的代码，但是对于 Alerts 它仍然无法正常工作。

如果你能帮助我，那就太好了。非常感谢！

document.getElementById("RockButton").onmouseover = function() {
   mouseOver()
};
 document.getElementById("RockButton").onmouseout = function() {
   mouseOut()
};

function mouseOver() {
   alert('Hello out there!')
}
function mouseOut() {
   alert('Hello out there!')
}

<div id="PaginaDrieTatjana" style="display:none;">
  <h1>Kies soort dans</h1>

  <div id="Rock">
    <h3>Rock Dance</h3>
    <img src="Tatjana/Een.jpg" style="width: 100%;">
    <div id="RockButton">
        <p>Kiezen</p>
    </div>
  </div >

  <div id="Pop">
    <h3>Pop Dance</h3>
    <img src="Tatjana/Twee.jpg" style="width: 100%;">
    <div id="PopButton">
        <p>Kiezen</p>
    </div>

  </div>

Answer 1

看看这个指南： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

它为 HTML 和 JavaScript 提供代码以在您的网页中实现音频播放器。您只需将正确的组件粘贴到代码段中即可。

Answer 2

使用 jquery 来简化事情，为按钮定义 class 并获取要播放或暂停的音频标签元素属性。

<div id="Rock">
     <h3>Rock Dance</h3> 
    <img src="Tatjana/Een.jpg" style="width: 100%;">
    <div class="Button">
        <p>Kiezen</p>
        <audio id="RockDanceAudio" src="rock_audio.mp3"></audio>
    </div>
</div>
<div id="POP">
     <h3>Rock Dance</h3> 
    <img src="Tatjana/Een.jpg" style="width: 100%;">
    <div class="Button">
        <p>ROFL</p>
        <audio id="PopDanceAudio" src="pop_audio.mp3"></audio>
    </div>
</div>

并使用这个脚本

$('.Button').mouseover(function () {
    $audio_tag_id = $(this).find('audio').attr('id');
    document.getElementById($audio_tag_id).play();
});
$('.Button').mouseout(function () {
    $audio_tag_id = $(this).find('audio').attr('id');
    document.getElementById($audio_tag_id).pause();
});

它适用于 n 个按钮，编码愉快:)

在 onmouseover 播放歌曲并在 onmouseout 停止歌曲

Play song at onmouseover and stop song at onmouseout

javascript

onmouseover