使用React Native构建免费的音乐站点

因此，您想使用React Native建立一个音乐站点。 由于某些技术限制，这不是一项普通的任务，但仍有可能。 选择的框架最适合移动应用程序，因此您可以获得两种甚至三种产品，而不是一种：音乐网站以及适用于iOS和Android的移动应用程序。 听起来不错吧？ 问题是如何开发这样的解决方案，我们将在本指南中回答。

首先，让我们同意不涉及复杂的技术问题。 您不会在此处找到代码段。 相反，您可以专注于计划和策略，了解音乐平台，React Native基础知识以及最佳的开发方法。 很明显，让我们开始吧！

关于音乐发行的一句话

音频内容多种多样，音乐软件也多种多样。 有流媒体应用程序（例如Spotify），免版税库（例如TakeTones） ，在线广播电台，媒体播放器，混音器，音乐制作工具。 在拥有自己的网站的路上，您的第一个目标是确定您实际在建造什么。 产品的目标是什么？ 如何根据用户需求量身定制？ 它应该具有哪些功能？

• 对于音频使用案例，我们可以定义一些选项：
• 互动声音。
• 通知。
• 录制的声音。
• 流媒体。
• 画外音。

您可以在上表中看到这些点。 根据它们，您可以定义哪个区域对您理想的音乐站点最关键。 通常，Web平台依赖具有音频的庞大数据库。 Web应用程序支持录音，旁白和交互式用法。 移动解决方案通常集中在流和通知上。

由您决定选择哪个或哪些部分，但切记不要使解决方案具有过多功能。 我们建议选择一个或两个核心方面并适当地解决它们。 以依赖流媒体的Spotify为例。 这项服务非常受欢迎，但非常简单。 根据区域，您可以选择功能部件并计划开发本身。

React Native 101

React Native是一个移动应用程序框架，可增强React开发。 这两个项目均基于JavaScript，由Facebook设计。 根据名称，React Native适合各种应用程序界面的本机开发，包括针对Web，iOS，Android以及跨平台项目的解决方案。 它还支持Android上的Java和iOS上的Swift / Objective-C的本机编码。 基本原理与React中的基本原理几乎相同。

正如您现在应该了解的那样，React Native被广泛用于应用程序开发。 软件工程师欣赏其核心功能：

• 实时重新加载。 此功能激活两个屏幕：用于编码和检查。
• 赞美UI。 该框架具有响应能力并且可以快速呈现，从而提高了UI。
• 提供良好的性能。 它是面向GPU的，因此比CPU类似物工作得更好。
• 支持第三方工具。 您可以自由添加外部库。
• 深受用户信赖。 它是由Facebook开发的，拥有强大的社区。
• 使用JavaScript。 重要的是，它是核心网络语言之一。
• 适用于所有平台。 您可以编写一次代码，然后在许多系统上运行它。

同时，此框架也可以用于Web开发。 此外，我们将回到这个问题。

React本地音频库

现在，让我们进入React Native开发的技术基础。 在为您的音乐平台选择适当位置并确定主要功能之后，主要步骤是选择库。 这些存储库附带许多预制的UI组件。 因此，通过采用适当的元素并将其放入软件中，您可以节省大量时间。

还记得我们的音乐服务排行榜吗？ 查看相同的图表，但带有用于音频内容的React Native库。 在这里，水平轴定义了您的应用如何与音频文件交互（使用本地文件或按需获取它们）。 垂直轴反映了再现方法。 大的播客通常流式传输，而小的声音可以一次加载。

资料来源： 埃米特·哈珀（Emmett Harper）

检查图表，选择象限，然后使用适当的库。 您不仅限于这些组件，可以随时从React Native中寻找其他组件。 对于您的信息，这里有一些基础知识：

React本机音频。 主要用于记录。 如果您需要在应用程序中或网站上使用此功能，可能会有所帮助。

React-native-audio-toolkit。 具有Android背景音频，基本控件，记录和本地+网络存储。 尽管如此，它仍无法流式传输音频。

React本机音乐控制。 为其他最初没有媒体库的库提供媒体控制功能。

React本机声音。 在本地存储文件，可以访问网络，不录制或播放音乐，支持iOS背景。

React-native-track-player。 支持所有平台的背景，具有广泛的控件，可以流式传输和投射，并通过API集成。

React-native-video。 显然，专注于视频，但也可以与音乐一起使用。 具有仅音频首选项。

除了库之外，您可能还需要其他功能。 描述所有开发方法几乎是不可能的，因此让我们看一些基本知识。

从应用程序到网站

添加和调整选定的库之后，您应该专注于特定于产品的功能。 例如，音频播放器需要媒体控制，而在线音乐数据库需要搜索和过滤工具。 选择哪种方法取决于您。 有关更多实际示例，我们建议您查看逐步指南。 例如，这里有一个类似Spotify的测试用例 。 这是实现最终发展的故事。

这是主要问题：是否有可能在Web上使用React Native？ 尽管该框架专注于移动开发，但它可以与传统的React结合使用。 不幸的是，这些工具使用不同的原语。 要连接两个框架，可以使用名为React Native for Web的项目。 简而言之，它提供了React Native组件的浏览器版本以及CSS样式。

总体而言，该解决方案对于想要使用React Native的Web开发人员非常有用。

最后的想法

坦白地说，用于Web开发的React Native并不是最直接的选择。 许多工具具有更丰富的功能和/或更熟悉的原理。 但是，React Native非常适合音乐应用程序，因为它允许您构建跨平台产品。 由于有了各种库，开发人员可以使用现成的组件并节省时间。 如果要开发音乐应用程序，请考虑使用此框架。

翻译自: https://hackernoon.com/building-a-free-music-site-using-react-native-514n3v4u