2021-01-21

JavaScript audio play 播放音效

本篇介紹如何用 JavaScript 來播放音效，使用的方式為 Audio Object 的 play()，有時我們需要透過 JavaScript 來控制音效的播放，就像我之前寫的一樣，加上音效讓整體遊戲體驗更好，當然，你也可以用在別的用途上。

注意，<audio> 元素不支援 Internet Explorer 8 以前的版本

以下 JavaScript audio play 播放音效的用法與範例將分為這幾部份，

動態的建立 audio 元素並播放
動態的建立 Audio 物件並播放
取得的已存在的 audio 元素並播放
用 audio 元素來作音樂播放器
如何只播放 1 秒

那我們開始吧！

動態的建立 audio 元素並播放

當按下按鈕執行 playAudio() 時會動態的建立 <audio> 元素，並且設定 src，最後再 audio.play() 播放，

audio.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Audio</title>
    <script type="text/javascript">
      function playAudio() {
        const audio = document.createElement("audio");
        audio.src = "coin01.mp3";
        audio.play();
      }
    </script>
  </head>
  <body>
    <p>按下以下按鈕後會撥放音樂。</p>
    <button onclick="playAudio();">播放</button>
  </body>
</html>

如果要暫停可以使用 audio.pause()

如果要停止的話，沒有現成的 audio.stop() api 可以使用，這邊使用個小技巧，就是先暫停 audio.pause() 然後把播放時間軸 audio.currentTime 設定為0，之後再播放時就是從頭播放了，

<script type="text/javascript">
  audio.play();
  // ...
  audio.pause();
  audio.currentTime = 0;
  // ...
  audio.play();
</script>

動態的建立 Audio 物件並播放

當按下按鈕執行 playAudio() 時會動態的建立 Audio 物件，並且 Audio 建構時帶入音效檔名，最後再 audio.play() 播放，

audio2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Audio</title>
    <script type="text/javascript">
      function playAudio() {
        const audio = new Audio("coin01.mp3");
        audio.play();
      }
    </script>
  </head>
  <body>
    <p>按下以下按鈕後會撥放音樂。</p>
    <button onclick="playAudio();">播放</button>
  </body>
</html>

取得的已存在的 audio 元素並播放

我們新增一個 <audio> ，但如果沒有在 audio 裡加入 controls 屬性的話是看不見播放界面的，
當按下按鈕執行 playAudio() 時會取得的已存在的 audio 元素，最後再 audio.play() 播放，

audio3.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Audio</title>
    <script type="text/javascript">
      function playAudio() {
        const audio = document.getElementById("audio-element");
        audio.currentTime = 0;
        audio.play();
      }
    </script>
  </head>
  <body>
    <p>按下以下按鈕後會撥放音樂。</p>
    <button onclick="playAudio();">播放</button>
    <audio id="audio-element" src="coin01.mp3"></audio>
  </body>
</html>

用 audio 元素來作音樂播放器

最後單純地示範一個 <audio> 怎麼顯示播放界面的，就是在 audio 裡加入 controls 屬性，

audio4.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Audio</title>
  </head>
  <body>
    <audio id="audio-element" src="coin01.mp3"
            controls="true" style="width: 512px"></audio>
  </body>
</html>

這樣就可以完成一個小小的音樂播放器了
js-audio

如何只播放 1 秒

假設音軌有30秒，但我只想播放播放1秒要怎麼做，這邊提供一個作法就是利用 setTimeout() 來達成，在1秒後時間到時 audio.pause() 並將時間軸設定為 0，

<script type="text/javascript">
  audio.play();
  setTimeout(() => { audio.pause(); audio.currentTime = 0; }, 1000);
</script>

以上就是 JavaScript audio play 播放音效的用法與範例介紹，
如果你覺得我的文章寫得不錯、對你有幫助的話記得 Facebook 按讚支持一下！

其他參考
HTML DOM Audio play() Method
https://www.w3schools.com/jsref/met_audio_play.asp
介紹音效 API | MDN
https://developer.mozilla.org/zh-TW/docs/Introducing_the_Audio_API_Extension
HTML5 - 使用JavaScript控制 audio 音頻的播放
https://www.hangge.com/blog/cache/detail_897.html
Play Audio After Few Seconds or Time Delay in JavaScript - CodeSpeedy
https://www.codespeedy.com/play-audio-with-time-delay-javascript/
javascript - Stop audio after X seconds in js - Stack Overflow
https://stackoverflow.com/questions/22766719/stop-audio-after-x-seconds-in-js
javascript - Play few seconds of video onclick - Stack Overflow
https://stackoverflow.com/questions/22084823/play-few-seconds-of-video-onclick

JS30系列按鍵事件及撥放音效
JS30系列01：JavaScript Drum Kit監聽按鍵事件及撥放音效 - Steven玄
https://stevenjhu.com/2019/11/22/js%E4%BD%9C%E5%93%81js30%E7%B3%BB%E5%88%9701%EF%BC%9Ajavascript-drum-kit%E7%9B%A3%E8%81%BD%E6%8C%89%E9%8D%B5%E4%BA%8B%E4%BB%B6%E5%8F%8A%E6%92%A5%E6%94%BE%E9%9F%B3%E6%95%88/
[筆記] JS30系列：監聽按鍵事件及撥放音效（Day1） ~ PJCHENder那些沒告訴你的小細節
https://pjchender.blogspot.com/2017/01/js30day1.html
Javascript30/index.html at master · saharafathelbab/Javascript30
https://github.com/saharafathelbab/Javascript30/blob/master/1-Drum-Kit/index.html
javascript30/index.html at master · minternational/javascript30
https://github.com/minternational/javascript30/blob/master/01%20-%20JavaScript%20Drum%20Kit/index.html
JavaScript/index.html at master · MoniqueChetty/JavaScript
https://github.com/MoniqueChetty/JavaScript/blob/master/Lesson%20127%20Keyboard%20Events/index.html
Let’s play – Drum Kit Player
https://yajunwan.github.io/Drum/drumkit-player.html
https://yajunwan.github.io/
https://github.com/yajunwan/yajunwan.github.io