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