Question

以下是一个示例代码：

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

<audio>
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

这是我提供的示例代码的小提琴：

https://jsfiddle.net/qkuLkqao/2/

我发现的所有示例都使用鼠标悬停，我的版本比这更简单，当用户点击某个链接时播放声音文件。

我怎样才能做到这一点？

我对SO和Google进行了一些研究，但我找不到任何相关内容（很可能是我没有正确搜索）。

Answer 1

您可以将js用于manipulate the audio element ...

＆＃13;

let audio = document.getElementById("audio");

let link = document.getElementById("audioLink");

link.onclick = () => {
  audio.play();
};

＆＃13;

<a id="audioLink" href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

<audio id="audio">
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

＆＃13;

请注意，链接元素并不意味着是音频按钮..您可以使用按钮元素代替..

Answer 2

请尝试。

document.querySelectorAll('a')[0].addEventListener('click', player, false)

function player() {
    document.querySelector('audio').play()
}

这是在Link 1上播放的。

Answer 3

您可以在onclick上声明使用a tag并调用函数来播放该文件。

请注意。您可以将音频文件的src路径添加为标记中的任何数据属性，并使用它来播放相关的audio文件

＆＃13;

function playThis (el) {
 
    if(window.audio) {
       audio.pause();
    }
    window.audio = new Audio (el.getAttribute("data-src"));
    window.audio.play();
}

＆＃13;

<a href="#" id="1" data-src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" onclick="playThis(this)">Link 1</a>
<a href="#" id="2" data-src="http://www.evidenceaudio.com/wp-content/uploads/2014/10/monsterslap.mp3" onclick="playThis(this)">Link 2</a>
<a href="#" id="3" data-src="http://www.evidenceaudio.com/wp-content/uploads/2014/10/lyricchords.mp3" onclick="playThis(this)">Link 3</a>

＆＃13;

Answer 4

var links = document.getElementsByTagName('a'),
    audio = document.getElementById('a-on-click'),
    clickHandler = function () {
        audio.play();
    }
;

for (var i in links) {
    links[i].addEventListener('click', clickHandler);
}

https://jsfiddle.net/qkuLkqao/14/

某些链接上的音频播放点击

4 个答案: