0

我有一个带有图像的页面，点击它会播放声音。但是当我点击我的页面时，如果我在顶部，如果我在页面底部，我的页面会下降，无论出于何种原因。

我尝试了此处建议的所有解决方案：如何在不将用户发送到页面顶部的情况下触发 javascript playsound 事件 onclick？

但似乎没有一个工作。我已经尝试将 javascript 放在 head 或 body 标记中，但无论我做什么，问题似乎都仍然存在。我只需要一个图像在单击时播放声音，而不是移动（我将在页面上有数百个小图像，如果它们继续移动我的页面，向上或向下滚动将会很多）。

我究竟做错了什么？

这是我的代码：

` 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro" lang="ro">

<html>

<head>
<title>Easy and Simple Learning    </title>

<script language="javascript" type="text/javascript">

 function playSound(soundfile) 
{document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";}

</script>

</head>

<body>

<span id="dummy"></span>

<a href="#" onclick="playSound('sound.mp3');"><img src="image.png" />    </a>

</body>

</html>`

PS：我正在使用 Chrome，这可能是个问题吗？提前谢谢了。

4

3 回答 3

0

与其使用a标签，不如直接使用div?

<div onclick="playSound('sound.mp3');" style="cursor: pointer;">
  <img src="image.png" />
</div>

这避免了必须覆盖默认链接行为。我还建议将 JavaScript 和 CSS 移动到单独的文件中，以使代码更易于管理。

编辑 - 再试一次：

尝试最初将音频添加到页面并在点击时触发播放事件。

HTML：

<div onclick="playSound('myAudio');" style="cursor: pointer;">
  <img src="image.png" />
  <audio id="myAudio">
    <source src="sound.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
  </audio>
</div>

JS：

function playAudio(audioId) {
  var audio = document.getElementById(audioId);
  var isPlaying = !audio.paused && !audio.ended && 0 < audio.currentTime;

  if (isPlaying === false) {
    audio.play();
  } else {
    audio.pause();
  }
}

奖励，再次单击图像将暂停音频。JSFiddle

于 2013-05-12T16:43:43.667 回答
0

在anchor()之后关闭标签

跳过 href="#" 这将导致浏览器跳转到一个不存在的命名锚点。可能导致这种闪烁。

而是使用这个

<a href="javascript:void(0);" onclick="playSound('sound.mp3');">
your label....
</a>
<span> <!-- missing ? -->
于 2013-05-12T15:48:15.923 回答
0

尝试在 onclick 事件中添加“return false”。它告诉浏览器它不必执行与 onclick 事件关联的默认操作。特别是，在您的代码中更改onclick="playSound('sound.mp3');">为。onclick="playSound('sound.mp3'); return false;">

于 2017-03-09T12:47:04.103 回答