数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
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() 方法使用户能够添加一个元素或节点，该元素或节点成为父节点或元素的最后一个子元素。
在我们的代码中，它用于将音频副本附加到文档的主体。
语法
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
值
它是指定音量的数字。它必须介于 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+ 浏览量
