使用Web Speech API将语音转换为文本

本教程中,我们将尝试使用Web Speech API,这是一个非常强大的浏览器接口,可以用来记录语音并将其转换为文本,同样的,也可以用来朗读字符串。

接下来进入正题,这个App应当具有以下几个功能:

1、通过语音录入或者键盘输入的方式保存笔记;
2、将笔记保存到本地;
3、显示历史笔记并可以通过语音朗读笔记;

继续阅读 →

让C代码在浏览器中运行——WebAssembly入门介绍

WebAssembly作为一种新兴的Web技术,相关的资料和社区还不够丰富,但其为web开发提供了一种崭新的思路和工作方式,未来是很有可能大放光彩的。

使用WebAssembly,我们可以在浏览器中运行一些高性能、低级别的编程语言,可用它将大型的C和C++代码库比如游戏、物理引擎甚至是桌面应用程序导入Web平台。

继续阅读 →

使用Phaser框架构建你的第一个H5游戏

还记得贪吃蛇这个经典游戏吗?在诺基亚时代,在黑白像素点游戏机时代,就是这样一个简单的游戏也能让我们玩上几个小时。

在这篇文章,我们将使用HTML5来重现这个游戏,基于著名的开源HTML5游戏框架——Phaser。你将了解到游戏精灵、游戏状态,以及如何使用预加载(preload)、创建(create)与刷新(update)方法。

继续阅读 →

CSS栅格系统与弹性盒模型:实践比较

多年以前,所有的HTML页面布局都是通过table、float以及其他CSS属性完成的,但这些方法并不适合构建复杂的web页面。

于是,W3C推出了flexbox(弹性盒模型)——一种专门用于构建健壮的响应式页面的布局模式。使用flexbox可以很容易地对齐页面元素和内容,而它也是现在大多数web开发者首选的CSS系统。

现在,最佳HTML布局系统的称号又多了一个新的竞争者,它就是强大的CSS Grid,3月底,它就已经得到了Firefox 52和Chrome 57的原生支持,其他浏览器相信也会紧随其后。

继续阅读 →