热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

前端如何查看音频的长度_精通编程:自我挑战,解决一系列前端难题

全文共2457字,预计学习时长7分钟图源:unsplash你是否听过一万小时定律?它指的是,要想成为某方面的大师࿰

全文共2457字,预计学习时长7分钟

52ce32a0326b31b7443281e7f229f098.png

图源:unsplash

你是否听过一万小时定律?它指的是,要想成为某方面的大师,就必须要实践一万个小时。虽然并非适用于所有领域,但至少作为一名开发人员,最有效的成长方法之一就是投入尽可能多的时间。

从下面列表中选择一个项目并开始编码吧!使用哪种技术或工具并不重要,重要的是你亲手完成了一个项目。

Jira克隆

Jira是Atlassian开发的专利问题跟踪产品,提供bug跟踪和灵活的项目管理服务。产品名称源自Gojira,Gojira在日语中是哥斯拉的意思。

de553e927d651fdc8b103fc2beff853a.png

Jira | 图源:GitHub

构建Jira克隆,你将学到以下内容:

· 拖放(DND)API如何服务于浏览器:每个Jira板都有一个看板集合,在那里你可以根据任务的进度拖放任务。

· 如何安排用户角色和访问权限逻辑:每个看板都有相关的成员,成员可能具有不同的访问级别。例如,项目经理可能具有阅读、编写和编辑权限,而客户可能只有阅读权限。客户可以看到正在进行的工作和已经完成的工作,但是他们不能改变团队当前正在进行的工作。

· HTML和CSS:从语法层面构建应用设计风格是任何人都能拥有的实用技能。

使用Emoji的Discord聊天

当和朋友们一起外出或玩电子游戏时,Discord是一种有趣的联系方式,它专注于聊天频道中用户之间的文本、图像、视频和音频通信。每个Discord频道都有可供用户选择的表情符号,你的任务是构建包含表情符号的聊天部分。如果愿意,你可以建立整个Discord克隆。

c292327c9bae9a474eb9c243654c690b.png
19ef11e33ce05ff19d6b78e9b83050cb.png

构建Discord聊天克隆,你将学会:

· 如何将网络套接字应用于聊天。每个现代网络聊天应用程序都在以某种方式使用WebSockets。WebSocket是一种计算机通信协议,在一个TCP连接上提供全双工通信通道。简而言之,服务器和前端客户端是同步的。

· 如何使用Electron构建跨平台的桌面应用程序,当前版本的Discord就是通过Electron构建的。

Beatbox应用

Beatbox应用程序会根据你当前所按的键播放不同的声音,只用键盘就可以演奏一段曲子。

0c69558e8b98050d41df8669731fda2b.gif

图源:GitHub

构建Beatbox应用,你将学会:

· 为了激活声音,需要熟悉WebAudio API是如何工作的。

· 使用Javascript键盘。必须弄清楚按的是什么键,然后演奏正确的曲子。

Mozilla开发者文档:“Web Audio为控制Web上的音频提供了一个强大的多功能系统,允许开发人员选择音频源、向音频添加效果、创建音频可视化界面、应用空间效果(比如移动)等等。”

Spotify唱片区

你可以在Spotify上播放和上传歌曲。Spotify有一个版块,可以根据专辑浏览音乐和艺术家。下面是我最喜欢的专辑之一。

f66594618104d4f820ff0e13e51d96b8.png

金属乐队(1991)专辑

构建Spotify克隆,你将学会:

· 如何通过API获取数据,并为相关艺术家显示正确的专辑。幸运的是,Spotify有一个可以免费使用的API:https://developer.spotify.com/documentation/web-api/

· 可以将app构建为web或桌面应用程序。这两种应用程序都需要了解如何在页面上布局元素并对其进行适当的样式化处理。

亚马逊克隆

亚马逊刚成立的时候还只是一个卖书的小型电子商务网站,如今,它们已经是电子商务领域的巨人。

从零开始,慢慢来,为了学习要模仿它的每个特点。不要试图复制亚马逊的商业模式,而是以学习为目的尝试建立一个类似的网络体验。亚马逊的核心是一个大型数据库,在进行搜索时,它将从数据库中返回正确的条目。当然,亚马逊远不止这些,但这是一个非常简单的例子。

3185539f14adf61cca21278a42c622f5.png

亚马逊克隆:Github

构建亚马逊克隆,你将学会:

· 设置MySQL或者PostgreSQL,学会在数据库中存储条目。需要将条目存储在数据库中,然后再从中查询条目。

· 支持搜索功能。用户登录你的网站,搜索条目,你需要给出相应的内容。你要怎么做?

· HTML和CSS。每个网站都会使用的两种技术,不管是初学者的简单项目,还是非常复杂的网站比如Netflix或亚马逊,都会用到。

这是我在GitHub上找到的一个简单的亚马逊克隆:https://github.com/CleverProgrammers/react-challenge-amazon-clone?ref=HackerTabExtension

f9f8ae3e4cd0b8ed6ad8590e3d70caf9.png

Netflix克隆

Netflix是观看电视剧、电影和纪录片的热门选择,彻底改变了我们看电视的方式,能够在任何地方用任何设备观看。

a8b964168159139c7d51e2f86358e419.png

Netflix主页 | 图源:Netflix

构建Netflix克隆,你将学会:

· 使用HTML和CSS。

· 可选项:如何通过API搜索电影和电视剧。

· 音视频API:Netflix的核心是流媒体服务,每个流媒体服务在某种程度上都包含视频或音频。

推特克隆

推特是一个热门的讨论平台,从政治到音乐再到编程,上面有很多小众社区,许多人喜欢使用推特和粉丝互动。

d3224a394ba723607fc00f5a07ebe281.png

笔者的推特个人主页 | 图源:Twitter

构建推特克隆,你将学会:

· HTML和CSS用于与布局相关的部分。

· 在数据库中存储tweet:设置一个关系(MySQL)或一个非关系(MongoDB)数据库。

· 角色管理逻辑:每个用户都有一个档案,只有自己可以编辑,其他人可以查看。

希望你已经为下一个项目找到了灵感,开始行动吧!

92c0c839d400164c4f120504838befba.png

留言点赞关注

我们一起分享AI学习与发展的干货

如转载,请后台留言,遵守转载规范



推荐阅读
  • 网络运维工程师负责确保企业IT基础设施的稳定运行,保障业务连续性和数据安全。他们需要具备多种技能,包括搭建和维护网络环境、监控系统性能、处理突发事件等。本文将探讨网络运维工程师的职业前景及其平均薪酬水平。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 本文档详细介绍了在 CentOS Linux 7.9 系统环境下,如何从源代码编译安装 libwebsockets 库及其示例程序,并提供了编译过程中可能遇到的问题及解决方案。 ... [详细]
  • 在 Ubuntu 22.04 LTS 上部署 Jira 敏捷项目管理工具
    Jira 敏捷项目管理工具专为软件开发团队设计,旨在以高效、有序的方式管理项目、问题和任务。该工具提供了灵活且可定制的工作流程,能够根据项目需求进行调整。本文将详细介绍如何在 Ubuntu 22.04 LTS 上安装和配置 Jira。 ... [详细]
  • 2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商,ARM在嵌入式处理器市场占据主导地位,其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家,共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • 在现代网络环境中,两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效,但其配置复杂、步骤繁琐,难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc,它不仅简化了操作流程,还提供了强大的加密和跨平台支持。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 随着毕业设计的结束,我终于有时间更新我的博客了。这次,我将分享如何在自己的服务器上搭建 Bitwarden,一个广受好评的开源密码管理工具。 ... [详细]
author-avatar
mobiledu2502895753
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有