資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
