# Youtube Music 怎麼沒有快捷鍵！太痛苦了

# 情境
> 最近開始使用 YouTube Music 來聽音樂，發現說 YouTube Music 在MacOS系統上面沒有APP可以使用！
> 因此我就透過 PWA 來安裝 YouTube Music 作為 APP (歌單太赤裸我馬賽克了，搞得畫面怪怪的笑死)
> 
> 再來是我平常會把這個 YouTube Music PWA 放在背景播音樂聽，但是我可能同時在使用 Arc 或者 Google Chrome 分頁視窗，可能會有分頁是 使用 YouTube 來看影片，這時兩個聲音同時播放就會打架，我不希望兩個聲音同時播放，因此希望有工具可以幫助我快速暫停播放我 YouTube Music PWA 播放的音樂，同時這不能影響我前景播放的分頁影片

# 嘗試解方
> 再來會提及一些我可能想到的解決方法
- 鍵盤上方的 F8 按鈕不是很好用嗎？？？
- 只能控制目前的 Now Playing session。
- 前景有一般 YouTube 影片時，它會搶走控制權 → 你背景的 YouTube Music PWA 就被忽略。
- 簡單來說，可能會控制錯東西啦，不能指定只控制 Youtube Music PWA
- nowplaying-cli
- 有一個東西叫做 nowplaying-cli，大家如果有去 brew install 看看的話會發現，get-raw 只回報當前那個 session，不會列出全部來源讓你選 YT Music PWA；也無法點名「請控制 YouTube Music PWA」。

- AppleScript（模擬按鍵 / 切前景）
- 我想說蘋果有內建的 shortcut 可以使用，因此腦筋動到 run AppleScript上面
- 但是單純 keystroke space 常打不到播放器（只聽到「咚」）。
- 某些能用的寫法需要把 YT Music PWA切到前景一下下，體驗不友善。
- Raycast YouTube Music Extension
- 因為我是 Raycast 重度使用者，我當然要找找上面的 Extension是否有
- 有找到，在這邊 ---> [Link](https://www.raycast.com/danieldbird/youtube-music)，但是可能很久沒維護了，我下載測試後發現不能用

# 最終可行解法

## 前置作業
- 安裝必要依賴
- `brew install chrome-cli jq`
- 打開你的 chrome 設定允許 JavaScript，接著重啟瀏覽器
- View → Developer → Allow JavaScript from Apple Events

## 創建 Raycast 的 Script Command
- 來到 Raycast Settings 頁面新增一個 Script Command
- 取一個喜歡的名字，我是叫做 YouTube Music Play/Pause，之後按下 CMD+ENTER 來創建（Mode 可以設定成 Silent，但其實之後程式碼會改，所以不影響）
- 接著會請你選擇一個資料夾來創建，就依照個人習慣了

## 編輯剛剛創建的 Raycast 的 Script Command
- 如果你剛剛取名叫做 YouTube Music Play/Pause，那你會得到一個 `youtube-music-play:pause.sh`，我們要編輯這個檔案
- 這邊附上我的程式碼：

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Youtube Music Play/Pause
# @raycast.mode silent

# Optional parameters:
# @raycast.icon 🕹️

# Documentation:
# @raycast.author harryup2000
# @raycast.authorURL https://raycast.com/harryup2000

# Which browser PWA? (chrome-cli, brave-cli, edge-cli, arc-cli, etc.)
BIN="${BIN:-chrome-cli}"

# JavaScript snippet to toggle play/pause
JS_TOGGLE='(()=>{const c=s=>{const e=document.querySelector(s);if(e){e.click();return true}return false};
if(c("#play-pause-button"))return;
if(c("ytmusic-player-bar button.play-pause-button"))return;
const m=document.querySelector("video,audio");if(m){m.paused?m.play():m.pause();return}
const alt=[...document.querySelectorAll("button[aria-label]")].find(b=>/play|pause/i.test(b.getAttribute("aria-label")||""));
if(alt)alt.click();})();'

# Find YouTube Music tab id
TAB_ID=$(OUTPUT_FORMAT=json "$BIN" list tabs \
  | jq -r '.tabs[] | select((.url//"")|test("music\\.youtube\\.com")) | .id' | head -n1)

if [[ -z "$TAB_ID" ]]; then
  # Try to open if not found
  "$BIN" open "https://music.youtube.com"
  sleep 1.5
  TAB_ID=$(OUTPUT_FORMAT=json "$BIN" list tabs \
    | jq -r '.tabs[] | select((.url//"")|test("music\\.youtube\\.com")) | .id' | head -n1)
fi

if [[ -n "$TAB_ID" ]]; then
  "$BIN" execute "$JS_TOGGLE" -t "$TAB_ID"
  echo "▶️  Toggled YouTube Music"
else
  echo "❌ Could not find YouTube Music"
fi

## 設訂專屬的 shortcut
- 接下來只要在 Raycast 設定專屬的 shortcut 就完成啦

## (Optional) 其他快捷鍵
- 你可以設定其他快捷鍵喔，像是上一首以及下一首，這邊附上我的 Github Repo：
{%preview https://github.com/chungchihhan/youtube-music-controller %}

# 體驗大升級
- 如果你正在看 YouTube 影片（瀏覽器分頁在最前面）
- 按下你設定的快捷鍵（例：⌥⌘P）
- 背景 YT Music PWA 立即暫停（畫面不切換、前景影片不受影響）
- 再按一次同一快捷鍵 → 背景音樂繼續播放

# 最後提醒（常見坑）
- **允許 Apple Events 執行 JavaScript一定要開，且重啟瀏覽器；否則 execute 沒反應。**
- 用 Brave/Edge 安裝的 PWA，請用 BIN=brave-cli / BIN=edge-cli。
- 請確保創建的 Raycast 的 Script Command 可以執行(`chmod +x`)