資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法律學使用 Video.js 播放器播放 MP3
在本教程中，我們將學習如何使用 video.js 播放器播放 mp3 檔案或音訊檔案。使用 video.js 播放 mp3 檔案與在標準 HTML5 中播放音訊檔案有些類似，但 video.js 支援 mp3 檔案需要一些額外的步驟。
使用 video.js 播放 mp3 檔案的優勢
使用 video.js 構建 mp3 播放器將為您提供更多對音訊檔案的控制。所有特定於 video.js 的功能都可以在音訊上使用，從而提供更大的靈活性。
如何使用 video.js 播放器播放 Mp3？
要建立音訊播放器，我們需要建立一個 <audio> 元素，然後向其新增 video.js 類。之後，需要將音訊檔案的型別更改為檔案的格式。例如 - 在我們的例子中，我們將為 mp3 檔案建立一個音訊播放器，因此我們在 HTML 中的檔案型別將是“audio/mp3”
現在，讓我們來看一個建立將播放 mp3 檔案格式的播放器的示例。
示例
請考慮以下示例 -
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <audio class="video-js vjs-default-skin" id="audio_example" data-setup='{}' controls="true" preload="auto"> > <source src="https://tutorialspoint.tw/videos/sample.mp3" type='audio/mp3' id='my_audio_file' > </audio> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在上面的示例中，我們做了以下操作 -
使用 CDN Url 在 <link> 標籤的
屬性中包含 video.js。 在 <body> 部分中，建立了一個音訊元素，其類為“video-js vjs-default-skin”。這將使用 video.js 類作為 video.js 播放器的預設皮膚。我們還為 <audio> 標籤提供了“id”作為“audio_example”。
接下來，我們在音訊標籤上使用了 data-setup='{}'，以確保如果我們的音訊元素在網頁載入時沒有被瀏覽器預載入，那麼 video.js 稍後可以載入音訊元素。
controls='true' 將在我們的音訊播放器上顯示一些基本的播放/暫停控制元件。
在 <source> 標籤中，我們提供了音訊檔案“sample.mp3”的路徑，並添加了檔案的 MIME 型別，即“type=audio/mp3”。執行此示例時，請確保輸入音訊檔案的路徑。
在 <script> 標籤中，我們添加了 video.js 檔案的路徑，以將其包含在我們的本地專案中。
執行以上程式碼將在您的瀏覽器中建立一個音訊播放器，該播放器將播放我們的音訊檔案。
要點
由於音訊或 mp3 檔案沒有太多視覺效果，並且只有音訊播放器控制元件將在瀏覽器中顯示。因此，在 <audio> 元素上使用“controls=true”屬性非常重要，否則您的音訊檔案將隱藏在您的網頁上。
現在，我們已經瞭解瞭如何使用 video.js 播放 mp3 檔案，我將透過擴充套件音訊播放器的功能向您展示更多示例。
向 mp3 檔案新增影像/專輯封面
通常音訊檔案沒有視覺元素，因此我們的音訊播放器僅在瀏覽器中顯示播放和暫停音訊檔案的控制元件。
但我們也可以為音訊播放器新增影像海報或專輯封面，使其更具吸引力。
要向音訊檔案新增影像元素，我們必須首先調整音訊播放器的高度和寬度以適應圖片。然後，我們需要在“poster”屬性中傳遞影像檔案的路徑。“Poster”屬性僅在使用標準 HTML 時受 <video> 標籤支援，但由於 video.js，"poster" 屬性也可以用於音訊檔案，使您可以選擇在 mp3 上新增專輯封面。
示例
請考慮以下示例，以向 mp3 檔案新增影像海報，
<DOCTYPE html> <html> <head> <!link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <audio class="video-js vjs-default-skin" id="audio_example" width="560" height="300" poster="https://tutorialspoint.tw/videos/sample.png" data-setup='{}' controls="true" autoplay="false" preload="auto" > <source src="https://tutorialspoint.tw/videos/sample.mp3" type='audio/mp3' id='my_audio_file_1' > </audio> <script src="https://vjs.zencdn.net/7.19.2/video.min.js""> </script> </body> </html>
在上面的程式碼片段中，我們首先添加了一個 mp3 檔案併為該檔案建立了一個音訊播放器。此外，我們還將 video.js 類新增到音訊元素。
除此之外，還使用了'height'、'width' 和'poster' 屬性來在 mp3 檔案上新增影像海報。“poster”屬性具有音訊的專輯封面路徑，並且高度和寬度為“700”，定義了影像海報的尺寸。
執行以上程式碼將在瀏覽器中建立一個音訊播放器，該播放器將播放 mp3 檔案，並且將在音訊播放器控制元件上方看到尺寸為“700×300”的影像海報。
注意 - 要執行以上示例，請將 <source> 元素中的“src”值替換為您自己的 mp3 檔案的路徑，並將“poster”屬性的值替換為影像檔案。
結論
在本教程中，我們學習瞭如何使用 video.js 包播放 mp3 檔案。此外，我們還看到了一些如何使用控制元件建立音訊播放器以播放 mp3 檔案的示例。在最後一個示例中，我們瞭解瞭如何向音訊檔案新增影像海報，以使音訊播放器更友好。
2K+ 閱讀量
