数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 HTML5 可以同时播放同一个声音多次吗？
假设您想制作一个测验应用程序。在其中，如果您点击了错误的选项，则会播放背景音频，提示“错误答案”。但是，如果您同时点击了两个或多个错误的选项，则您将无法听到多次“错误答案”的声音，因为它们在同一时间被点击。那么，如何解决这个问题呢？
在本文中，您将了解使用 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 页面上添加可点击的按钮。它具有各种属性，例如 type、name、formaction、value、autofocus、form 等。
示例
<button type = “submit” > Submit </button>
onclick 事件发生在用户点击包含该事件的元素时。
语法
在 HTML 中，<element onclick = “myCode” >
在 Javascript 中，object.onclick = myFunction() { code};
示例
<button onclick = “getElementById( ‘example’)” > Example </button>
<audio> 标签用于向 HTML 页面添加音频。它具有 id、controls 等属性。controls 属性用于添加音频控件，例如播放、暂停、音量。autoplay 属性用于自动播放音频。
<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() 方法允许用户添加一个元素或节点，该元素或节点成为父节点或元素的最后一个子元素。
在我们的代码中，它用于将音频的副本附加到文档的 body 中。
语法
node.appendChild()
参数
要附加的节点或元素。
示例
创建一个<div> 元素并将其附加到文档的 body 中。
<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
值
它是一个数字，指定音量。它必须介于 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>
&& 是一个逻辑运算符。如果两个布尔操作数都为真，则运算符返回真，否则返回假。
示例
<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>
++ play[id] 用于指定浏览器，在每次音频播放后，都会递增，以便播放其他版本。
结论
在本文中，介绍了使用 HTML5 和 Javascript 同时多次播放同一个音频的不同方法和途径。
2K+ 浏览量
