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

您可以使用text：

为您的跨度添加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>

添加初始化函数以初始化您的声音播放。通过使用data-audio-url

为每个范围添加onclick

（我正在使用jquery，但也可以使用纯javascript）

function 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 =＆＃34; xxx＆＃34;）。
在我们的javascript中，我们搜索具有此属性$("[data-audio-url]")的所有元素然后我们为每个找到的元素添加一个onclick事件，你可以直接使用.on('click', function)或像我一样为每个循环执行此操作。
在onclick中，我阅读了网址$(this).attr('data-audio-url');，然后使用此网址var a = new Audio(mp3Url);

创建一个新的音频对象

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

参考：

Audio API
JQuery
HTML data-* attribute
JQuery Attribute Selector
JQuery.each()
JQuery.on()
JQuery.attr()

修改
你必须将代码放在onload函数中（比如在小提琴中），或者在js文件中复制initSounds（）函数并在onload函数中调用函数。

<强> EIDT2：
如果你想用你的函数来做，你可以将playSound（）函数的头部更改为： function playSound（elementId）{...

然后在函数内部用audio替换elementId（id）在你的html中，你必须更改一些独特的音频元素的ID和onclick="playSound()" onclick="playSound(audioElementId)"，其中audioElementId是所需音频元素的id。

Answer 2

首先，将每个<audio>代码中的ID值更改为唯一（例如id="audio1"，id="audio2"，id="audio3"）。

然后编写JavaScript以通过id引用这些标记并调用play()。例如，document.getElementById('audio1').play()播放由<audio id="audio1" ...>指定的文件。

Answer 3

我能想到的最简单方法是使用SoundPlayer.js。

将其加载到您的html：

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/SoundPlayer.js"></script>

将数据属性添加到包含音频文件源的链接：

<a href="#" data-audio-src="file1.mp3">Text 1</a>
<a href="#" data-audio-src="file2.mp3">Text 2</a>
<a href="#" data-audio-src="file3.mp3">Text 3</a>

使用循环绑定点击事件以及预加载声音（1）：

(1)

const player = new SoundPlayer();

const elements = document.querySelectorAll('[data-audio-src]');

for(let element of elements) {

  const audioSrc = element.getAttribute('data-audio-src');

  player.load(audioSrc);

  element.onclick = function () {

    player.get(audioSrc).play();

  }

}

// OR 

(2)

const player = new SoundPlayer();

const elements = document.querySelectorAll('[data-audio-src]');

for(let element of elements) {

  const audioSrc = element.getAttribute('data-audio-src');

  element.onclick = function () {

    player.load(audioSrc).play();

  }

}

点击文字时播放声音

3 个答案: