作者ArSwell ( )
看板Blog
標題[ WP ] MP3播放器沒反應 (WordPress.com)
時間Tue Apr 1 13:00:59 2025
使用的是免費版，
想在頁面裡嵌入一個MP3播放器。
照著chatGPT的教學做，
但出現的MP3播放器無法點play（顯示為灰色）。
試過的雲端空間包括google drive和dropbox，做法為：
1. 把MP3檔案上傳到Google Drive(並設定為任何人都可使用)
在編輯頁面裡加上HTML區塊
<audio controls>
<source src="
https://drive.google.com/uc?export=download&id=你的檔案ID"
type="audio/mpeg">
您的瀏覽器不支援音訊播放，請使用其他瀏覽器。
</audio>
或
<audio controls>
<source src="
https://drive.google.com/uc?export=download&id=你的檔案
ID&confirm=t" type="audio/mpeg">
您的瀏覽器不支援音訊播放，請使用其他瀏覽器。
</audio>
並貼上正確的檔案ID，但兩種方式都無法點播放
2. 把MP3檔案上傳到dropbox
<audio controls>
<source src="
https://www.dropbox.com/s/XXXXXXXXXX/你的檔案.mp3?raw=1"
type="audio/mpeg">
您的瀏覽器不支援音訊播放，請使用其他瀏覽器。
</audio>
且確認過這個檔案網址是可以正常播放的
但還是無法在出現的mp3播放器上點播放。
請問
有版友知道問題出在哪裡嗎～？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 59.120.0.199 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Blog/M.1743483662.A.0C1.html
1F：→ laughingXD: 你的空間有支援自製播放器外連播放嗎 04/02 21:46
2F：→ ArSwell: 我不知道欸...請問這要從哪裡看呢？ 04/03 06:49
3F：→ Hsins: 你需要檢查直接使用檔案網址，看是否能夠跳出下載框。 04/03 21:15
4F：→ ArSwell: 測試放在dropbox的檔案，會另開播放頁面，而且能正常播放 04/03 22:21
5F：→ Hsins: 剛剛順手嘗試了一下，確實 Dropbox 的檔案可作為靜態資源 04/03 22:59
6F：→ Hsins: 使用（就是可以外連播放的意思），問題是出在 HTML 的部分 04/03 23:00
7F：→ Hsins: 似乎是 WordPress.com 免費版為了安全性，雖然提供 HTML 區 04/03 23:01
8F：→ Hsins: 塊，但是無法使用外的部分，至少我測試時在編輯器內正常， 04/03 23:02
9F：→ Hsins: 但發布後的內容 url 部分都不見了。 04/03 23:02
10F：→ Hsins: 如果你使用的是 WordPress 新版的區塊編輯器，直接搜尋「音 04/03 23:02
11F：→ Hsins: 訊」區塊，放上檔案網址就可以了。用不著 HTML 區塊 04/03 23:03
超級感謝H大嘗試並詳細回覆～！
我用了音訊區塊，傳了原本dropbox的跟google drive上 mp3檔案的網址
但都是輸入網址後，播放器的play按鈕變黑了...半秒鐘...
然後就又變成灰色無法點選了 @@
我改成設為文字連結，在手機上的文章頁面裡可以另開分頁播放
（但網址本身或用電腦版wordpress，卻無法播放，不懂原因..）
但主要還是希望可以用播放器，方便得多，
其次才是另開分頁播放
（測試的google drive 的檔案網址如下
https://drive.google.com/uc?export=open&id=
1oQIUlvS1oueneBK3vfwsNQHR0b-UDmPl）
如果H大或其他板友能找到辦法，感激不盡~~
※ 編輯: ArSwell (36.231.117.175 臺灣), 04/05/2025 09:00:17
13F：→ Hsins: 你給的連結本身就不能訪問跟使用了，另外雲端空間本身也是 04/05 14:39
14F：→ Hsins: 不建議這樣操作的，所以他們原本早期可以作為圖床，但後期 04/05 14:39
15F：→ Hsins: 都禁止了。我自己嘗試過 Dropbox 目前還可以使用，如果你用 04/05 14:39
16F：→ Hsins: Dropbox 連結也無效，回頭檢查檔案權限設定吧。 04/05 14:40
17F：→ Hsins: 不然就是改用付費版本的 WordPress.com 或自行架站。 04/05 14:40
18F：→ Hsins: 花費在找免費服務跟解決方案的時間，換算成建站的成本都不 04/05 14:42
19F：→ Hsins: 知道多少了…… 04/05 14:43
21F：→ Hsins: 址可以看到我放的確是 Dropbox 的連結。 04/05 14:46
抱歉，現在才發現連結若是編輯過的，就無法直接開啟..
可直接開啟檔案的原始網址是這個：
https://drive.google.com/file/d/1oQIUlvS1oueneBK3vfwsNQHR0b-UDmPl/view
（這個網址無論是直接開啟、還是以連結形式放到文章裡，都可正常播放）
（原本是用dropbox，但每次用手機點開都會出現詢問要不要安裝app的畫面，
所以後來改成用 google drive）
也謝謝H大建議，但我的部落格沒有要營利，
所以只想在免費的架構下使用
最近想到如果用播放器，就可以一邊聽一邊閉目養神，
才卯起來研究 XD
如果有播放器，真的方便很多～
※ 編輯: ArSwell (36.231.117.175 臺灣), 04/05/2025 17:35:25
※ 編輯: ArSwell (36.231.117.175 臺灣), 04/05/2025 17:36:32