我的在线电台在 2 个月内播放量达到 10 万次🤯 以下是我的创建过程🎉

开发一个广播应用是我很久以来就想做的事情。我一直觉得自己和音乐有一种特殊的联系。它总是能激励我，提高我的效率。

不久前，我还做了一个讨论，询问其他开发者是否喜欢在编程时听音乐。我对收到的积极回复感到惊讶，所以我想进一步实践这个想法。

我开始构建DevTunes FM。最初，它只是我个人使用的一个小项目，但我投入的时间越多，它就越能逐渐成型，成为一个开发者社区也能从中受益的东西，所以我决定与公众分享。

该项目的网址为：radio.madza.dev

由于我经历了多个规划和执行阶段，我认为创建一篇有关该过程的文章并向您展示其功能可能会很有价值。

规划

从一开始，我的设计理念就是简洁。我从来都不喜欢复杂的布局和多级设置。我希望打造一款听音乐简单易懂、初次使用就能上手的收音机。

我还注重易用性。这意味着收音机应该能够根据不同的心情和音乐类型偏好进行调节。它还应该可以在任何地方使用——例如编程、锻炼或通勤时。

最后，收音机应该拥有美观的设计。UI/UX 应该流畅，在不同设备上都能呈现出色的视觉效果。用户应该能够自定义收音机的外观和行为。

特征

一旦我确定了主要特征，就该确定具体特征了。

我列出了以下清单：

• 换乘站
• 更改背景
• 播放/暂停
• 重复曲目
• 音量控制
• 最近播放列表
• 保存上次设置
• 响应式设计
• 加载屏幕

线框

为了将这些功能放入 UI，我为组件创建了线框。

我首先从切换电台的下拉菜单开始。打开下拉菜单后，会显示可用电台列表，并高亮显示当前活动的电台。

为了控制收音机的播放状态，有一个带有交替播放和暂停图标以及当前播放曲目的标题的组件。

为了打开不同的设置面板、控制音量和重复当前曲目，我创建了由几个图标组成的导航。

上一首曲目面板显示电台最近播放的曲目。用户可以点击列表中的任意曲目开始播放。设置面板允许用户控制电台的行为。点击两个面板外部即可关闭。

我使用Figma制作了这些线框图。你也可以看看Diagrams.net，这也是一个很棒的工具。

设计

接下来，我必须设计收音机。在这个阶段，我专注于如何定位组件，以及如何让项目看起来和用起来都很棒。

为了实现这一点，我创建了 10 个不同的主题。

壁纸来源于Wallhaven。图标取自FlatIcon。

主题 1

背景资料来源：来源

主题 2

背景资料来源：来源

主题 3

背景资料来源：来源

主题 4

背景资料来源：来源

主题 5

背景资料来源：来源

主题 6

背景资料来源：来源

主题 7

背景资料来源：来源

主题 8

背景资料来源：来源

主题 9

背景资料来源：来源

主题 10

背景资料来源：来源

车站

DevTunes FM 的设计初衷是成为电子音乐电台。电子音乐涵盖了海量的音乐类型和子类型，因此创建合适的电台是一项挑战。

我花了很多时间浏览SoundCloud上可用的播放列表，并播放了所有单独的曲目，以决定内容是否符合我想要在广播中包含的内容。

我最终创建了 28 个电台。以下是完整列表及其管理员：

• 环境（由斯坦·克劳斯策划）
• Lo-Fi（由Epigenesis策划）
• Chillstep（由ZodiacLegends策划）
• 轻松聆听（由ferzrrn策划）
• 未来车库（由ferzrrn策划）
• Future Bass（由PITYPARTY策划）
• Chillhop（由查尔斯·斯皮诺萨策划）
• 陷阱（由chonah策划）
• Chill Trap（由TH3 3ND策划）
• 旋律陷阱（由PITYPARTY策划）
• Dubstep（由ferzrrn策划）
• 旋律 Dubstep（由Alec Falzone策划）
• Liquid Dubstep（由OfficialJMT策划）
• 鼓与贝斯（由Ben Edgar策划）
• 旋律鼓和贝斯（由rinos1337策划）
• Liquid Drum and Bass（由Tom Lockwood策划）
• 住宅（由H.Mastrogiannis策划）
• Techno（由Sazi Maqeda策划）
• 法国之家（由Nathan Lamb策划）
• 未来之家（由伊恩·凯泽策划）
• Progressive House（由 Nola Kid 策划！）
• Progressive Trance（由jpache策划）
• 令人振奋的恍惚（由BetaWave策划！ ）
• Vocal Trance（由Niels Ketelaars策划）
• Dreamhwave（由CHEFGEOFF策划）
• 蒸汽波（由Eliud Makaveli Zavala策划）
• Synthwave（由ferzrrn策划）
• Wave（由Raffie Loiero策划）

每次用户访问广播时，每个电台的曲目都会随机排列，因此曲目的顺序始终是唯一的。

堆

这个广播是用NextJS编写的。它有一些很棒的功能，比如 API 路由、数据获取、内置 CSS 模块支持、静态文件服务、环境变量、热加载等等，我在创建应用程序时用到了它们。

音频来源是SoundCloud API。它允许开发人员获取有关用户、曲目、播放列表、喜欢、转发、评论、评论、收藏、关注者和其他有用数据。

我使用Vercel进行部署。部署应用程序非常简单，只需将源代码托管在GitHub上，然后将其导入 Vercel 即可。它会在后台为您完成所有繁重的工作——构建流程和配置。您只需设置环境变量即可。

移动响应能力

这款收音机的首要任务之一是能够充分响应不同的屏幕宽度。这样，它就能在多种设备上高效使用。

为了实现这一点，我在 700px 设置了一个媒体规则，其中 UI 从顶部和底部导航切换到全屏界面。

结论

几年前，开发自己的广播应用还是个梦想。现在，我很高兴看到编程已经成为一种强大的工具，可以帮助其他开发者走上他们的发展之路。

希望DevTunes FM能提升您的开发效率。欢迎试用，看看是否喜欢。欢迎提供反馈。

将来，我将专注于改进当前的代码库，对其进行测试并继续探索新的音乐以将其添加到电台中。

欢迎随时向hi@madza.dev提交功能请求、音乐推荐或其他相关内容。

让我们联系起来！

写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！

在Twitter、LinkedIn和GitHub上关注我！
访问我的Portfolio 页面，了解更多项目。