我以前特喜欢用github上的一个免费开源软件 filebrowser，这个软件能一秒钟把家里的电脑变成http网盘服务器，然后在任何地方都能用手机、平板等等的浏览器访问它，在线观看家里电脑硬盘上的视频，音频，图片等等，并且能编辑，上传，下载等。这就是个网页版的文件管理器。（后来发现一个同类的功能更多的软件： Alist，它还能把百度网盘等资源也整合进来。） Filebrowser后端是用golang写的，前端是用vue2写的（现在已经升级到了vue3）。我突发奇想，能不能在上面加个功能，点击.srt文件时把它变成英语听力复读软件？并且做成离线应用，在没网络的时候也能用？我是纯自学编程，也就看了几个小时的vue快速入门，然后边改边学，捣鼓了很久，终于做出来了。月初又想着做个待办列表，由于有写复读机的基础，这个捣鼓了一周多，也做出来了。大家一会而可以测试一下，当然都是永久免费的。www.bilibili.com/video/BV1h1… 直接访问简介里的演示网站就行。
- 关于离线应用，这个真好用啊。大家以前开发软件都是要分别开发windows电脑版，mac电脑版，linux电脑版，安卓手机版，苹果手机版，鸿蒙手机版等等，一个软件得写多遍，改个小bug都能累晕，还要提交到各个应用商店，更新也要提交，还要等待审核。光想想就头大。
而web离线应用呢？就是在第一次访问时，把网站上的资源都缓存到浏览器里了，然后断网时也能使用了，和本地app一模一样。优点是用户免安装，免卸载，开发者就开发一个web页面，各个平台就都搞定了，有浏览器就能用！这样太省事了。而且学习js，vue也简单很多很多，对于个人开发者太友好了。缺点呢，web离线应用貌似不能在关闭浏览器时发送系统通知。有些文章说可以，我没测通。大家可以测测mdn这个，里面有测试网站：使用 Notifications API - Web API | MDN。
web离线应用里最新的技术应该是service work，但这个东西必须要搭建https，这就没法玩了，个人用户弄这个很麻烦。我就退而求其次，用的传统的http cache-control，实现起来超级简单，在服务器响应头加个max-age = 100年，就好了。然后在正常访问时，在客户端请求头加个 no-cache，在离线访问时请求头什么也不加。效果非常好。有网络时正常访问，断网时也能正常使用，甚至关机重启后都能正常访问(最好建个浏览器书签，更方便)。
重要的东西我都存到localstorage里了。后来我发现听力复读这个功能特别消耗流量，每次单句重播都需要消耗流量，我就想着把媒体文件也存到缓存里，但localstorage肯定不行，最大只能放5m的东西。我就把它放到浏览器的indexedDB里了，电脑edge里这个不限大小，苹果手机浏览器里貌似是最大500MB，也足够了。我用的是封装好的localForage。
离线应用真的很方便，我还没有找到实用的离线应用，听力复读软件和待办列表 这种功能性网页做成离线应用效果还真不错。
2.关于媒体复读机，这个是练习英语听力的利器啊。市面上有非常非常多的复读软件，但现在基本都收费了。（但奇怪的是，github上基本没有，因为老外学其他语言不用复读机，他们都没这概念）。 我用了很多年的复读软件，知道各个软件的优缺点。电脑上最好用的是老牌的aboboo，免费功能就很强大了，而且资源丰富，积累了二十多年来网友上传的课件。最牛的是时间轴调整功能，图形化的，直接拖拽时间戳就行了，非常方便。但缺点是和句子编辑功能没有放在一起，得先调整时间戳，再按好几个键转到句子编辑来修改内容，很不方便。手机上的最好用的是轻听英语，优点是断句异常准确，比每日英语听力啊可可英语啊都强很多，因为断句不准基本就没法听了，句子放一半，还练啥听力呢？另一个优点是单句复读页面，非常简洁，而且可以闭着眼睛操作，左右滑动切换句子，单击立即重播当前句，非常非常方便。当然这些软件普遍存在的缺点是：1. 不能用自己的资源，2. 不能自己编辑句子，修改时间戳，修改生词翻译(这个也很重要，比如about，你就记 大约；关于两个意思就好了，别把字典里的解释都搬过来啊，咋背啊？)，不能自己添加注释等等。3.页面太复杂了(就没法闭着眼操作)，小按钮超多，比如小鹦看看-Pollykann。这款软件的作者是自学成才，水平比我高太多了，他能开发各个平台的版本啊，还有web版。当然收费功能也超级强大。比如字幕ai自动生成，自动断句，每句话都能调用ai做语法分析等，媒体源还能切换为百度网盘甚至youtube的视频等等，太多了。
我写的复读机呢，基本上把我知道的优点都包括了，缺点都改了，界面尽量做到简洁，易懂。还加了很多独特的功能，比如在浏览器里调用系统或在线tts朗读译文(这样可以闭着眼睛练翻译)，增加自定义的复习计划等等。因为练听力最重要的是大量反复复习，把之前听懂的文章反复听，直到听到想吐，基本上就能像母语那样形成条件反射了。所以复习还是很重要的。
在开发上，我还是发现了好多小tricks，比如html里对video和audio的currenttime监听不是很准啊，它可能是200ms监听一次，这样就造成每句的结束时间不精准，有时多个音，有时少个音，复读句子当然要求播放精准了。我后来用的方法是先用字幕时间戳计算每句的长度，用settimeout来计时，然后再用setinterval每10ms监听currenttime，这样出来就非常准了。
还有浏览器限制只能在用户主动点击后才能播放声音，而我用到了媒体文件和tts朗读的声音，如果只播放媒体文件，后面朗读tts时就没有声音了。所以我在首次点击时都先把两个来源的声音都初始化一遍，造成的结果是第一次播放时媒体声音开始有些小，然后才恢复正常，但总比后面的tts没有声音好多了。
还有媒体播放时换源的问题，比如正在播放服务器上的视频，同时会下载整个媒体文件并缓存到浏览器，当缓存成功后，我不想用服务器上的视频继续播放了，因为会产生流量，这时要自动切换到浏览器缓存里的文件，由于浏览器的限制，有时切换就会中断播放，因为有些浏览器要求每次更换媒体源，都得用户主动重新点击才能播放，要么就做个虚拟按钮来模拟用户点击（太麻烦了）。我用到了浏览器的一个bug。能避免这个点击，（忘了怎么做的了）。
还有好多小tricks，真是克服了一个又一个的坎啊。
现在待改进的一个是ui弄漂亮点，不会。 还一个是想加一个aboboo那样的时间戳可视化调整工具，发现一个插件效果很不错。 最底下那个视频的就是想要的效果。拖动时间轴能开始播放。然后可以加个按钮，把刚才的位置设为起点或终点。可我试了半天都没成功。不做也行，就是锦上添花，而且手机上估计也不好操作。 vue-peaks (suterma.github.io)
- 关于to do list。我最初就是想做个给小孩子学习用的每日提醒软件，类似那种anki,supermemo的记忆卡片软件，比如正面写上 背诵江雪，作者及生平，创作背景，反面写上这首诗，和作者等等的答案，并能设置复习时间，支持内容朗读。所以我写的时候参考了anki这种记忆卡片。我还下载了十几款to do list，把里面的功能都罗列出来，基本上都实现了。当然，有些功能我就没加，比如提醒规律是每个月的第一个周五，第二个周五，最后一个周五等等，这个是算万圣节的吧？没啥必要吧？ 现在的页面结构是分成三类：列表页，详情页，编辑页。 列表页分为全部列表和当日待办列表，当日待办列表可以选择日期，列出当日到期的任务。列表页还可以根据自定义搜索词，标签，任务卡类型，重要程度，是否带附件来搜索。 点击每一项后能进入任务详情页，任务类型包括：普通任务，背诵任务，备忘任务。普通任务比如生日提醒等，提供了很多日期计算规则；背诵任务，按照自定义的遗忘曲线；备忘录，比如记录血糖数据等。可以分语种朗读正反面的内容，可以添加附件（不限制大小）， 单击详情页可以朗读，再单击暂停，可以左右滑动切换任务，上下滑动切换正反面。在正面时下滑关闭详情页。双击可以进入编辑状态。 编辑页可以修改任务。有些其他软件这个做的很复杂，可以编写纯文本内容，可以插入图片，音频，视频，可以编写富文本内容等等。我就全按纯文本输入内容，其他的全用附件上传就好了，这样更简洁方便。
开发这个todo list速度还是很快的，因为有开发媒体复读机的基础，做起来没啥坎。而且这个todo list不怕丢啊，全能同步到当临时服务器的电脑里，这个比app强。
待完善的就是UI美化，也不会。
开发感言：一个自学编程者也能做软件开发啊！而且不需要太多的学习时间！我在b站上曾经看过那些编程视频，好多都是几十个小时的，关键是看完了也记不住啊。还是先找个短的教程知道大概框架，然后找个有趣的项目，自己一边做一边学一边想，印象更深。遇到问题就问百度啊，它那个ai回答准确率还是超级高的，很多都是拿来就能用。比如，我在打开附件时碰到手机浏览器打不开的情况，我就搜 手机浏览器不执行 window.open( "_blank"); 百度的回答很准啊，还有解决方案，这种细节是教程里很难讲到的吧？ 再比如：vue computed监听不到windowlocalstorage.getitem，这种东西一般教程里也很难讲到吧？讲到也记不住，直接百度搜索就行了。
