记录内容的方法、记录内容的呈现方法和电子设备与流程

本技术涉及电子，具体涉及一种记录内容的方法、记录内容的呈现方法和电子设备。

背景技术：

1、笔记应用程序(application，app)是用户常用的app。目前，很多笔记app在实现记录文本内容的同时，还能够实现录音，这样能够满足用户在课堂学习、参加发布会等使用场景下的需求。为了提高用户体验，一些笔记app还能够实现录音播放和文本内容显示的双向定位，即：录音播放进度与文本内容突出显示的进度同步，当用户将录音播放进度条拖动至某一进度时，文本内容中与该播放进度对应的内容也突出显示；反之，当用户点击某一位置的文本内容时，录音播放进度也能跳转至该位置对应的播放进度。

2、然而，相关技术中的笔记app的双向定位功能不能跨系统使用，例如，通过安卓(android)系统的手机生成的笔记，在windows系统的个人计算机(personal computer，pc)中打开时，无法实现录音播放和文本内容显示的双向定位。这样，影响了用户体验。

技术实现思路

1、本技术提供了一种记录内容的方法、记录内容的呈现方法和电子设备，能够实现所记录的内容的跨系统呈现，提高用户体验。

2、第一方面，本技术提供一种记录内容的方法，该方法由电子设备执行，该方法包括：在录音至第一录音时长的时刻，响应于用户输入第一内容的操作，基于超文本标记语言html，生成第一内容对应的第一html标签；保存第一内容和第一html标签；根据第一html标签，确定第一位置信息，第一位置信息表征第一内容在html页面中的位置；根据第一位置信息和第一录音时长，生成第一映射关系信息。

3、可选的，本实施例提供的方法可以由电子设备中安装的笔记app执行。笔记app在录音的同时能够记录笔记内容。具体的，当用户打开笔记app，并开始录音。录音过程中，在录音时长为第一录音时长的时刻，若用户输入第一内容，则笔记app基于html语言，生成第一内容对应的第一html标签。第一html标签用于定义、限定或记载第一内容相关的信息。第一html标签可以为一个或多个，或多组标签。第一html标签例如可以用于包括用于定义段落的段落标签，用于定义属性的标签，用于定义显示格式的标签等等。总而言之，通过第一html标签能够将第一内容显示于html页面(也称为网页)中。

4、笔记app对第一内容和第一html标签进行保存，例如保存至内容文件中。同时，笔记app还根据第一html标签生成第一位置信息。第一位置信息用于表征第一内容在html页面中的位置。换句话说，第一位置信息是通过html标签相关的信息来表示的位置信息。根据第一位置信息能够在内容文件中找到第一内容。

5、之后，笔记app根据第一位置信息和第一录音时长生成第一映射关系信息。可选的，笔记app可以直接生成第一位置信息和第一录音时长的映射关系信息，也可以对第一位置信息和/或第一映射关系信息进行处理后，生成映射关系信息。

6、需要说明的是，这里的第一内容可以为具体实施方式中的html元素，这里的第一映射关系信息是指第一内容的映射关系信息，这里的第一位置信息为第一位置信息中的位置信息。位置信息对应于具体实施方式中的h5位置信息。

7、上述第一方面提供的方法，基于html语言生成第一内容对应的第一html标签，保存第一内容和第一html标签。基于第一html标签生成第一位置信息，进而根据第一位置信息生成第一映射关系信息。html语言在不同系统的电子设备中均遵循相同的解析协议，可以实现跨系统的数据互通。因而本技术实施例提供的方法中，通过html语言记录的笔记内容和映射关系信息在其他系统的电子设备也能够被识别，所以该方法保存的第一内容和第一html标签以及第一映射关系信息，在其他系统中也能够被识别，因而实现录音播放与笔记内容显示的双向定位，提高用户体验。

8、一种可能的实现方式中，第一位置信息表征第一内容在html页面所处的目标段落，以及在目标段落中的位置范围。该实现方式中，通过段落和在段落中的位置范围表示第一位置信息，无需记录第一内容中每个子内容的位置，简化第一位置信息，提高记录的便捷性和算法的运行效率。

9、一种可能的实现方式中，第一位置信息包括起始子内容的绝对位置和结束子内容的绝对位置；起始子内容是指第一内容中沿第一方向的第一个子内容，结束子内容是指第一内容中沿第一方向的最后一个子内容；起始子内容的绝对位置用于表征起始子内容在html页面所处的第一目标段落，以及起始子内容在第一目标段落中的位置；结束子内容的绝对位置用于表征结束子内容在html页面所处的第二目标段落，以及结束子内容在第二目标段落中的位置。

10、也就是说，起始子内容所在的段落称为第一目标段落，结束子内容所在的段落称为第二目标段落。通过起始子内容和结束子内容的绝对位置，能够确定出第一内容所在的段落和在段落中的位置范围，方法简单，提高算法运行效率。

11、一种可能的实现方式中，第一内容保存于内容文件，第一html标签包括第一段落标签和第二段落标签，第一段落标签用于定义第一目标段落，第二段落标签用于定义第二目标段落；起始子内容的绝对位置包括：第一段落标签在内容文件中包含的所有段落标签中的次序数，以及起始子内容在第一目标段落的所有子内容中的次序数；结束子内容的绝对位置包括：第二段落标签在所有段落标签中的次序数，以及结束子内容在第二目标段落的所有子内容中的次序数。

12、具体的，内容文件中可以包括多个段落标签，通过确定第一段落标签的次序数，也即为第几个段落标签，即可确定起始子内容所在的段落。同样的，通过确定第二段落标签的次序数，即可确定结束子内容所在的段落。另外，第一段落标签定义了第一目标段落中包括的内容，因而可以通过对比、匹配或计数等方式确定起始子内容在第一目标段落中的次序数(也即为第一目标段落中的第几个子内容)，从而确定起始子内容在该段落中的位置。结束子内容也是同样。该实现方式能够快速、准确的得到第一位置信息。

13、一种可能的实现方式中，第一位置信息还包括起始子内容的相对位置和结束子内容的相对位置；起始子内容的相对位置用于表征起始子内容在第一内容中所处的位置，结束子内容的相对位置用于表征结束子内容在第一内容中所处的位置。

14、一种可能的实现方式中，起始子内容的相对位置为：起始子内容在第一内容中的次序数；结束子内容的相对位置为：结束子内容在第一内容中的次序数。

15、也就是说，起始子内容的相对位置是指，在第一内容中，起始子内容为第几个子元素，结束子内容的相对位置是指，在第一内容中，结束子内容为第几个子元素。通过起始子内容的相对位置和结束子内容的相对位置，便于在段落中更准确的查找和定位第一内容的位置范围，使通过第一位置信息查找第一内容时，查找的更加准确性。

16、一种可能的实现方式中，第一映射关系信息中包括第一相对时间与第一位置信息的映射关系，第一相对时间根据第一录音时长确定。

17、这里，第一相对时间是指第一映射关系信息中的相对时间。映射关系信息中的相对时间对应于具体实施方式中的h5相对时间。

18、也就是说，在得到第一录音时长后，先根据第一录音时长，按照预设的规则确定对应的第一相对时间，再建立第一相对时间与第一位置信息的映射关系。由于笔记app在录音时，实时的提供录音时长，因而通过对第一录音时长处理后得到第一相对时间，再基于第一相对时间建立第一映射关系信息，能够使第一映射关系信息中的时间信息具有一定规律，便于后续查找，提高笔记呈现过程中的算法运行效率。

19、一种可能的实现方式中，第一相对时间为大于或等于第一录音时长且与第一录音时长差值最小的整秒数。

20、也就是说，对第一录音时长向后取整秒，得到第一相对时间。按照这样的规则建立的多组映射关系信息中，多个相对时间之间的间隔为一秒，便于查找和笔记呈现。

21、一种可能的实现方式中，根据第一位置信息和第一录音时长，生成第一映射关系信息之前，该方法还包括：根据输入第一内容时的输入模式，确定第一内容的内容类型为html类型；第一映射关系信息中还包括html类型与第一相对时间、第一位置信息的映射关系。

22、该实现方式中，映射关系信息中包括内容类型，便于后续根据内容类型确定对应内容的显示方式，而且便于在笔记呈现时，根据内容类型确定是否执行对映射关系信息的遍历查找，减少不必要的遍历查找过程，节约电子设备资源。

23、一种可能的实现方式中，第一内容保存于内容文件中，html页面中还显示有其他内容，内容文件中还保存有其他内容，电子设备中还包括其他内容的其他映射关系信息；该方法还包括：响应于用户对html页面中第二位置的内容的第一修改操作，修改内容文件中第二位置对应的内容；根据第一映射关系信息和其他映射关系信息，确定与第二位置匹配的位置信息，得到第一待修改位置信息；根据第一待修改位置信息更新第一映射关系信息和/或其他映射关系信息。

24、也就是说，笔记app记录了多组内容，并保存了多组映射关系信息。在录音继续进行的情况下，若用户对已经输入的内容进行了修改，则在对应修改内容文件中记录的内容外，还根据用户修改的位置以及具体的修改类型，对相关的映射关系信息进行更新。这样能够提高映射关系信息的准确性，从而使后续在记录的内容(称为笔记)的呈现过程中，录音播放与笔记内容之间的双向定位更加准确，进一步提高用户体验。

25、一种可能的实现方式中，第一待修改位置信息为第一位置信息，根据第一待修改位置信息更新第一映射关系信息和/或其他映射关系信息，包括：若第一修改操作用于指示删除第一内容中的全部子内容，则删除第一映射关系信息，并根据第一内容中子内容的个数，修改第二相对时长对应的位置信息，第二相对时间为其他映射关系信息中大于第一相对时间的相对时间；若第一修改操作用于指示删除第一内容中的部分子内容，则修改第一位置信息，并根据删除的子内容的个数，修改第二相对时间对应的位置信息；若第一修改操作用于指示增加第二内容，则拆分第一位置信息为第一子位置信息和第二子位置信息，根据第二内容中子内容的个数，修改第二相对时间对应的位置信息，并生成第二内容的第二映射关系信息；第一子位置信息和第二子位置信息中均不包含第二位置，且均与第一相对时间对应；若第一修改操作用于指示替换第一内容中的部分或全部子内容为第三内容，则修改第一位置信息，根据第三内容中子内容的个数，修改第二相对时间对应的位置信息，并生成第三内容的第三映射关系信息。

26、该实现方式提供的方法实现了在各种修改操作下，相关映射关系信息的更新，提高了映射关系信息的准确性。另外，该实现方式中，在修改操作指示增加内容或替换内容的情况下，重新生成映射关系信息。这样，后续在笔记呈现过程中，能够实现新增内容的显示与录音播放的双向定位，便于用户更清楚的获知笔记记录过程，进一步提高用户体验。

27、一种可能的实现方式中，第一内容保存于内容文件中，html页面中还显示有其他内容，内容文件中还保存有其他内容，电子设备中还包括其他内容的其他映射关系信息；该方法还包括：响应于用户的第二操作，暂停录音，并持久化第一映射关系信息和其他映射关系信息；响应于用户对html页面中第三位置的内容的第二修改操作，修改内容文件中第三位置对应的内容；根据第一映射关系信息和其他映射关系信息，确定与第三位置匹配的位置信息，得到第二待修改位置信息；根据第二待修改位置信息更新第一映射关系信息和/或其他映射关系信息。

28、也就是说，在录音暂停的情况下，若用户对已经输入的内容进行了修改，则在对应修改内容文件中记录的内容外，也根据用户修改的位置以及具体的修改类型，对相关的映射关系信息进行更新。这样能够提高映射关系信息的准确性，从而使后续在称为笔记的呈现过程中，录音播放与笔记内容之间的双向定位更加准确，进一步提高用户体验。

29、一种可能的实现方式中，第二待修改位置信息为第一位置信息，根据第二待修改位置信息更新第一映射关系信息和/或其他映射关系信息，包括：若第二修改操作用于指示删除第一内容中的全部子内容，则删除第一映射关系信息，并根据第一内容中子内容的个数，修改第二相对时长对应的位置信息，第二相对时间为其他映射关系信息中大于第一相对时间的相对时间；若第二修改操作用于指示删除第一内容中的部分子内容，则修改第一位置信息，并根据删除的子内容的个数，修改第二相对时间对应的位置信息；若第二修改操作用于指示增加第四内容，则修改第一位置信息，并根据第四内容中子内容的个数，修改第二相对时间对应的位置信息；若第二修改操作用于指示替换第一内容中的部分或全部子内容为第五内容，且第一内容中被替换的子内容的数量与第五内容中子内容的数量不相等，则修改第一位置信息，并根据第一内容中被替换的子内容的数量与第五内容中子内容的数量的差值，修改第二相对时长对应的位置信息。

30、在录音暂停的情况下，对于指示增加内容或替换内容的修改操作，不重新生成映射关系信息。该实现方式中，将后续修改或增加的内容均纳入已有的映射关系信息中的位置范围中，使得后续录音播放时也能对这些内容进行定位，进一步提高用户体验。

31、一种可能的实现方式中，该方法还包括：启动录音时，记录录音开始时刻；在录音过程中，响应于用户输入第六内容的操作，记录第六内容和第六内容的落笔时刻，第六内容的内容类型为手写内容。

32、该实现方式中，通过记录录音开始时刻和手写内容的落笔时刻，便于后续在录音播放与笔记内容显示的双向定位过程中，确定手写内容的手写相对时间，从而便于实现双向定位。

33、一种可能的实现方式中，录音得到的音频保存于录音文件，第一内容和第一html保存于内容文件，第一映射关系信息保存于映射文件中，该方法还包括：响应于第三操作，将html页面保存为html格式的目标文件；若内容文件中包括手写内容，则生成第一转换文件，第一转换文件为java脚本js格式的代码文件，第一转换文件用于读取手写内容，并将手写内容转换为图片格式；生成第二转换文件，第二转换文件为js格式的代码文件，第二转换文件用于获取录音播放时长，根据映射文件，确定与录音播放时长匹配的目标相对时间，并确定目标相对时间对应的目标位置信息，并显示内容文件中目标位置信息对应的内容；第二转换文件还用于响应于html中目标位置的内容被选中，根据映射文件，确定与目标位置匹配的目标位置信息，并确定目标相对时间对应的目标相对时间，从目标相对时间处开始播放录音文件；保存资源文件夹，资源文件夹中包括第一转换文件、第二转换文件、内容文件、录音文件和映射文件；建立目标文件与资源文件夹中内容的对应关系。

34、其中，第一转换文件对应于具体实施方式中的手写转换js文件，第二转换文件对应于具体实施例方式中的定位逻辑js文件。

35、该实现方式中，通过将html页面保存为html格式的目标文件，生成第一转换文件和第二转换文件，同时保存资源文件夹，并建立目标文件和资源文件夹中内容的对应关系。这样，后续若用户需要在未安装笔记app的电子设备中打开笔记时，可以通过浏览器读取目标文件，且资源文件夹中的第一转换文件能够在网页中包含手写内容时，读取手写内容，并将手写内容转换为图片格式，不影响手写内容的显示。同时，资源文件夹中的第二转换文件，能够实现录音文件的播放与内容文件中内容显示的同步和双向定位，进一步提高用户体验。

36、一种可能的实现方式中，电子设备包括笔记app，笔记app包括html编辑器，该方法包括：在录音至第一录音时长的时刻，响应于用户输入第一内容的操作，html编辑器基于超文本标记语言html，生成第一内容对应的第一html标签；html编辑器保存第一内容和第一html标签；html编辑器根据第一html标签，确定第一位置信息；html编辑器根据第一位置信息和第一录音时长，生成第一映射关系信息。

37、第二方面，本技术提供一种记录内容的呈现方法，该方法由电子设备执行，该方法包括：获取录音文件、内容文件和映射文件；内容文件中包括第一内容和第一内容对应的第一html标签，映射文件中包括第一映射关系信息，第一映射关系信息用于表征第一位置信息与第一录音时长的映射关系，第一位置信息为根据第一html标签确定的，用于表征第一内容在html页面中位置的信息，第一录音时长为录制录音文件的过程中，输入第一内容的时刻对应的录音时长；在播放录音文件的过程中，根据第一映射关系，当确定当前播放时长与第一录音时长匹配时，显示第一内容；或者，响应于用户在html页面中选中第一内容，从第一录音时长对应的播放时长处开始播放录音文件。

38、可选的，映射文件中包括多组映射关系信息，第一映射关系信息为多组映射关系信息中的任一组。可选的，可以按照预设方式对第一内容进行显示，例如，高亮显示。

39、该实现方式中，内容文件中包括第一内容和第一html标签，且第一映射关系信息基于第一html标签生成。因而，基于html语言即可从内容文件中读取第一内容和第一映射关系信息。而且，根据第一映射关系信息，在当前播放时长与第一录音时长匹配时，即可实现对第一内容的显示。另外，当用户选中第一内容时，也能够根据第一映射关系信息，从第一录音时长处开始播放录音文件。也就是说，该实现方式中，基于html语言即可实现对录音文件播放与内容文件中内容显示的同步以及双向定位。整个过程中无需基于电子设备系统的原生模块进行，因而能够实现跨系统使用，提高用户体验。

40、一种可能的实现方式中，映射文件中包括多组映射关系信息，每组映射关系信息用于表征相对时间与位置信息之间的映射关系，多组映射关系信息中包括第一映射关系信息，第一映射关系信息中包括第一相对时间与第一位置信息的映射关系，第一相对时间根据第一录音时间确定；根据第一映射关系，当确定当前播放时长与第一录音时长匹配时，显示第一内容，该方法还包括：每间隔预设时长，基于js轮询机制，在多组映射关系信息中确定是否存在与当前播放时长匹配的相对时间；当确定当前播放时长与第一相对时间匹配时，确定第一相对时间对应的第一位置信息；根据第一位置信息，显示内容文件中对应的第一内容。

41、该实现方式中，基于js轮询机制实现轮询查找，简化算法，提高算法运行效率。且每间隔预设时长执行一次轮询，这样能够控制轮询次数，减少资源消耗，节约电子设备的功耗。

42、一种可能的实现方式中，预设时长小于多组映射关系信息中相邻两个相对时间之间的时间差。这样，在减少轮询次数的同时，保证了轮询结果的准确性，从而提高对笔记内容显示的准确性，保证了显示进度的流畅度，提高用户体验。

43、一种可能的实现方式中，第一相对时间为大于或等于第一录音时长且与第一录音时长差值最小的整秒数，预设时长为100毫秒。

44、一种可能的实现方式中，当前播放时长为顺序播放录音文件的播放时长，或者用户选择的播放时长。

45、可选的，用户选择的播放时长例如可以为：用户通过拖动播放进度条选择的播放时长。

46、第三方面，本技术提供一种装置，该装置包含在电子设备中，该装置具有实现上述第一方面及上述第一方面，和/或上述第二方面及上述第二方面的可能实现方式中电子设备行为的功能。功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块或单元。例如，接收模块或单元、处理模块或单元等。

47、第四方面，本技术提供一种电子设备，电子设备包括：处理器、存储器和接口；处理器、存储器和接口相互配合，使得电子设备执行第一方面或第二方面的技术方案中任意一种方法。

48、第五方面，本技术提供一种芯片，包括处理器。处理器用于读取并执行存储器中存储的计算机程序，以执行第一方面及其任意可能的实现方式，或者第二方面及其任意可能的实现方式中的方法。

49、可选的，芯片还包括存储器，存储器与处理器通过电路或电线连接。

50、进一步可选的，芯片还包括通信接口。

51、第六方面，本技术提供一种计算机可读存储介质，计算机可读存储介质中存储了计算机程序，当计算机程序被处理器执行时，使得该处理器执行第一方面或第二方面的技术方案中任意一种方法。

52、第七方面，本技术提供一种计算机程序产品，计算机程序产品包括：计算机程序代码，当计算机程序代码在电子设备上运行时，使得该电子设备执行第一方面或第二方面的技术方案中任意一种方法。