HTML5 : 一個音效檔當三個用 Play Audio by Label Name

HTML5 投籃高手是我在 2012年以 LimeJS 設計的小遊戲，由於當時 iOS 4.x 版的 Safari 只能播放一個聲音檔，於是嘗試了一個新方法來播放音效。

遊戲中使用到的音效有三種，我把三個音效檔合併成一個，不同音效間有稍微留白，然後記錄了每個音效播放時間的起迄點。

聲音物件 <audio> 可以利用 currentTime 來設定播放的起點，我再自訂一個名為 endTime 的變數來記錄結束時間。由於在播放時，currentTime 會逐漸變大，並且會觸發「timeupdate」事件，利用它們就能夠監看是否已經到每個音效的 endTime。也就是如果 currentTime>=endTime 表示音效播完了，就執行 pause() 來停止播放。經由上面的程序，就可以三個音效共用一個聲音檔了。

底下是一個小小的實驗，

「進球」、「失球」和「投球」三個音效已經合併到一個音效檔中了。根據經驗，在 iOS 中，第一次必須先把整個音效檔播完，才能比較精準地控制暫停的時間；另外，必須把播放的指令放到和使用者互動後執行，才能載入音效檔案；所以要能正常運作，有兩個關鍵一定要注意：

• play() 要放到按鈕中，也就是放到 mousedown、touchstart 或是 click 事件中。
• 第一次播放時，先靜音 (muted 設為 true)，等播放完，把 muted 設為 false，再正式播放指定的音效。

正因為這樣，第一次按播放鈕後，要等一下，才能聽到聲音；之後就都能立即反應了。

底下有四個選項，前三個會按設定的時間範圍來播放某一段音效，「全部」則是一般的方式，從頭放到尾，也就是會聽三個音效。

來測試一下，按想聽的音效吧！

 

進球(0~0.7) 失球(0.88~1.5) 投球(1.77~2.35)

進球    失球    投球    全部

【查看 JavaScript 程序碼】

 

相關連結

• 雄 : HTML5 FUN
  https://gsyan888.github.io/html5_fun/ 
  
  
• MDN Web Docs:<audio>: The Embed Audio element
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio