Playlet：DLNA听歌神器 免安装app播放NAS里的歌

Posted | stdout

家里有个小 NAS 。里面存了一些歌。一半是用 NAS 自带的 app 听，一半是。。。SMB 共享打开听

虽然 NAS 也提供 DLNA ，一直以来找不到趁手 app ，要么收费，要么 bug 多，要么不能多端。

13年前我也想基于 chrome.socket 做个 Chrome App 弄个类似的。结果这破玩意实现有问题，多连接会导致 hang。最后2020年Chromium决定杀死 Chrome Apps

周六的时候，实在无聊，决定又开始搓轮子。在思考 SSDP/UPnP ，native UI, electron，命令行这些选型的时候，突然想到，DLNA服本来就要提供一个http，自己再造个 http 客户端去通信，岂不是多此一举？只要依托它，解决跨域……等等，用个 bookmarklet 不就行了？当页调用 fetch() ，走 SOAP 协议，完美。

所以这就有了，网页版听歌的。不需要安装 app ，只需要一个浏览器书签

https://est.github.io/playlet/

也需要你对网络、DLNA 的亿点点知识。比如你得自己想办法找出 DLNA 的 IP 和端口

使用方法：

  1. 把这个网址加到浏览器书签

        javascript:import("https://est.github.io/playlet/loader.js")

  2. 打开 DLNA 服务器的网页

  3. 点击第一步加的书签（如果找不到书签栏，右上角三个点菜单 -> 收藏 可以切换）

自测兼容 NAS 的 MiniDLNA 。chrome ，手机浏览器和 webview 都可以播放。

当年嵌入个 <script> 写法多复杂，createElement又这那的；现在直接 import() 搞定。简洁明了，还不会重复加载。

最后是个 50KB 左右的单体 js。实现了播放、搜索等核心功能+UI。

给本地测试环境动了个小心思，利用 iframe 去模拟 bookmarklet 注入。还学习到 <audio crossorigin="anonymous"> 居然主动去检查跨域CORS头导致加载失败，去掉 crossorigin 就行。AI嘴硬不给去掉，服了。

这下随时随地打开浏览器就能听歌了。除了收藏的一些古典CD是 .cue 分段的没法播放。感觉需要去电脑上硬切割一下了。

接下来想把歌词什么的整理好。不知道有没有类似 opensubtitles 之类的服务。

最后想起来，miniDLNA为啥不直接把这一坨JS内置了 😂 可能当年那个条件没厂家愿意去js手搓一套DLNA协议+播放界面吧。甚至浏览器对常见音频格式都不怎么支持

Comments