我喜爱收听播客，健身、上/下班途中，工作中，甚至是忙着做家务时。大多数情况下我会用 Marco Arment 开发的 Overcast（Freemium）在 iPhone 上收听，这是我目前最喜爱的 Podcast 应用之一 1，我享受 Overcast「杀手级」功能 Smart Speed（智能加速）2 和 Voice Boost（声音均衡器）3 所带来的收听效率以及更棒的音质。

虽然 Overcast 有 Web App，可每日在浏览器中为其独立打开一个标签页总会感到厌烦，一不小心把浏览器关闭了，还得重新打开浏览器输入网址或者点击「个人收藏」上的标签重新开启。我一直渴望 Overcast 的桌面客户端能尽早登陆 OS X 平台，尤其是在 instacast 母公司 Vemedio 宣布终止 Instacast 项目之后，期望更加强烈。

于是，我决定着手解决这件事，利用 Fluid 把 Overcast Web App 创建成 Fake Mac App，方便日常使用。

关于 Fluid

Fluid.app 可以把任意 Web App 创建成独立的 Mac App，支持「Pin to Status Bar」功能（需付费解锁），方便用户在 Menu Bar 上对所创建的 Mac App 进行直接操作。

Fluid.app 的基础功能是免费的，用户可以免费下载安装。支付 4.99 美元可获得完整版，解锁额外的功能：

  • 创建的 Mac App 可以使用单独的 Cookie (Preferences → Security → Cookie Storage)；
  • Pin 创建的 Mac App 到 Menu Bar (Fluid.app Menu → Pin to Status Bar…)；
  • 创建的 Mac App 可以自定义 Userscripts 和 Userstyles (Window → Userscripts/Userstyles)；
  • 全屏模式 (View → Enter Full Screen)。

创建 Overcast Mac App

Part 1:

这一步十分简单，开启 Fluid.app 后在 URL 中填写 Overcast Web App 的地址：https://overcast.fm；Name 按自己喜好填写，如：Overcast；Lacation 选择存放路径；Icon 添加一个自己喜欢的 icon。如果留空，Fluid.app 会自动从 Web App 上抓取一个 icon。

点此下载 Overcast 图标 >

Part 2:

点击「Create」即可完成 Overcast Mac App 的创建。开启 Overcast Mac App 后做如下设置：

Preferences → General
  • Home page: https://overcast.fm
  • Global shortcut: ⌃⌥⌘O（全局 Hotkey 快捷操作，可按自己的喜好设置）
Preferences → Security
  • Enable plug-ins
  • Enable Javascript
  • Accept Cookies: Only from sites I visit
  • Cookie Storage: Shared with Safari (需付费解锁)
Preferences → Whitelist
  • Allow browsing to URLs matching these
  • Patterns: *overcast.fm*

完成上述设置后，基于免费版 Fluid.app 所创建的 Overcast Mac App 已完成，如果你想让 Overcast Mac App 拥有更为完善的功能，接近完美的用户界面，则需要付费解锁完整版，才可按下列步骤继续操作。

Pin It

把 Overcast Mac App 的工作界面 Pin 到 Menu Bar 上4Overcast Menu → Pin to Status Bar…，「Pin to Status Bar」后 Overcast Mac App 支持基本的 Hotkey 快捷操作，如：⌘→（前进）和 ⌘←（后退）。

Userscripts

利用 @DannyBres 编写的脚本添加自定义 Hotkey 快捷方式，在 Menu Bar 上右键（⌃⇧⌘U）Overcast Mac App 的 icon，点选 Userscripts。

复制如下脚本，按上图所标注步骤创建一个新的 Userscripts，Pattern：*overcast.fm*：

var episodeBody = $('#episode_body').text();

if (showUnreadNumberOnDock == false){
 window.fluid.dockBadge = ""; 
} else {
 var pathname = window.location.pathname;
 if (pathname == "/podcasts" && showUnreadNumberOnDock == true) {
 var numberOfUnread = $('.episodecell').length;
 window.fluid.dockBadge = numberOfUnread;
 }
}

$('body').keydown(function(event) {
 if (event.keyCode == 80) {
 toggleAudio();
 }
 if (event.keyCode == 70) {
 skipForwards();
 }
 if (event.keyCode == 66) {
 skipBackwards();
 }
 if (event.keyCode == 71) {
 goFaster();
 }
 if (event.keyCode == 83) {
 goSlower();
 }
 console.log(event.keyCode)
});
function toggleAudio() {
 if (!$('#audioplayer').get(0).paused) {
 $('#audioplayer').get(0).pause();
 } else {
 $('#audioplayer').get(0).play();
 } 
}
function skipForwards() {
 $('#audioplayer').get(0).currentTime+=forwardSkipDuration;
}
function skipBackwards() {
 $('#audioplayer').get(0).currentTime-=backwardSkipDuration;
}
function goFaster() {
 $('#audioplayer').get(0).playbackRate+=speedIncrease;
 updatePlaybackDisplay();
}
function goSlower() {
 if($('#audioplayer').get(0).playbackRate - speedDecrease > 0) $('#audioplayer').get(0).playbackRate-=speedDecrease;
 updatePlaybackDisplay();
}
function updatePlaybackDisplay() {
 if ($('#audioplayer').get(0).playbackRate == 1) {
 var textForBody = episodeBody;
 } else {
 var textForBody = 'Playback speed: ' + $('#audioplayer').get(0).playbackRate.toFixed(2) + " - "+episodeBody;
 }
 $('#episode_body').text(textForBody);
}

此脚本所对应的 Hotkey 5 快捷方式如下：

  • P — [Play] 暂停或播放当前播客；
  • F — [Forwards] 向前快进 30 秒；
  • B — [Backwards] 向后倒退 30 秒；
  • G — [Go Faster] 提高 0.1 倍播放速度6；
  • S — [Slower] 降低 0.1 倍播放速度。

Userstyles

Overcast Mac App 工作界面在 OS X 10.10+ 上有点格格不入，利用 @thanland 所编写的 Userstyles 和手动收缩窗口重新布局 Overcast Mac App 的工作界面，并新增一条 2px 橙色滚动条7，使之更有原生 Mac App 的范儿。

复制如下脚本，按上图所标注步骤创建一个新的 Userstyles，Pattern 同为：overcast.fm：

/* Custom scroll bar */
html {
    overflow: auto;
}
 
body {
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 10px;
    right: 10px;
    padding: 30px 20px 30px 30px; 
    overflow-y: scroll;
    overflow-x: hidden;
}
 
::-webkit-scrollbar {
    width: 2px;
}
 
::-webkit-scrollbar-track {
    background: #eee;
}
 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(252,126,15,0.8); 
}
 
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(252,126,15,0.4); 
}
 
/* Page layout tweaks */
.nav {
    padding-top: 0 !important;
}
 
.container h2:first-child {
    margin-top: 0 !important;
}
 
#audioplayer {
    margin-bottom: 1em !important;
}

按上述步骤操作完毕后，一款功能完善功能，界面美观的 Fake Overcast Mac App 便创建完成。Enjoy it!

结语

以上内容只是抛砖引玉，如果感兴趣还可以利用 Fluid.app + Web App 创建你所需要的 Fake Mac App，对应的 Userscripts/Userstyles 脚本可在 GitHub Gist 上查找或者自行编写。 

  1. 另一款是 Supertop 团队开发 Castro，界面美观，交互新颖。 ↩
  2. 缩短播客中出现的间歇时间（如主播说话间的停顿），以节省收听时间，并且尽量不会让收听者察觉到有何不同。 ↩
  3. 调整播客播放的音量，使音量过低或过高的内容通过算法平衡到一个正常水平。让播客在嘈杂的环境中更具可听性。 ↩
  4. 需要注意的是，工作界面下方的 Status Bar 不会自动隐藏，需手动按下 Hotkey：⌘/ 让其隐藏。 ↩
  5. 对应的 Hotkey 可按需自行修改，其 keyCode 值可参考：css-tricks.com ↩
  6. 需要注意的是，使用该 Hoykey 操作时 Speed 项中的阀值不会随之改变。倍速值纯靠心中默念。: ) ↩
  7. 默认值为 1px，多次调试后我个人认为 2px 更为美观。 ↩