我们正在做一个音乐播放器(与市面上的厂商略微有点不一样)

51 天前
 SYjiang

这是我们几个朋友正在搞的小玩意。一个 web 端的简洁播放器。 原型(设计图):一定程度上的保真,很多按键可以点击有效果,可以简单体验一下。 https://axhub.im/pro/0d409ca8bf4446de

这个播放器的特点是一定程度上模拟实体的播放器,但是又给他加了一点现实中不太好实现的特性。

主要使用方式就是,从右侧的碟片包中点击碟片,左侧播放器就开始播放。实体不好实现的部分是,希望鼠标滑动播放器旋转部分时,可以模拟前进或后退当前歌曲进度(打碟)。 这里是详细的需求文档: https://gau0hug96cb.feishu.cn/wiki/Irwwwhmfzizzj8kWrMucNyfun9c?from=from_copylink

样式一定程度上参考了 TP-7 ,但是我本职是产品,做 ui 能力有限,所以做不到人家那么好看。最后就参考了配色。

做这个东西的起因是我在听的一些歌曲被全平台下架了,所以想有一个能在线听自己私藏歌曲的方式。 歌曲文件部分的解决方式是,把歌曲上传到自己的 oss ,根据歌曲名字去其他平台获取歌词和歌曲的详细信息。除此之外,没有其他花里胡哨能力。跟现在市面上的播放工具相比,这个东西使用时甚至会产生阻力,但是我很想体验一下这种有限制播放器的质感,所以做了这个东西。

后续如果开发完成,也会放上来让大家体验。 如果有大佬想要自己实现一下,希望能分享出来,让我们抄抄代码。 另外如果有同类型的好设计,也欢迎大家分享。

2393 次点击
所在节点    分享创造
21 条回复
xubeiyan
50 天前
你们这做前端的为什么会想着,碟片部分 A ,B ,C 和上面的字,都需要写个 transform 来控制旋转呢?结果就是那个字因为旋转角度精度的问题抖抖抖……
CSS 现在支持 `rotate: 90deg;`这种语法了……
随便写了个 https://codepen.io/xubeiyan/pen/Joojepe

顺便再说一下,唱片机播放的时候,壳是不转的,只有唱片转,还要有个唱针。参考下网易云的嘛
SYjiang
50 天前
@xubeiyan 第一 这是原型,不是前端实现,是用 axure 实现的,能让开发看懂效果就行。
第二,这个模仿的不是唱片机,更接近小光盘。从设定上来讲,外壳和内部都在转,但是旋转速度是不同的。所以说“现实中不好实现”
iamzcr
50 天前
seawaysme
50 天前
很喜欢这个东西,支持!
如果碟片管理也能做成真的像抽屉一样一张一张选,把专辑的 banner 页都做进去就好了;
现在人都太浮躁了,要复古就复古到底,专辑一张一张选着听哈哈。
seawaysme
50 天前
而且看着很像 TP-7 录音笔啊
BoBoto
50 天前
@iamzcr Lintendo ?很 6 的大佬,开发了好多实用的 axure 元件!
gaobh
50 天前
没意义,本末倒置了,趋势是串流播放,音乐播放器核心是版权,Winamp ,iTunes ,Windows Media Player ,Foobar2000 ,千千静听,酷我音乐本地模式,这些播放器都支持皮肤,而且炫酷的还不少,但是基本上销声匿迹了,如果你是音质控或喜欢掌控文件结构,本地播放器仍有一席之地。但对于大多数用户来说,确实已经「被云」取代了
建议看看串流先锋这个美剧
summerwar
50 天前
不要用 web 来写音乐播放器,1 是 web 端的技术限制,2 是浏览器的限制。就比如 ios 平台上,点击才可以播放。



建议直接写 app 或者 windows 上的,参考这里的谜底黑胶,ios 上的 app ,效果非常好,极其接近现实中的保真
SYjiang
50 天前
@iamzcr Lintendo 是 axure 系产品经理的救星。
SYjiang
50 天前
@seawaysme 考虑了,但是我的设计能力有限,所以想第一个版本先这样,后续会考虑播放器换皮,比如 eva 配色之类的
SYjiang
50 天前
@seawaysme “样式一定程度上参考了 TP-7 ,但是我本职是产品,做 ui 能力有限,所以做不到人家那么好看。最后就参考了配色。”
SYjiang
50 天前
@summerwar 我的工作场景,电脑端更多,我们的开发者也是 web 优先,如果可行性没问题,以后会考虑跨平台。谜底黑胶很有趣,虽然路径不一样,但是样式我会好好抄一下的。
summerwar
50 天前
@SYjiang #12 用 js 的动画库来实现吧,理论上问题不大,但是感觉有点杀鸡用牛刀的意思,也有可能会点开新的天赋树。
iamzcr
49 天前
@BoBoto 是的,大学同宿舍,原来做技术的,后面做产品去了,是很吊的,而我就变废物了,哈哈哈。
xubeiyan
49 天前
@SYjiang #2 你既然要说自己设计的 CD 机,那 CD 的旋转速度能看清上面的字吗?(每分钟 500 转+的速度)
从前端实现上设计两个旋转速度也不是很困难的事情……但你这说话态度感觉别人说的都是无理取闹,自己才是对的……
你这样很难和人交流的,虽然我知道 V2EX 上的人人均都这样
kaihli
49 天前
支持,刚好我也是存了一堆无损在 s3 。不想用 reclone 挂载,建议分两种模式,一种直接从 s3 读取,一种中转服务器。
SYjiang
49 天前
@kaihli 我们这个目前就是一个小玩具的想法,讲道理还没有能力替代自己的全部音乐场景,但是如果有好的方案,欢迎分享。用上面那位的话来说,看看能不能点开新的天赋树
kaihli
48 天前
Liyuu
48 天前
挺好的想法。
我觉得这个既然是网页访问,那可以在 nas 上部署,然后家里所有的设备可以访问内网地址来收听 nas 上的歌曲,不用装 app 。
SYjiang
47 天前
@kaihli 感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://yangjunhui.monster/t/1126142

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX