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

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

我再有

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

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

最后，我在所有的<href>标签我想要的声音在播放有

onmouseover="playclip();" 

。

这一切工作正常，但是......

我想这工作方式与this website上的“克隆<audio>，每个菜单项一个”部分完全相同。有人知道如何去做这件事吗？我想保留mp3和ogg文件，因为它增加了网页浏览器支持的范围。

我还希望在点击链接时播放不同的声音文件（仍然使用'.ogg'和'.mp3'文件）。

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

Answer 1

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

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

这里是你要完成的工作例如：

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/18dy5x6q/2/

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

下面是一个例子：

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

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