百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

利用 Fluid 自制 Mac 版 Overcast 应用

ztj100 2025-07-10 22:14 5 浏览 0 评论

我喜爱收听播客,健身、上/下班途中,工作中,甚至是忙着做家务时。大多数情况下我会用 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.fmName按自己喜好填写,如:OvercastLacation选择存放路径;Icon添加一个自己喜欢的 icon。如果留空,Fluid.app 会自动从 Web App 上抓取一个 icon。

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
  • Allowbrowsing 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 更为美观。

相关推荐

Sublime Text 4 稳定版 Build 4113 发布

IT之家7月18日消息知名编辑器SublimeText4近日发布了Build4113版本,是SublimeText4的第二个稳定版。IT之家了解到,SublimeTe...

【小白课程】openKylin便签贴的设计与实现

openKylin便签贴作为侧边栏的一个小插件,提供便捷的文本记录和灵活的页面展示。openKylin便签贴分为两个部分:便签列表...

“告别 Neovim!为什么我投奔了刚开源的 Zed 编辑器?”

...

壹啦罐罐 Android 手机里的 Xposed 都装了啥

这是少数派推出的系列专题,叫做「我的手机里都装了啥」。这个系列将邀请到不同的玩家,从他们各自的角度介绍手机中最爱的或是日常使用最频繁的App。文章将以「每周一篇」的频率更新,内容范围会包括iOS、...

电气自动化专业词汇中英文对照表(电气自动化专业英语单词)

专业词汇中英文对照表...

Python界面设计Tkinter模块的核心组件

我们使用一个模块,我们要熟悉这个模块的主要元件。如我们设计一个窗口,我们可以用Tk()来完成创建;一些交互元素,按钮、标签、编辑框用到控件;怎么去布局你的界面,我们可以用到pack()、grid()...

以色列发现“死海古卷”新残片(死海古卷是真的吗)

编译|陈家琦据艺术新闻网(artnews.com)报道,3月16日,以色列考古学家发现了死海古卷(DeadSeaScrolls)新残片。新出土的羊皮纸残片中包括以希腊文书写的《十二先知书》段落,这...

鸿蒙Next仓颉语言开发实战教程:订单列表

大家上午好,最近不断有友友反馈仓颉语言和ArkTs很像,所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。首先来分析一下这个页面,它分为三大部分,分别是导航栏、订单类型和订单列表部分...

哪些模块可以用在 Xposed for Lollipop 上?Xposed 模块兼容性解答

虽然已经有了XposedforLollipop的安装教程,但由于其还处在alpha阶段,一些Xposed模块能不能依赖其正常工作还未可知。为了解决大家对于模块兼容性的疑惑,笔者尽可能多...

利用 Fluid 自制 Mac 版 Overcast 应用

我喜爱收听播客,健身、上/下班途中,工作中,甚至是忙着做家务时。大多数情况下我会用MarcoArment开发的Overcast(Freemium)在iPhone上收听,这是我目前最喜爱的Po...

Avalonia日志组件实现与优化指南(ar日志表扣)

...

浅色Al云食堂APP代码(三)(手机云食堂)

以下是进一步优化完善后的浅色AI云食堂APP完整代码,新增了数据可视化、用户反馈、智能推荐等功能,并优化了代码结构和性能。项目结构...

实战PyQt5: 121-使用QImage实现一个看图应用

QImage简介QImage类提供了独立于硬件的图像表示形式,该图像表示形式可以直接访问像素数据,并且可以用作绘制设备。QImage是QPaintDevice子类,因此可以使用QPainter直接在图...

滚动条隐藏及美化(滚动条隐藏但是可以滚动)

1、滚动条隐藏背景/场景:在移动端,滑动的时候,会显示默认滚动条,如图1://隐藏代码:/*隐藏滚轮*/.ul-scrool-box::-webkit-scrollbar,.ul-scrool...

浅色AI云食堂APP完整代码(二)(ai 食堂)

以下是整合后的浅色AI云食堂APP完整代码,包含后端核心功能、前端界面以及优化增强功能。项目采用Django框架开发,支持库存管理、订单处理、财务管理等核心功能,并包含库存预警、数据导出、权限管理等增...

取消回复欢迎 发表评论: