我可以使用 HTML5 同时播放多次相同的声音吗?

html5web developmentfront end technology更新于 2024/5/22 23:08:17

假设您想开发一个问答应用。在这个应用中，如果您点击了错误的选项，后台就会播放一段音频，提示"答案错误"。但是，如果您同时点击两个或多个错误的选项，您将无法听到声音，因为错误答案被多次点击了。那么，如何解决这个问题呢?

在本文中，您将了解是否可以使用 HTML5 同时播放多次相同的声音。

答案是可以的!!!

有两种方法可以实现这一点。

我们将在后续章节中介绍这些方法。

使用 cloneNode() 方法

使用此方法，我们只需复制或克隆想要重复播放的音频即可。

示例


<html >
<head>
   <title> cloneNode() method </title>
</head>
<body>
   <h1> cloneNode() method </h1>
   <button onclick = "myOperation() "> Options </button>
   <audio id="example" controls autoplay>
      <source src="/example/audio.mp3" type="audio/mpeg">
      <source src="/example/audio.ogg" type="audio/ogg">
   </audio>
   <script>
      function myOperation() {
         const object = document.getElementById("example");
         const copy = object.cloneNode(true);
         document.body.appendChild(copy);
      }
   </script>
</body>
</html>

点击选项按钮后，由于您已设置自动播放控件，音频将被复制并播放。点击按钮的次数越多，音频就会同时播放相同的次数。

<button> 标签用于在 HTML 页面上添加可点击的按钮。它具有各种属性，例如类型、名称、表单操作、值、自动对焦、表单等。

示例

<button type = "submit" > Submit </button>

onclick 事件在用户点击包含该事件的元素时发生。

语法

在 HTML 中，<element onclick = "myCode" >
在 JavaScript 中，object.onclick = myFunction() { code};

示例

<button onclick = "getElementById( ‘example’)" > Example </button>

<audio> 标签用于将音频添加到您的 HTML 页面。它具有 ID、控件等属性。控件属性用于添加音频控件，例如播放、暂停、音量。自动播放属性用于自动播放音频。

<source> 元素允许用户指定音频源文件和要播放的音频类型。

语法

<audio id= " "  controls = " ">
   <source src = "source of audio" type = " " >
</audio>

示例

<audio id = "example" controls autoplay >
   <source src = "example.ogg" type = "audio/ogg>
</audio>

cloneNode() 方法用于创建HTML元素的副本。它会复制元素的所有属性和值。

语法

element.cloneNode()

参数

true, false

如果要复制元素的子元素，请将参数保留为 true。否则，将其设置为 false。

示例

<script>
   const node = document.getElementById (‘ demo’);
   const clone = node.cloneNode(true);
</script>

appendChild() 方法允许用户添加一个元素或节点，使其成为父节点或元素的最后一个子节点。

在我们的代码中，它用于将音频副本附加到文档主体。

语法

node.appendChild()

参数

要附加的节点或元素。

示例

创建一个 <div> 元素并将其附加到文档主体。

<script>
   let div = document.createElement ("div");
   let node = document.createElement( "This is an example");
   div.appendChild(node);
   document.body.appendChild(div);
</script>

通过预加载多个声音版本

另一种多次播放声音的方法是预加载多个声音版本。在本节中，我们将探讨预加载多个声音版本的方法 -

示例

let n = 3;
let sounds = []; 
const sources = [ "audio1.mp3", "audio2.mp3", "audio3.mp3"];
for (i = 0; i < n; i ++)
   sounds.push([]);

for (i = 0; i < audioSource.length; i ++)
   for (j = 0; j < n; j ++)
      sounds[j].push(new Audio(sources[i])); 

let play = []; 
for (i = 0; i < audioSources.length; i ++)
   play[i] = 0; 

playSound = function (id, vol) {
   if (vol <= 1 && vol >= 0)
      sounds[play[id]][id].volume = vol;
   else
      sounds[play[id]][id].volume = 1;

   sounds[play[id]][id].play();
   ++ play[id];    

   if (play[id] >= n)
      play[id] = 0;
}

此处，

声明变量 n 来指定要重复声音的次数。

变量 sounds 为所有声音创建一个数组。

for 循环用于获取 n 个不同的声音副本。

push() 方法用于向数组添加新项。

示例

const array = [ "this", "is", "an"];
array.push( "example");

Audio() 对象创建并返回一个新的 HTML 音频。

语法

new Audio()

变量 play 指定当前播放的声音版本。为此，我们再次使用了 for 循环。

playSound 函数用于指示浏览器播放声音。

volume 属性设置当前播放音频的音量。

语法

audio.volume = value

Value

它是一个指定音量的数字。它必须介于 0 到 1 之间。

示例

1 表示最高音量，即 100%，而 0 表示最低音量，即静音。

<script>
   let div = document.createElement ("div");
   let node = document.createElement( "This is an example");
   div.appendChild(node);
   document.body.appendChild(div);
</script>

&& 是逻辑运算符。如果两个布尔操作数都为真，则该运算符返回 true，否则返回 false。

示例

<p id = "example"></p>
<script>
   let a= 4;
   let b = 6;
   document.getElementById( "example" ).innerHTML=
   (a < 5 && b > 5) + "<br>" + (a < 5 && b < 5);
</script>