
如何將 YouTube 影片的「音樂」部分嵌入網站呢?或許很多人遇過類似問題,通常解決方法是利用轉檔工具擷取 YouTube 影片並轉檔為 MP3 格式,例如 JAYC.Audio、YT2MP3 和 Peggo 等服務都能做到,然後再把 MP3 上傳到音樂空間來產生內嵌代碼,這個方法非常費時,而且可能會有版權問題。
國外部落客 Labnol 分享了一段更為方便的程式碼,只要稍作修改就能將 YouTube 影片以音樂播放器模式嵌入網站來播放音樂。這個簡單的小工具結合官方 YouTube API ,而且無須進行轉檔,代碼只有七行,整體來說非常易用。
你可以將任何 YouTube 影片的音樂部分嵌入你的網頁,訪客會看到一個小小的播放按鈕,點擊後就能播放或暫停音樂。技術上來說,你也能讓 YouTube 影片音樂在背景播放,加上循環設定使它不間斷播送。
延伸閱讀:
使用教學
開始前,你可以參考 Labnol 的範例頁面,查看音樂播放器在網頁內的運作效果。看起來就跟一般音樂播放器一樣,事實上 YouTube 影片是在背景播放。
STEP 1
首先,開啟要內嵌到網站的 YouTube 影片,複製 https://www.youtube.com/watch?v= 後方的這串影片 ID(目前為 11 個字元的字串),如同下圖選取的部分。
STEP 2
接著複製下面的程式碼,將「VIDEO_ID」部分替換為前面取得的影片 ID。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 API 播放器,但把寬度、高度設定為 0,當使用者點選播放按鈕時,則會將 YouTube 影片播放狀態切換為播放或停止。
詳細程式碼細節可以參考 Labnol 網站原文,我個人認為這個小工具相當好用,特別是你想將某段音樂嵌入網站,又不希望把音樂託管到自己的空間而增加流量消耗時,相較於將音樂部分擷取下載後重新上傳,這個功能會更加安全些。