HTML audio 音樂播放器

十月 25, 2020

前言

想要在網頁播放音樂並要有播放、暫停和音量的功能，HTML 就有提供 <audio> 的標籤使用，

在 <audio> 標籤內的內文主要是讓無法正常看到播放器的使用者看的，可看到並使用播放器時就不會看到內文。

建立一個簡易的播放器需要先定義播放的工具類型 <audio> 聲音類或是 <video> 影片類，接著是使用 <source> 定義多媒體文件的來源和類型。

audio 、 video 標籤
- controls 音樂控制設定，這是控制 播放/暫停和音量 必要的設定
- autoplay 自動播放
source 標籤內的媒體類型
- 音樂類
  - audio/mpeg ： MP3 檔
  - audio/ogg ： OGG 檔
  - audio/wav ： WAV 檔
- 影片類
  - video/mp4 ： MP4 檔
  - video/webm ： WebM 檔
  - video/ogg ： Ogg 檔
- 參考文件： https://www.w3schools.com/html/html_media.asp

音樂類

建立播放器的 HTML Audio ，在類型要使用 audio ，就可以產生播放工具

1
2
3

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>

影片類

1
2
3

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<video> 內的 width 和 height 是設定影片尺寸，當縮放尺寸到符合寬或高後，另一個尺寸不足的部分會使用置中並透明保留空位，不會因為影片尺寸小於設定的尺寸縮小範圍或是強制符合。

另一個好用的功能是看影片時的字幕設定

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="movie_en.vtt" 
         kind="subtitles" 
         srclang="en" 
         label="English" 
         default>
</video>

利用 <track> 標籤，載入 vtt 字幕檔案，vtt 是指 WebVTT 字幕格式，這個格式在 HTML video 使用時可以正確的呈現內容。

在 <track> 標籤內的屬性
- kind 為設定字幕類型。
- srclang 是語系/地區碼， zh 是中文、 zh-tw 是台灣的正體中文、zh-cn 大陸的簡體中文。
- label 在選擇字幕時會看到的名稱。
- default 作為影片預設的字幕檔開啟，沒使用時字幕預設是關閉。

vtt 字幕檔

可利用 SubtitleEdit 線上字幕編輯器工具製作，或是自已刻一個，製作方法是建立一個 文字文件.txt 後，加上下方的內容

WEBVTT

00:01.000 --> 00:04.000
- Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

時間戳記有固定格式是使用 mm:ss.ttt 和 hh:mm:ss.ttt ，開始和結束的時間中間加上字符串 --> ，字符串和時間要保留一個空格

儲存檔案時使用 UTF-8 編碼存檔，再修改副檔名為 .vtt 就完成了。

設定字幕樣式

設定樣式有 2 種方式，一個是在 .vtt 檔內加上 CSS 設定

WEBVTT

STYLE
::cue {   /* 全部使用的樣式 */
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

STYLE
::cue(b) {   /* 指定 <b></b> 內使用的樣式 */
  color: peachpuff;
}

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

另一個就是在 CSS 設定

::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

::cue(b) {
  color: peachpuff;
}

不管設定在哪裡，使用上方便管理就行了。

參考資料：

https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

https://w3c.github.io/webvtt/

YouTube 影片

使用 YouTube 影片載入到網頁，可用 <iframe> 標籤就可以

1 2	<iframe width="420" height="315" src="https://www.youtube.com/embed/影片ID"> </iframe>

這作法也等於是在 YouTube 影片按分享的嵌入產生的 code

<iframe width="420" height="315"
        src="https://www.youtube.com/embed/ 影片ID "
        frameborder="0"
        allow="accelerometer;
               autoplay;
               clipboard-write;
               encrypted-media;
               gyroscope;
               picture-in-picture"
        allowfullscreen>
</iframe>

設定除了有上方基本的之外，還有提供可自訂的樣式

以下自訂的部分都是要加到影片 ID 的 ? 之後

color=white ：設定播放進度條的已播放顏色，但也只能修改成預設的 red 和 white 兩種顏色。
disablekb=0 ：預設為 0，設定為 1 時會停止鍵盤控制。
controls=0 ：設定進度條的顯示。預設 1 會有可按暫停/播放、進度條、聲音控制，設定為 0 時就會隱藏。
start ：從 n 秒處開始。
end ：在 n 秒處停止播放。
loop=1 ：重複播放，預設為 0 不重複。
rel=0 ：預設 1 是當影片結束會出現相關類似的推薦影片，如果希望是推薦相同頻道的影片可以設為 0 就不會看到別人了。

參考來源：https://developers.google.com/youtube/player_parameters