CodeasilyX - 可记录交互行为的代码编辑器

1,594 阅读9分钟

本文只是介绍这个项目,不开源代码,但这个项目是在市面上几乎没有同款的产品创意,如果觉得这个创意有价值的话可以找我合作🤝。

此项目暂时无法体验,请看文章内演示

Demo演示

先附上demo链接:x.codeasily.net/,demo写的比较随意,还容易出bug,为保证稳定,请尽量使用新版chrome浏览器访问,第一次访问会加载一些默认的演示配置会比较久,请耐心等待

进入后直接点左上角的播放按钮 ▶️,此时应该可以听到播放的声音,如果没听到,请确认浏览器权限或者刷新重试。

然后就可以看到我的演示过程在你的浏览器上播放出来,鼠标的移动、点按操作、选择文本、键盘输入都是真实有效的。

如果您已经看完了演示片段,可以尝试自己录制一段,点击左上角的录制按钮⏺开始录制,再点击一次⏹结束录制,然后点播放按钮就可以播放出你刚才录制的片段了

到这里我想您应该明白这个产品的主要功能了吧,还有很多特色功能没有在演示片段中展示出来,你可以自己体验一下,或者继续往下看看功能讲解。

功能介绍

录制交互行为

录制交互行为的原理可以大致理解为就是在录制时记录鼠标点按键盘操作等一系列事件及相关参数,在播放时再模拟出来,但这个方式只能满足普通场景的情况,还有一些场景如编辑器自动输入、预览框记录交互行为就得用特定的方案实现,目前可以录制的交互有(鼠标移动、鼠标点按、选择文本、编辑器输入甚至剪贴板粘贴都可以、以及预览框内的鼠标移动点按、键盘输入等操作)

代码编辑器

代码编辑器应该很容易就可以猜到是微软的monaco-editor,也就是vscode的代码编辑器,功能特性和快捷键都是与vscode一致。

文件管理

这块红色方框区域

这个文件管理做的很随便,只能算是能用的水平,单击文件夹可以收缩展开,单击文件名可以进行代码编辑,得益于monaco-editor,只需要实例化一个编辑器,可以打开多个不同的文件,并保留打开过的文件状态,就跟vscode里的代码上方的文件标签一样,只是这里没有展示出来。

在文件夹点鼠标右键弹出菜单,可以新建文件、新建文件夹、重命名和删除,在文件命名点鼠标右键则在刚才文件夹菜单的基础上增加了一个run的功能,就是直接运行这个文件的意思了,只有html文件有这个功能,运行这个文件实际上就是运行在预览框里,可以往下看预览框的讲解。

预览框

窗口里占最大的这块区域

它的作用很明显就是运行代码查看预览的,根据这个长得像浏览器的地址栏的输入框决定它运行的是哪个文件。

刚才在文件管理提到的run功能,实际上就是拿对应文件的路径告诉预览框运行这个文件的。也可以手动修改这个路径决定要预览的文件。

运行html文件中的代码原理很简单,就是用iframe放入这个文件代码内容即可,但这个项目里是有文件管理的,可以引用相对路径的文件,目前的方案是简单粗暴的把相对路径的文件代码都拼到一起来运行的。真要做成熟的话可能需要有真正的虚拟机环境的文件管理的。

顶部工具栏

这条工具栏是最多功能也是最多bug的组件😓,我从左到右讲解它的功能吧:

录制播放

录制是通过requestAnimationFrame来记录每一帧对应的差异更新的内容,并且是有动作的时候才会记录,尽量减少了录制后占用的空间大小。

录制的内容除了前面提到的那些交互行为,还有音频,音频录制是用navigator.mediaDevices.getUserMedia 获取麦克风输入流,连接到一个处理节点(ScriptNode),获取到Float32Array类型的PCM数据,拼接到一个Blob对象就可以导出音频文件,而在播放时直接用HTML5的video标签载入音频文件就可以播放音频了。

在录制时点击结束录制按钮⏹,实际上是暂停录制的状态,如果再点击录制按钮⏺,会弹出这样的提示

点击确定可以继续录制,在结束录制时自动拼在上一次结束录制的片段后面(相当于录视频时按了暂停,又可以继续录制的意思)

点击取消则当做舍弃之前的录制片段,重新录制了

后来在做demo加载演示的音频文件时发现PCM文件太大了,不利于传输下载,所以我又加入了mp3编码,用的开源的lamejs来将PCM编码成mp3的编码形式,编码后的文件大小足足小了十倍,demo项目里的演示片段就是经过mp3编码后的音频,下载时间在可接受范围。如果对这块感兴趣的话可以查看往期文章《音频处理之文件编码与解码(二)

关于播放也在前面有提到过了,就不再赘述了,另外还有一个小彩蛋,在播放时的声音音调会比实际的低(也就是听起来更浑厚像抠脚大汉),这里我是做了个变音处理的,在往期文章有更深入的解释《音频处理之变音变调

进度条

进度条只有在播放时才有用到,正常播放很简单,根据总时间长度和当前时间决定进度条的长度。而进度条拖动实现起来的难度就不是一个维度的了,有了拖动就跟播放的功能绑定起来了,进度条拖动提供了拖动的位置,播放功能根据拖动位置渲染对应帧的界面,前面提到录制的内容其实不是每一帧的所有内容,而是差异更新的内容,所以当要拖动指定某一帧进度的时候,并不知道这一帧的全部内容,无法一步到位。

原本的做法是这样的:

  1. 如果是点按指定进度的情况,则先还原到原始的所有内容,再遍历该帧之前的每一个有记录的帧的差异更新内容,最终得到该帧的正确界面。

  2. 如果是拖动进度条的情况,则要区分往右拖动(正向时序)是可以直接正向差异更新,无需遍历,这样是非常快的,可以顺滑的看到拖动时每一个动作的变化,但是往左拖动(逆向时序)就没那么好做差异更新了,逆向差异更新并不好实现,比如在代码编辑器里插入一段剪贴板粘贴的内容,你并不知道这段选取range之前是长什么样的,类似的情况还有很多,处理起来会比较麻烦,所以我没有花太多精力去实现这个小功能,如果要实现的话可能需要改进录制时记录的内容(各种情况都要考虑进去),理论上是能够做到逆向差异更新的。

后来没精力实现逆向差异更新,就改成拖动进度条不做任何操作,在放开鼠标时渲染指定帧的内容,也就是只有原本做法的第一种情况,以后有精力再完成拖动实施更新的效果。

时间显示及倍速调整

时间显示没啥好说的,按剩余时间显示,而最右边的图标,点击会弹出倍速选择,可以直接选择倍速播放,这里对于差异更新的内容可能会存在跳帧播放的问题,其实在前面的录制播放有提到过是有动作的时候才会记录,所以并不是每一帧都有内容,那么我在播放时就会判断当前帧之前如果有未渲染的内容就会渲染出来,有多个就遍历渲染出来,这样就避免了跳帧问题了。

功能基本上就这些,写的不是很好,如有用词不当请指正,望见谅🙏

结语

其实这个可记录交互行为的代码编辑器的创意来源,是有原型的,来自国外的一个教程网站scrimba.com/,这个教程网站做得很成熟,还自带ppt演示,这种教程方式我觉得很直观,就好像有老师在旁边手把手教你,帮你敲代码一样,所见即所得的感觉,可以随时停下来自己敲代码调试,比起视频教程,这个没有清晰度的困扰,能直接上手,具有一定的优势。但这个网站的教程好像只有web方面的,要是引入python、go之类的编译器,应该是可以丰富教程内容的。

我做这个项目的原因一方面是发现国内没有这种教程网站,或许可以尝试做一下,有个起步,另一方面是顺着这个创意看能不能发现另外的门路,不一定是做教程网站,可以是别的工具。要是有想法的朋友可以联系我的邮箱:lipten@foxmail.com