Skip to main content

本周项目:Voltra

· 14 min read

本周,我们采访了 Aprile ElcichPaolo Fragomeni,一起探讨了 Voltra,这是一款基于 Electron 的音乐播放器。

¥This week we met with Aprile Elcich and Paolo Fragomeni to talk about Voltra, an Electron-powered music player.


什么是 Voltra?

¥What is Voltra?

Voltra 是一款音乐播放器,适合想要拥有自己音乐的人。它也是一个商店,你可以根据自己已有的音乐发现和购买新音乐。它无广告,跨平台,适用于桌面和移动设备。它也不会监视你。

¥Voltra is a music player for people who want to own their music. It’s also a store where you can discover and buy new music based on what you already own. It’s ad-free, cross-platform for desktop and mobile. It also doesn’t spy on you.

voltra-artistview

Voltra 适合谁?

¥Who is Voltra for?

任何听音乐的人。

¥Anyone who listens to music.

是什么促使你创建 Voltra?

¥What motivated you to create Voltra?

广播一直拥有大量听众。它正在从广播电视转移到互联网上。现在你可以按需租借音乐了 - 这可是电台的复兴!许多新产品和服务因此应运而生,但流媒体电台仍然控制着你的音乐以及你的体验。

¥Radio has has always had a big share of listeners. It’s moving off the airwaves and onto the Internet. Now you can rent music on demand — it’s a radio revival! A lot of new products and services have emerged because of this, but streaming radio still leaves someone else in control of your music and how you experience it.

我们想要一款完全专注于你拥有的音乐的产品。一些能够让你轻松地直接从艺术家或唱片公司发现和购买新音乐的功能。

¥We wanted a product that was entirely focused on music you own. Something that made it easy to discover and buy new music directly from artists or labels.

有免费版本吗?

¥Is there a free version?

桌面播放器完全免费。出售你的音乐也是免费的! 我们不提供广告支持。

¥The desktop player is completely free. Selling your music is also free! We are not ad-supported.

由于该应用是免费的,我们以后可能会将其开源。目前我们没有足够的带宽来管理这些。我们对功能和发展方向也有非常具体的想法。我们有一个活跃的 Beta 测试社区,我们会认真对待大家的反馈。

¥Since the app is free, we may open source it later on. Right now we don’t have the bandwidth to manage that. We also have very specific ideas for features and the direction we want to take things. We have an active beta community and we take our feedback to heart.

你们如何盈利?

¥How do you make money?

我们有高级功能!

¥We have premium features!

我们的 Voltra 音频存档 是一款专为音乐设计的云备份服务。我们不会压缩或共享数据块。你的音乐收藏已为你备份。

¥Our Voltra Audio Archive is a cloud-backup service designed specifically for music. We don’t compress or share data blocks. Your music collection is physically backed up for you.

对于艺术家和唱片公司,我们的 专业会员 提供工具帮助他们接触更多相关受众,例如分析和专业的艺术家网页。

¥For artists and labels, our Pro Membership offers tools to help them reach more relevant audiences, such as analytics and professional artist webpages.

Voltra 有何不同?

¥What makes Voltra different?

设计和可用性对我们至关重要。我们希望为听众提供无干扰的聆听体验!还有一些有趣的音乐播放器和商店。但其中许多功能比其创建者意识到的更先进,也更难使用。我们希望让尽可能多的人能够使用 Voltra。

¥Design and usability are incredibly important to us. We want to give listeners a distraction-free listening experience! There are a some interesting music players and stores out there. But many of them are more advanced and harder to use than their creators realize. We want to make Voltra accessible to as many people as possible.

我们也不会从艺术家或厂牌那里收取任何佣金。这对我们来说是一个关键的差异化因素。这非常重要,因为它降低了艺术家将音乐推向市场的门槛。

¥We also don't take a cut from the artist or the label. That’s a key differentiator for us. It’s really important because it lowers the barrier for artists to get their music to market.

你做出了哪些设计和技术决策?

¥What are some design & technical decisions you made?

在设计 Voltra 时,我们考虑了原生应用和 Web 的 UI 惯例,也仔细考虑了可以移除的内容。我们有一个活跃的私有 Beta 测试小组,在过去几个月里,他们给了我们很多重要的反馈。

¥While designing Voltra, we considered UI conventions from native apps and the web, we also thought a lot about what we could remove. We have an active private beta group who have given us critical feedback over the last few months.

我们发现专辑封面和摄影对人们来说非常重要。许多播放器只是文件列表。拥有实体专辑的一大优势是专辑封面,我们希望在 Voltra 桌面应用中重点强调这一点。

¥We found that album art and photography are really important to people. Many players are just lists of files. One of the cool things about owning physical albums is the album art, and we wanted to put emphasis on this in the Voltra desktop app.

voltra-albumview

我们也确保不会干扰他人的文件。我们使用文件监视功能,以便你可以将文件放置在任何你想要的位置,我们不会为你重命名或移动它们。我们有一个嵌入式数据库来跟踪被监视目录的状态,这样即使进程未运行,我们也能跟踪最新内容。

¥We also made sure not to mess with people's files. We use file watching so you can put your files wherever you want, and we don't rename them or move them for you. We have an embedded database to track the state of the watched directories so that we can track what's new, even when the process isn't running.

在构建 Voltra 时,你遇到了哪些挑战?

¥What are some challenges you've faced while building Voltra?

我们花了大量时间专注于性能。我们最初使用框架,但后来转向了原生 JavaScript。根据我们的经验,它们提供的通用抽象远胜于它们带来的性能损失和繁琐的流程。

¥We spend a lot of time focused on performance. We started with frameworks but moved to vanilla Javascript. In our experience, the generalized abstractions they provide outweigh the performance penalties and ceremony that they introduce.

目前,我们可以很好地处理非常大的集合。大型集合意味着可能包含数以万计的图片!在渲染过程中直接使用 Node.js 的文件系统模块,可以非常轻松地基于 DOM 事件快速延迟加载和卸载大量图片。

¥We handle very large collections pretty well at this point. Large collections means possibly tens of thousands of images! Having Node.js’ file system module directly available from the render process made it really easy to lazy load and unload lots of images super quickly based on DOM events.

总的来说,setImmediaterequestIdleCallback 是执行大量处理并保持 UI 响应速度的重要工具。更具体地说,将 CPU 密集型任务分配到单独的进程中,确实有助于保持用户界面的响应速度。例如,我们将实际的音频上下文移至单独的进程,并通过 IPC 与其通信,以避免繁忙的 UI 造成潜在的中断。

¥In general setImmediate and requestIdleCallback have been super important tools for performing lots of processing while keeping the UI responsive. More specifically, distributing CPU-bound tasks into separate processes really helps to keep the user interface responsive. For example, we moved the actual audio context into a separate process, communicating with it over IPC to avoid potential interruptions from a busy UI.

为什么选择在 Electron 上构建 Voltra?

¥Why did you choose to build Voltra on Electron?

浏览器的沙盒对我们的应用而言限制过多。但我们也在开发一个 Web 播放器。因此,我们可以在两种实现之间共享几乎 100% 的代码,这是一个巨大的优势。

¥The browser’s sandbox is too restricted for our app. But we are also developing a web player. So it’s a huge win that we can share almost 100% of the code between the two implementations.

我们实际上是从使用 Swift 构建原生应用开始的。我们发现的主要问题是我们在重复很多事情。Web 拥有世界上最大的开源生态系统。因此,我们很快就转向了 Electron。

¥We actually started by building a native app with Swift. The main problem we found was that we were reinventing a lot of things. The web has the world’s largest open source eco-system. So we pretty quickly switched to Electron.

此外,最重要的是,使用 Electron,你只需开发一次,它就可以在所有主流平台上正常工作™。虽然不能保证,但为每个平台进行原生编码的成本绝对超过了 Electron 带来的任何其他成本。

¥Also, and most importantly, with Electron you develop once and it should Just Work™ on all the major platforms. It’s not guaranteed, but the cost of coding natively for each platform definitely outweighs any other costs that electron introduces.

你最喜欢 Electron 的哪些方面?

¥What are your favorite things about Electron?

GTD!:将 Node.js 的网络堆栈和 Chromium 的表示层打包在一起,是完成任务的秘诀。

¥GTD!: Having Node.js’ networking stack and Chromium’s presentation layer packaged together is a recipe for getting things done.

权限:这只是一个 Web 栈,所以实际上我们整个团队都参与了产品的构建。

¥Competency: It’s just the web stack, so literally our whole team is involved in actually building the product.

社区:Electron 社区组织严密,善于沟通!我们很高兴能获得这样的支持。

¥Community: There is a highly organized community that knows how to communicate really well! We feel pretty great about developing with support like that.

Electron 可以在哪些方面改进?

¥In what areas could Electron be improved?

我们希望 Electron 能够支持单一的打包工具。打包程序对 Electron 的重要性,就如同软件包管理器对 Node 一样重要。用户空间中有多个打包器,每个打包器都具有有趣的功能,但也存在一些 bug。社区的共识将有助于引导贡献者投入的精力。

¥We would like to see Electron endorse a single packager. The packager is as important to Electron what the package manager is to Node. There are multiple packagers in user-land, each with interesting features but each with bugs. Consensus by the community would help to direct the energy being spent by contributors.

下一步计划是什么?

¥What's coming next?

我们目前正在开发一款移动应用,并与艺术家和唱片公司合作,将他们的音乐添加到 Voltra 商店。大家好!如果你是艺术家或唱片公司,立即注册!我们计划在达到 1000 万首曲目的目标后开放商店。

¥We‘re currently developing a mobile app, and working with artists and labels to add their music to the Voltra shop. Hey! If you’re an artist or label, sign up now! We plan on opening up the shop when we reach our goal of 10 million tracks.