html - 单击文本时播放声音

Question

我正在尝试编写一个页面，当您单击特定文本时，它会播放特定的 mp3 文件(例如，单击文本 1，它会播放声音 1，单击文本 2，它会播放声音 2……等等)。经过一番研究，我发现了以下代码，但意识到如果代码被多次复制，它将无法按预期工作。所有文本将只播放条目中相同的第一个 mp3 文件。

 <audio id="audio" src="mp3 file 1" autostart="false" ></audio>
 <a onclick="playSound();"> Text 1</a>

 <audio id="audio" src="mp3 file 2" autostart="false" ></audio>
 <a onclick="playSound();"> Text 2</a>

 <audio id="audio" src="mp3 file 2" autostart="false" ></audio>
 <a onclick="playSound();"> Text 3</a>

Answer 1

您可以使用文本将 data-audio-url 属性添加到您的跨度:

<span data-audio-url="mp3_file_1.mp3">Text1</span>
<span data-audio-url="mp3_file_2.mp3">Text2</span>
<span data-audio-url="mp3_file_3.mp3">Text3</span>

并添加一个 init 函数来初始化您的声音播放。通过向每个跨度添加 onclick，使用 data-audio-url

(我正在使用 jquery，但也可以使用纯 javascript)

函数 initSounds() {

$("[data-audio-url]").each(
    function(){
        $(this).on('click', function() {
            var mp3Url = $(this).attr('data-audio-url');
            var a = new Audio(mp3Url);
            a.play();
        });
    }
);

}

这段代码在做什么:

为了识别将在点击时播放音频的对象，我们为它们添加了一个属性(data-audio-url="xxx")。
在我们的 javascript 中，我们搜索所有具有此属性的元素 $("[data-audio-url]")然后我们为每个找到的元素添加一个 onclick 事件，您可以直接使用 .on('click', function)或者像我一样为每个循环。
在 onclick 中，我阅读了网址 $(this).attr('data-audio-url');然后用这个 url var a = new Audio(mp3Url); 创建一个新的音频对象

这是 simple fiddle ，如果你想停止最后一个声音，你必须添加一些额外的代码。

引用文献:

Audio API

JQuery

HTML data-* attribute

JQuery Attribute Selector

JQuery.each()

JQuery.on()

JQuery.attr()

编辑:
您必须将代码放在 onload 函数中(就像在 fiddle 中一样)，或者将 initSounds() 函数复制到 js 文件中并在 onload 函数中调用该函数。

EIDT2:
如果你想用你的函数来做，你可以把你的 playSound() 函数的头改成这样:
函数 playSound(elementId){ ...

然后在函数里面替换 audio (id) by elementId在您的 html 中，您必须将音频元素的 ID 更改为独一无二的 onclick="playSound()"。通过 onclick="playSound(audioElementId)"其中 audioElementId 是所需音频元素的 id。