magic-akari / lrc-maker

歌词滚动姬|可能是你所能见到的最好用的歌词制作工具
https://lrc-maker.github.io
MIT License
865 stars 97 forks source link

Feature Request: 对未知长度音频的支持 #46

Open Yesterday17 opened 2 years ago

Yesterday17 commented 2 years ago

目前如果无法正常解析音频长度,获取到的 duration 就会是 NaN

当音频是以流的形式呈现时,chrome 就不能正常获取音频长度了。Firefox 会边加载边更新音频长度,但 chrome 不会,会一直保持 NaN,即音频长度不可用。

某种解决方法是通过 MediaSource 替代音频直链,通过 fetch 获取音频内容,同时在音频流完全加载完毕时将 duration 写入。如果希望的话,还可以通过 ServiceWorkerfetch 结果缓存。个人实现方式如下:

https://github.com/ProjectAnni/anni-embed-player/blob/747014c8c832cbf2702604b074e79e67db949502/player.js#L26-L59

当然,也可以选择不支持,但希望在进度条处有正确的提示,而非当前的 Infinity/NaN

magic-akari commented 2 years ago

使用 fetch 获取外部数据会遇到跨域问题。而如今网络上的绝大部分音频直链都不会设置一个允许所有域名的跨域白名单。所以通过 fetchMediaSource 组合来完成的工作很容易会出现问题。

不过我很好奇,音频流是什么样子的,如何确定起点之类的问题。如果方便可以提供一个链接 sample

Yesterday17 commented 2 years ago

啊,忘了跨域这回事了。个人项目的协议定义是允许跨域的,忘了这一茬。

音频地址是 https://annil.mmf.moe/LACM-14961/1?auth=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MzIzMjYwMTAsInR5cGUiOiJzaGFyZSIsInVzZXJuYW1lIjoiWWVzdGVyZGF5MTciLCJhdWRpb3MiOnsiTEFDTS0xNDk2MSI6WzFdfX0.-7J9Hb70qe-oy4ZpNmjbuzC4fgNDuv7w4ww50utZ6DY

可以在这个链接观察使用 MediaSource 的效果预览。

因为是服务器 ffmpeg 实时转码的,因此没有确定的音频长度(需要 seek,显然没有这个能力)。

转码部分的源码在此

magic-akari commented 2 years ago

我试了一下,确实获取不到长度信息。 Chrome 在播放完之前,获取到的长度信息都是 Infinity,而 NaN 实际上是我计算出来的错误结果。而播放结束后才获取完整的长度,但是这个时候长度可能已经没什么用了。 这个可以特殊处理一下,比如隐藏。但是还有个更大的问题:如何绘制进度条。 我切回了浏览器原始外观的播放器,发现他的进度条也很“随缘”。

magic-akari commented 2 years ago

另外,你们的项目很有意思,我很感兴趣。

Yesterday17 commented 2 years ago

所以 MediaSource 至少可以在加载完就拿到准确长度,Firefox 也是,就是不知道为什么 Chrome 有问题。

magic-akari @.***> 于2021年11月30日周二 下午6:00写道:

我试了一下,确实获取不到长度信息。 Chrome 在播放完之前,获取到的长度信息都是 Infinity,而 NaN 实际上是我计算出来的错误结果。而播放结束后才获取完整的长度,但是这个时候长度可能已经没什么用了。 这个可以特殊处理一下,比如隐藏。但是还有个更大的问题:如何绘制进度条。 我切回了浏览器原始外观的播放器,发现他的进度条也很“随缘”。

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/magic-akari/lrc-maker/issues/46#issuecomment-982474924, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCEFLVFFWDKWGHVNEVAVCTUOSODJANCNFSM5JBBFOOQ .

Yesterday17 commented 2 years ago

可以来 https://t.me/project_anni 讨论

magic-akari @.***> 于2021年11月30日周二 下午6:01写道:

另外,你们的项目很有意思,我很感兴趣。

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/magic-akari/lrc-maker/issues/46#issuecomment-982475951, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCEFLVFQYVU65IMBH6P6Q3UOSOHZANCNFSM5JBBFOOQ .

magic-akari commented 2 years ago

-movflags faststart 这样的 ffmpeg 参数能使用吗?

Yesterday17 commented 2 years ago

之前有试过,之所以转成 adts 而不是能带元数据的 mp4(m4a) 就是因为输出 mp4 必须要能 seekfaststart 虽然可以生成但是播放器完全解析不了(报大量错)

我在想 -t 指定长度能不能让 ffmpeg 先把 duration 写进去,但只是想法,之后可以尝试一下