Question

我正在为onmouseover工作，为学校项目播放一首歌。我已经找到onmouseover和onmouseout的代码但是使用Alerts仍然无法正常工作。

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

geometry

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

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

Answer 1

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

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

Answer 2

使用jquery简化操作，为按钮定义类并获取播放或暂停的音频标记元素属性。

<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停止播放歌曲

2 个答案: