把 MixerBox 歌單匯入到 Spotify

把 MixerBox 歌單匯入到 Spotify
Photo by Wes Hicks / Unsplash
本文由 個人medium文章 同步

筆者最近從 MixerBox 跳槽到 Spotify,但因為 Spotify 推薦的歌單不符合我的口味,又想把 MixerBox 歌單直接無痛移轉到 Spotify,網路上爬文許久,雖然有看到 Jerry 大大分享的這篇文章,但似乎已經沒辦法使用,既然沒有現成的解決方案,那我們就只好動動自己的小腦袋了🧠

貼心體醒:接下來的內容並不會要求撰寫/查看任何程式🙂

使用工具:瀏覽器, Visual Studio Code


筆者在目前看到的平台歌單轉移工具 TuneMyMusic 中,我發現了一個可能性,在第一步選擇歌曲來源時,有一個選項叫做「任意文本」。

點了之後才發現,原來可以利用歌名加上換行分隔作為清單進行匯入!那事情就簡單多了,我們只要能拿到自己播放清單中的歌曲文字列表就可以直接匯入。

接下來我們來到 MixerBox Web 版頁面,點擊「我的音樂庫」,可以看到自己的歌單。

點擊你想要的歌單後,所有歌曲都會呈現在頁面上。

那麼接下來的問題是:「如何用快速又有效的方式,去擷取這些文字然後透過換行隔開每首歌曲?」(絕對不會是滑鼠按著滑到最下面:)

筆者身為不專業的工程師,時常都會在 Edge 瀏覽器上打開「開發人員工具」,去看看這個網站是如何載入資料、Call 了哪些 API😈😈。

你們可能猜到我要做什麼了,那麼事不宜遲,接下來就介紹我的作法吧~


首先在剛剛的歌單頁面中打開「開發人員工具」(快捷鍵 F12Ctrl + Shift + C),接著點擊「網路」頁籤,下方會出現一排的 Requests (如果沒有記錄,按 F5重整就有了)。

接著在篩選欄內輸入api/playlist,點擊下方第一筆記錄,在右方點選「預覽」,我們會發現歌曲資料都在items屬性裡面。

滑鼠移至 items屬性上點擊右鍵,接著點擊「複製值」。

打開 Visual Studio Code,建立一個空白檔案,將剛剛複製的內容貼上去。

註:f 是 youtube 連結的代號,tt 是每一首歌的標題,目前還不確定是否可一次性將大量的 youtube 連結匯入至歌單,所以就先以取得標題為主吧

那麼我們要的內容(標題)在 tt 這個屬性內,現在可以利用 VSCode 的正則尋找方式,將擁有這個屬性的列選取起來。

按下 Ctrl + F,輸入"tt": "(.*)"後按下旁邊第三個按鈕,可以找到所有符合這個屬性的列:

"tt": "(.*)"
註: 雙引號是英文半形哦~

接著,按照以下步驟進行:

  1. 點擊文字框,按下 Alt + Enter 鍵,會將所有符合的行全部選取起來
  2. 將選取文字複製 (Ctrl + C)
  3. 把當前檔案的所有文字替換成剛剛複製的文字(Ctrl + A, Ctrl + V)

最後結果會變得像這樣:

註: Alt + Enter 若沒反應可以在輸入框內點擊一次,再按一次快捷鍵

接著再從剛剛 Ctrl + F 打開的那個小視窗中,最左邊有個小箭頭點開,輸入$1,接著按下右方的「全部取代」(紅色圈起處)。

這樣就拿到所有的歌曲名字囉~而且還這麼剛好用換行隔開了!

註: 還有原本的文字內容如果有雙引號的話會用\"轉譯,記得將它們取代回雙引號",不過筆者認為應該是不怎麼影響啦 XD

最後我們可以將處理好的文字貼上 TuneMyMusic 中。

接著一路點擊下方的按鈕,目的地選擇「Spotify」即可(當然你要轉移到其他平台也是可以 XD)。

最後的最後筆者提醒大家~這種方式不一定能百分之百匯入成功,似乎跟平台的兼容性有關,畢竟 Mixerbox 歌曲大多來源自 Youtube,直接將它們匯入多少會有一些缺失。

像筆者這次匯入 Spotify 的 460 首也高達 77 首匯入失敗,但想想至少還有 300 多首可以直接無痛轉移過來到另個平台,也算是不小的收穫。

參考資料:

感謝 Hsu Jerry 大大撰寫的文章,這給我一個很棒的靈感:MixerBox 轉移歌曲清單到YouTube Music. 筆者最近幾年使用的音樂串流服務軟體是MixerBox,優點是免費,缺點是無法背景… | by Hsu Jerry | Medium

VS Code 小技巧 — 使用正規表達式(Regular Expression)來尋找和取代文字 — IT 空間 (jiatool.com)

Read more

UV python 操作筆記

UV python 操作筆記

前陣子看到了 uv 這個 python 套件、專案管理器,使用了之後發現簡直快、輕便又好上手,下方是我常使用的指令集 (持續更新中): 查看 python 版本清單 uv python list 💡已安裝的旁邊會顯示 python 安裝目錄位址 安裝 python 版本 # latest uv python install # specific version uv python install <version number> 初始化 uv 專案資料夾。 uv init <project name> 💡預設會自動產生 git repository、.python-version、pyproject.toml

By GXiang
ts-rest 的 API 測試手法(1)

ts-rest 的 API 測試手法(1)

今天與朋友討論到 ts-rest 撰寫 API test 的時候可以用 Zod 的 safeParse().success 判斷 API Response 的 schema 正不正確。 Sample Code: const { body, status } = client.users.create({ body: createUserPayload(), }) expect( userContract.create.responses[201].safeParse(body) .success, ).toBe(true) 這樣做確實會減少許多傳統需要手動添加 expect.any(Type)...等等的型別驗證,如果只是單純驗證型別,確實透過 ts-rest 合約搭配的 Zod 的 safeParse 安全型別驗證就能夠減少用 expect.

By GXiang
問題解決 child_process execSync /bin/sh: pnpm: command not found

問題解決 child_process execSync /bin/sh: pnpm: command not found

Context 我在執行 child_process.execSync 時,使用了下方程式碼去跑 db migration 並且指定了環境變數 DATABASE_URL 去執行 schema refresh & seed execSync('pnpm -F backend db:reset && pnpm -F backend seed', { env: { DATABASE_URL: databaseUrl }, }) 本人是使用 Windows 作業系統,這行指令在我電腦中執行的很順暢,所以就開開心心的把這行程式推上 Github 了。 不料沒多久,一位使用 Mac 的同事就對我說這行程式沒辦法跑啊,一直寫說 pnpm command not

By GXiang
Jest, Testcontainers 如何不重新建立 container 情況下執行 e2e 測試?

Jest, Testcontainers 如何不重新建立 container 情況下執行 e2e 測試?

前言 前不久才研究 Testcontainers 如何套用在 jest e2e 測試環節中,不過這方面進展不錯,目前在每次執行 e2e 測試時都能啟動新的 MySQL 容器並且套用 Primsa 的 migration,用起來真香啊。 但是仍存在一個令我困擾的問題,就是在每一次跑測試時都會 Recreate 一次 Testcontainers,我在想可不可以像過往一樣就把 DB Container 開著,在跑測試時直接用就好。 解決方案 Testcontainers Node.js 官方文件提到: Enabling container re-use means that Testcontainers will not start a new container if a Testcontainers managed container with

By GXiang