Question

请记住，我对JavaScript很陌生，而且我对此几乎一无所知。我也cross-posted this to Reddit。

我正在编辑网站，我希望在链接悬停时播放音频文件。我目前有：

function playclip() {
if (navigator.appName == "Microsoft Internet Explorer" && 
(navigator.appVersion.indexOf("MSIE 7")!=-1) || 
(navigator.appVersion.indexOf("MSIE 8")!=-1)) {
if (document.all)
 {
  document.all.sound.src = "../audio/hover.mp3";
 }
}

else {
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}
}
}

在名为sound-mouseover.js的文件中，在＆＃34; js＆＃34;文件夹在网站的根目录。

然后我

<audio>
<source src="audio/hover.mp3"></source>
<source src="audio/hover.ogg"></source>
</audio>

就在HTML文件中的结束标记之前。

最后，我有

onmouseover="playclip();"

在所有<href>标签中，我希望播放声音。

这一切都很好，但是......

我希望它的工作方式与＆＃34; Cloned <audio>完全相同，每个菜单项都有一个＆＃34;关于this website的部分。有人知道怎么做吗？我想保留mp3和ogg文件，因为它增加了Web浏览器支持的范围。

我还想要一个不同的声音文件（仍然使用＆＃39; .ogg＆＃39;和＃39; .mp3＆＃39;文件）来点击所说的链接。

我可以看到我正在编辑的网站here。我想在悬停在Discord / Twitter链接上时播放一个声音文件，在实际点击它时播放不同的声音。

Answer 1

只需检测浏览器可以播放的类型，并初始化新的successRedirect节点，并将Audio设置为该支持类型的音频文件位置。

然后在src上，播放悬停项目的音频节点。

以下是您要完成的工作示例：

mouseover

JSFiddle演示：https://jsfiddle.net/18dy5x6q/2/

编辑：错过了点击播放不同声音的部分。

以下是一个例子：

var menu = document.querySelector('.menu')

var items = {
  one: {
    ogg: 'https://instaud.io/17my/download',
    mp3: 'https://instaud.io/17mz/download'
  },
  two: {
    ogg: 'https://instaud.io/17mA/download',
    mp3: 'https://instaud.io/17mB/download'
  }
}

var canPlay = (new Audio()).canPlayType('audio/mpeg') ? 'mp3' : 'ogg'
var type = canPlay === 'mp3' ? 'audio/mpeg' : 'audio/ogg'

for (var id in items) {
  var item = items[id]
  var audio = new Audio()
  audio.type = type
  audio.src = item[canPlay]
  item.audio = audio
}

menu.addEventListener('mouseover', function(event) {
  var target = event.target
  var id = target.dataset.id
  if (id) {
    items[id].audio.play()
  }
})

JSFiddle演示：https://jsfiddle.net/ckd0o5of/1/

鼠标悬停并单击时播放单独声音的有效方法？

1 个答案: