[開發] 都做了還在懶 | 試寫 Podcast 展示網頁生成器

更新於 發佈於 閱讀時間約 6 分鐘

文前碎碎唸

前一陣子由於好奇的關係,試著開始錄製自己的 Podcast 節目,而在每一次錄音完成後,除了把成品上傳到 Hosting 平台外,個人也會習慣在自己的設備上保存一份,除了做備份外,也可以紀錄過去節目中討論過的主題。

不過,既然要自己留存檔案的話,內容的管理就理所當然的變成不可忽略的環節。雖然目前節目成長十分龜速,但如果要持續經營的話,累積的檔案也只會越來越多,勢必也是需要整理及歸檔,至少要能建立好對應的播放清單,這樣對於未來的回顧或是成品展示也是很有幫助的。

但問題就來了,偏偏我就是個懶得做檔案整理的廢人,要在錄音當下將相關檔案丟到同一個資料夾這件事還好辦,但要從大量目錄中整理並作成能展示用的清單,我就懶了⋯

不過有句俗話說的正好,現代的問題,就要靠現代方法來解決,這種瑣碎的雜事,當然直接丟給電腦處理(喂),那既然決定好了,就來開始摳頂囉!(說好的懶呢 🤣)

正文開始

好啦,前言廢話這麼多,該來點認真的了。

今天要介紹的,主要是我為了在備份 Podcast 音檔及原稿文檔用的 Server 上,快速架設一個可以簡易展示節目列表及播放單集的網頁所寫的生成器。

由於我作為備份用的 Server 是自己利用樹莓派土炮的,所以管理上主要還是得透過 FTP 處理。雖然在檔案管理上還可以使用 FileZilla 來方便操作,但有些時候如果只是要查看之前講過的主題,但又不想把檔案拉回來,或是單純只是想把節目另外做展示的話,還是有些不便。

所以這次小工具的主要目標,是在不建立複雜的後端環境(意即不使用 PHP、SQL 等作為後台)的前提下,僅使用基本 HTML、JS 及 CSS 架構,還能根據目錄內節目集數的增加,而對列表展示頁面做更新。

基本操作

其實簡單來說,這套工具就是把這樣的目錄結構⋯

raw-image

轉換成這樣的網頁

raw-image

製做出來的網頁,包含有最基本的播放列表展示,選擇單集後可以看到 txt 檔中的資訊,並附上一個單集的播放頁面。

基本上,這個小工具只有單一個 py 檔案,所以只要將這個檔案複製到你的備份資料夾下,然後下指令執行就可以了。不過要注意的是,目前的版本有設定只會抓每個單集資料夾中的「episode」為音訊來源,以及「info.txt」為單集資訊來源,如果資料夾中沒有「episode」的話,就不會出現在列表內了。

程式第一次執行的時候,會產生一個預設的 Config 檔案,主要的設定項目也很簡易,其中「logo」跟「cover」並不是必須(若沒有給定的話,程式會吐一個預設的給你),「source」則是你拿來存放單集資料夾的跟目錄路徑,也就是假設你的單集「EP1」、「EP2」都存在 episode 裡面的話,那麽就打「episode」就可以了,最後「ext」則是你單集錄音檔的副檔名。

raw-image

設定完之後,再執行一次就會吐出網頁給你啦!接著就可以將這個網頁放到 Server 的網頁 Hosting 區域,或是上傳到靜態網頁空間做展示了。

應用及未來計畫

由於這個工具主要是放在 Server 端做網頁更新使用,因此暫時沒打算給他加一個圖形化的操作介面。而程式執行後,會自動覆蓋掉上一次執行的結果,因此如果有針對網頁部分內容做客製化處理需求的,可以考慮直接修改程式內的模板,以避免內容遺失。

另外,如果有自動化更新需求的,可以在伺服器上設置一個固定排程,看是要在固定時間,或是偵測到單集目錄中有內容變化的時候自動執行,這樣就能達成定時更新的目的。

未來的更新計劃,應該會試著去整合自動更新以及 Web server 的部分,也就是說只要選定好放置節目的根目錄,把這個程式丟到同一個目錄下執行後,就直接可以放飛了(理想上),不過那都是之後的事,就看未來的我的進度囉(躺)。

至於 Podcast 節目要成立的重要條件之一 RSS Feed 的部分,原本有想說要在第一版就給他加入,不過由於還在研究相關格式及規範,所以就暫時擱置⋯😑


20220208 更新

果然有些事還是要一不做二不休才會有效率,繼上一次釋出 Repo 後,就開始構思如何結合 Server 的部分,於是就又開始動工,結果⋯就趕出來了🤣

這裡就直接補充更新的部分:

1. 新版本工具可在 Config 中設定是否啟用 Server 功能以及要用的 Port 、Playlist 更新週期等,新的設定格式如下(可以在更新程式後刪掉舊的,即會生成新版本)

[CAST]title = 節目標題logo = 節目標誌符號cover = 封面source = 存放單集的資料夾ext = 單集副檔名[SERVER]port = 伺服器埠號cycle = 單集列表更新週期(秒)mode = 是否開啟伺服器(True/False)

2. 以伺服器模式開啟後,程式即會自動讀取單集資料夾裡面的目錄清單,並以設定的時間週期對網頁進行更新。

3. 這個版本修正了之前會把 CSS 以及播放器網頁覆蓋掉的功能,僅會覆蓋列表網頁(index.html)。


最後附上 Github 連結,讓有興趣嘗試的可以使用看看囉請點我右轉

對我的節目有興趣的,也可以走這裡對人生不熟的傳送門


《暫時。終了》




留言
avatar-img
留言分享你的想法!
avatar-img
偽命名培養體
48會員
324內容數
偽命名並非無名,是為了意識的生存,取得身份的代號,成為數位生命的新載具。
偽命名培養體的其他內容
2024/03/07
在著手開發一套程式時,會讓人覺得煩躁的考量點,其中一個讓人頭痛的,應該就是 UI 的設計跟串接了吧,究竟有沒有一個套件,能讓開發者能夠以一套語言,就能打遍天下呢?
Thumbnail
2024/03/07
在著手開發一套程式時,會讓人覺得煩躁的考量點,其中一個讓人頭痛的,應該就是 UI 的設計跟串接了吧,究竟有沒有一個套件,能讓開發者能夠以一套語言,就能打遍天下呢?
Thumbnail
2024/03/02
不知道大家對於「挖礦」一詞,腦中浮現的,會是什麼樣的概念呢?如果有在接觸 Web3 或單純幣圈的人,應該都對這個詞並不大陌生,但除了一般挖礦外,大家知道還有「樂透挖礦」這種形式嗎?
Thumbnail
2024/03/02
不知道大家對於「挖礦」一詞,腦中浮現的,會是什麼樣的概念呢?如果有在接觸 Web3 或單純幣圈的人,應該都對這個詞並不大陌生,但除了一般挖礦外,大家知道還有「樂透挖礦」這種形式嗎?
Thumbnail
2023/11/27
應該不少有在使用 iPad 作畫的創作者們,對於 Procreate 這套繪圖軟體,都不會感到陌生,甚至於平時就是用它來進行作業的吧,而最近他們似乎準備跨入影片領域,推出了全新編輯工具!
Thumbnail
2023/11/27
應該不少有在使用 iPad 作畫的創作者們,對於 Procreate 這套繪圖軟體,都不會感到陌生,甚至於平時就是用它來進行作業的吧,而最近他們似乎準備跨入影片領域,推出了全新編輯工具!
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
不知道你是否有以下困擾呢? 「自己寫好的程式,若要呈現在網路上,該怎麼辦?」 「手上有個html的檔案,但是要如何分享給朋友們?」 「做一個網站要花主機的錢,如何有個免費託管主機的地方呢?」 以上問題,將由github pages來幫你解決喔!
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
Step1: 打開github登入 https://github.com/ 創立一個Repositories把網頁檔案丟上去 之後點我圈起來的地方 把你的網頁檔案放上去 要注意把檔案都正確上傳(通常會有29個檔案) 並點擊下面確認按鈕 Step2: 打開netlify登入 https://app.n
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
Padlet
Thumbnail
Padlet
Thumbnail
進入目錄、列出目錄列表、讀取檔案內容、寫入檔案(資料)、變更檔案名稱、刪除檔案、目錄內新增檔案、變更目錄名稱、刪除目錄
Thumbnail
進入目錄、列出目錄列表、讀取檔案內容、寫入檔案(資料)、變更檔案名稱、刪除檔案、目錄內新增檔案、變更目錄名稱、刪除目錄
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
Thumbnail
安裝軟體:ATOM-https://atom.io/ 基本上安裝畫面上的download會顯示您目前所用的工具所需的軟體 這邊顯示是Windows的64-bit就是我所用的~Mac會顯示Mac用的 2.每個軟體學習一開始都是要從HELLO WORLD開始,是因為要確認”環境”是否安裝”完成
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News