嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放

嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放
(Copyright: rawpixel / 123RF Stock Photo

如何將 YouTube 影片的「音樂」部分嵌入網站呢?或許很多人遇過類似問題,通常解決方法是利用轉檔工具擷取 YouTube 影片並轉檔為 MP3 格式,例如 JAYC.AudioYT2MP3Peggo 等服務都能做到,然後再把 MP3 上傳到音樂空間來產生內嵌代碼,這個方法非常費時,而且可能會有版權問題。

國外部落客 Labnol 分享了一段更為方便的程式碼,只要稍作修改就能將 YouTube 影片以音樂播放器模式嵌入網站來播放音樂。這個簡單的小工具結合官方 YouTube API ,而且無須進行轉檔,代碼只有七行,整體來說非常易用。

你可以將任何 YouTube 影片的音樂部分嵌入你的網頁,訪客會看到一個小小的播放按鈕,點擊後就能播放或暫停音樂。技術上來說,你也能讓 YouTube 影片音樂在背景播放,加上循環設定使它不間斷播送。

延伸閱讀:

使用教學

開始前,你可以參考 Labnol 的範例頁面,查看音樂播放器在網頁內的運作效果。看起來就跟一般音樂播放器一樣,事實上 YouTube 影片是在背景播放。

STEP 1

首先,開啟要內嵌到網站的 YouTube 影片,複製 https://www.youtube.com/watch?v= 後方的這串影片 ID(目前為 11 個字元的字串),如同下圖選取的部分。

嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放

STEP 2

接著複製下面的程式碼,將「VIDEO_ID」部分替換為前面取得的影片 ID。


<div data-video="VIDEO_ID"
data-autoplay="0"
data-loop="1"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

這裡有一些選項可以先進行設定調整,例如:將 data-autoplay 設定為 1,音樂將會在頁面載入後自動播放。如果將 data-loop 設定為 1 那音樂會循環播放直到手動停止。

STEP 3

這個音樂播放器採用 IFRAME 技術,可以在電腦及行動裝置的瀏覽器正常播放。另外技術部分 JavaScript 檔案是託管於 Github,圖片則儲存於 Imgur,如果你覺得尖峰時刻載入速度不如預期,也可以將它下載然後放到自己的網站空間。

嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放

根據原文章的說明,這個小工具使用 YouTube API 播放器,但把寬度、高度設定為 0,當使用者點選播放按鈕時,則會將 YouTube 影片播放狀態切換為播放或停止。

詳細程式碼細節可以參考 Labnol 網站原文,我個人認為這個小工具相當好用,特別是你想將某段音樂嵌入網站,又不希望把音樂託管到自己的空間而增加流量消耗時,相較於將音樂部分擷取下載後重新上傳,這個功能會更加安全些。

分享到...