鼠標懸停並單擊時播放單獨聲音的有效方法？

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/