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

请记住，我对JavaScript非常陌生，我对它几乎一无所知。我也是

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

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的文件中，位于网站根目录下的“js”文件夹中

那么我有

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

在所有的

标记中，我希望播放声音

这一切都很好，但是

我希望它能像“克隆

”一样工作。有人知道怎么做吗？我想保留mp3和ogg文件，因为它增加了web浏览器的支持范围

我还想要一个不同的声音文件（仍然使用“.ogg”和“.mp3”文件）在单击所述链接时播放

可以看到我正在编辑的网站。我希望在Discord/Twitter链接上悬停时播放一个声音文件，在实际单击它们时播放另一个声音。
只需检测浏览器可以播放的类型，并将
src
设置为支持的音频文件位置，初始化一个新的
音频
节点类型

然后在
鼠标上方
，只需播放悬停项目的音频节点

下面是一个您试图完成的工作示例：

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()
  }
})

jsiddle演示：

编辑：错过了关于单击时播放不同声音的部分

下面是一个例子：

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

var sounds = {
  hover: {
    ogg: 'https://instaud.io/17my/download',
    mp3: 'https://instaud.io/17mz/download'
  },
  click: {
    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 k in sounds) {
  var item = sounds[k]
  var audio = new Audio()
  audio.type = type
  audio.src = item[canPlay]
  item.audio = audio
}

menu.addEventListener('mouseover', function(event) {
  var target = event.target
  if (target.nodeName === 'LI') {
    sounds.hover.audio.play()
  }
})

menu.addEventListener('click', function(event) {
  var target = event.target
  if (target.nodeName === 'LI') {
    sounds.click.audio.play()
  }
})

JSFIDLE demo:
我还希望它在悬停后单击时播放不同的声音文件。我该怎么做？（我对javascript一无所知。对不起。）虽然你的方法正是我想要的，但它似乎对图像不起作用。我的链接是图像（悬停时它们会变成不同的文件）。你能解释一下我是怎么做的吗？
var menu = document.querySelector('.menu')

var sounds = {
  hover: {
    ogg: 'https://instaud.io/17my/download',
    mp3: 'https://instaud.io/17mz/download'
  },
  click: {
    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 k in sounds) {
  var item = sounds[k]
  var audio = new Audio()
  audio.type = type
  audio.src = item[canPlay]
  item.audio = audio
}

menu.addEventListener('mouseover', function(event) {
  var target = event.target
  if (target.nodeName === 'LI') {
    sounds.hover.audio.play()
  }
})

menu.addEventListener('click', function(event) {
  var target = event.target
  if (target.nodeName === 'LI') {
    sounds.click.audio.play()
  }
})