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

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

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

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

延伸閱讀:

  • 如何嵌入 YouTube 影片設定自動重播、隱藏 Logo 或靜音播放?

使用教學

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

STEP 1

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

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

STEP 2

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

.gist table { margin-bottom: 0; }

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

STEP 3

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

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

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

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

喜歡 嵌入 YouTube 影片為音樂播放器教學,僅保留音樂點擊自動播放 嗎?歡迎將免費資源網路社群加入書籤,以 Facebook、Twitter 或 Google+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

发表评论

电子邮件地址不会被公开。 必填项已用*标注