Graphic display method, device, storage medium and electronic device

Abstract

The embodiment of the present invention provides a method, device, storage medium and electronic device for displaying graphics, the method comprising: when the amount of data of the received target audio is greater than or equal to a preset threshold, sending a target request to a target service; receiving the first audio returned by the target service, and drawing a first waveform corresponding to the first audio on a first canvas; when the playback time of the first audio reaches a preset time, receiving the second audio returned by the target service, and splicing the second waveform corresponding to the second audio with the first waveform on the first canvas to obtain a target waveform; when the second audio is the last audio included in the segmented target audio, replacing the first waveform displayed on the second canvas with the target waveform to display the target waveform on the second canvas. The present invention solves the problem of low graphics display efficiency existing in the related art.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of computers, and in particular, to a method, device, storage medium, and electronic device for displaying graphics. Background Art

[0002] With the rapid development of artificial intelligence technology, more and more people expect computers to have the ability to communicate with people verbally. Therefore, the application of speech recognition technology is becoming more and more extensive, and speech annotation is an indispensable and important part of speech recognition technology.

[0003] In related technologies, in order to obtain audio data that meets the conditions, it is usually necessary to visualize the sampled audio to obtain an audio waveform graph, which is then manually reviewed and annotated by annotation personnel. That is, the waveform format data (.WAV) of the entire audio is usually obtained first, and then converted into a waveform data format and visualized on the page. However, if a single sampled audio file is too large, a browser memory overflow may occur in the process of obtaining the sampled audio file, resulting in page freezes and even the inability to use the annotation tool normally, which in turn causes the graphics on the page to need to be drawn repeatedly.

[0004] Currently, no effective solution has been proposed to the problem of low graphics display efficiency in related technologies. Summary of the Invention

[0005] Embodiments of the present invention provide a method, device, storage medium, and electronic device for displaying graphics, so as to at least solve the problem of graphics display efficiency existing in the related art.

[0006] According to one embodiment of the present invention, a method for displaying a graphic is provided, comprising: when the data volume of received target audio is greater than or equal to a preset threshold, sending a target request to a target service, wherein the target request is used to request the target service to segment the target audio; receiving a first audio returned by the target service, and drawing a first waveform corresponding to the first audio on a first canvas, wherein the first audio is the audio included in an audio array obtained by segmenting the target audio by the target service when receiving the target request; when the playback time of the first audio reaches a preset time, receiving a second audio returned by the target service, and splicing a second waveform corresponding to the second audio with the first waveform on the first canvas to obtain a target waveform, wherein the second audio is the audio included in the audio array that follows the first audio and is adjacent to the first audio; when the second audio is the last audio included in the segmented target audio, replacing the first waveform displayed on the second canvas with the target waveform to display the target waveform on the second canvas.

[0007] In an exemplary embodiment, the method further includes: when the data volume of the target audio is less than the preset threshold, drawing a third waveform corresponding to the target audio on the first canvas, and displaying the third waveform on the second canvas of the first target interface.

[0008] In an exemplary embodiment, the receiving of the first audio returned by the target service and the drawing of the first waveform corresponding to the first audio on the first canvas include: receiving the first audio included in the audio array returned by the target service based on the target request and the first index corresponding to the first audio; drawing the first waveform corresponding to the first audio on the first canvas, and establishing and storing a first mapping relationship between the first index and the end point of the first waveform.

[0009] In an exemplary embodiment, after drawing the first waveform corresponding to the first audio on the first canvas and establishing and storing a first mapping relationship between the first index and the end point of the first waveform, the method further includes: receiving the second audio included in the audio array returned by the target service; obtaining a first scaling factor corresponding to the x-axis on the current first canvas and a second scaling factor corresponding to the y-axis on the current first canvas, wherein the first scaling factor is used to indicate a reduction ratio or a magnification factor of a value of a point on the second waveform on the x-axis when drawing the second waveform on the first canvas, and the second scaling factor is used to indicate a reduction ratio or a magnification factor of a value of a point on the second waveform on the y-axis when drawing the second waveform on the first canvas, the y-axis is used to indicate sampling data of the audio, and the x-axis is used to indicate sampling time of the audio, and the second waveform is a waveform corresponding to the second audio; and drawing the second waveform corresponding to the second audio on the first canvas according to the first mapping relationship, the first scaling factor, and the second scaling factor.

[0010] In an exemplary embodiment, the above-mentioned drawing of the second waveform corresponding to the second audio on the first canvas according to the above-mentioned first mapping relationship, the above-mentioned first scaling factor and the above-mentioned second scaling factor includes: when the above-mentioned first scaling factor and the above-mentioned second scaling factor are both 1, and when drawing the above-mentioned first waveform, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the above-mentioned first canvas are also both 1, searching for the end point of the above-mentioned first waveform having the above-mentioned first mapping relationship with the above-mentioned first index, and splicing the starting point of the above-mentioned second waveform with the above-mentioned end point of the above-mentioned first waveform on the above-mentioned first canvas to obtain the above-mentioned target waveform, wherein the above-mentioned third scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the above-mentioned first waveform on the x-axis when drawing the first waveform on the above-mentioned first canvas, and the above-mentioned fourth scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the above-mentioned first waveform on the y-axis when drawing the above-mentioned first waveform on the above-mentioned first canvas.

[0011] In an exemplary embodiment, the second waveform graph corresponding to the second audio is drawn on the first canvas according to the first mapping relationship, the first scaling factor and the second scaling factor, including: when the first scaling factor is not 1, the second scaling factor is 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, the value of the point on the second waveform graph corresponding to the second audio on the x-axis is multiplied by the first scaling factor to obtain a fourth waveform graph, wherein the third scaling factor is used to indicate the reduction ratio or magnification of the value of the point on the first waveform graph on the x-axis when drawing the first waveform graph on the first canvas, and the fourth scaling factor is used to indicate the value of the point on the first waveform graph on the y-axis when drawing the first waveform graph on the first canvas. reduction ratio or magnification factor; searching for the end point of the first waveform having the first mapping relationship with the first index, and splicing the starting point of the fourth waveform with the end point of the first waveform on the first canvas to obtain the target waveform; or when the first scaling factor is 1, the second scaling factor is not 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, multiplying the value of the point on the second waveform corresponding to the second audio on the y-axis by the second scaling factor to obtain a fifth waveform; searching for the end point of the first waveform having the first mapping relationship with the first index, and splicing the starting point of the fifth waveform with the end point of the first waveform on the first canvas to obtain the target waveform.

[0012] In an exemplary embodiment, the drawing of the second waveform corresponding to the second audio on the first canvas according to the first mapping relationship, the first scaling factor and the second scaling factor includes: when the first scaling factor is not 1, the second scaling factor is not 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, multiplying the value of the point on the second waveform corresponding to the second audio on the x-axis by the first scaling factor, and multiplying the value of the point on the second waveform corresponding to the second audio on the y-axis by the first scaling factor. The first waveform graph is drawn on the first canvas and the second index is multiplied to obtain a sixth waveform graph, wherein the third scaling coefficient is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the x-axis when the first waveform graph is drawn on the first canvas, and the fourth scaling coefficient is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the y-axis when the first waveform graph is drawn on the first canvas; the end point of the first waveform graph having the first mapping relationship with the first index is searched, and the starting point of the sixth waveform graph is spliced ​​with the end point of the first waveform graph on the first canvas to obtain the target waveform graph.

[0013] In an exemplary embodiment, when receiving the second audio included in the audio array returned by the target service, the method further includes: receiving a second index corresponding to the second audio; after drawing the second waveform corresponding to the second audio on the first canvas, the method further includes: establishing and storing a second mapping relationship between the second index and the end point of the second waveform.

[0014] In an exemplary embodiment, when the second audio is the last audio included in the target audio that has been split, replacing the first waveform displayed on the second canvas with the target waveform to display the target waveform on the second canvas includes: when the second audio is the last audio included in the target audio that has been split, replacing the first waveform displayed on the second canvas of the second target interface with the target waveform to display the target waveform on the second canvas.

[0015] According to another embodiment of the present invention, a graphic display device is provided, comprising: a sending module, configured to send a target request to a target service when the amount of data of the received target audio is greater than or equal to a preset threshold, wherein the target request is used to request the target service to segment the target audio; a first drawing module, configured to receive a first audio returned by the target service, and to draw a first waveform corresponding to the first audio on a first canvas, wherein the first audio is the audio included in an audio array obtained by segmenting the target audio by the target service when receiving the target request; and a splicing module, Used to receive the second audio returned by the above-mentioned target service when the playback time of the above-mentioned first audio reaches a preset time, and splice the second waveform corresponding to the above-mentioned second audio with the above-mentioned first waveform on the above-mentioned first canvas to obtain the target waveform, wherein the above-mentioned second audio is the audio included in the above-mentioned audio array that is after the above-mentioned first audio and adjacent to the above-mentioned first audio; the display module is used to replace the above-mentioned first waveform displayed on the second canvas with the above-mentioned target waveform when the above-mentioned second audio is the last audio included in the above-mentioned split target audio, so as to display the above-mentioned target waveform on the above-mentioned second canvas.

[0016] According to yet another embodiment of the present invention, a computer-readable storage medium is provided, in which a computer program is stored. The computer program is configured to execute the steps of any one of the above method embodiments when run.

[0017] According to another embodiment of the present invention, an electronic device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to perform the steps in any one of the above method embodiments.

[0018] According to the present invention, when the amount of data of the received target audio is greater than or equal to a preset threshold, a target request for requesting the target service to segment the target audio is sent to the target service, the first audio returned by the target service is received, and a first waveform corresponding to the first audio is drawn on a first canvas. When the playback time of the first audio reaches a preset time, the second audio returned by the target service is received, and the second waveform corresponding to the second audio is spliced ​​with the first waveform on the first canvas to obtain a target waveform. Then, when the second audio is the last audio included in the segmented target audio, the first waveform displayed on the second canvas is replaced with the target waveform to display the target waveform on the second canvas. By adopting the method of the present invention, the second waveform corresponding to the second audio is spliced ​​with the waveform corresponding to the first audio on the first canvas to obtain a target waveform. Then, when the second audio is the last audio included in the segmented target audio, the target waveform is replaced and displayed on the second canvas, thereby achieving the purpose of smoothly displaying a complete waveform on a visual canvas, solving the problem of low graphics display efficiency existing in the related art, and achieving the effect of improving graphics display efficiency and reducing redundant operations of repeated graphics drawing. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 This is a hardware structure block diagram of a mobile terminal for a method for displaying graphics according to an embodiment of the present invention;

[0020] Figure 2 is a flowchart of a method for displaying a graphic according to an embodiment of the present invention;

[0021] Figure 3 This is a flow chart of segmented drawing of a waveform diagram according to a specific embodiment of the present invention;

[0022] Figure 4 is a schematic diagram of audio segmentation according to a specific embodiment of the present invention;

[0023] Figure 5 is a schematic diagram of a canvas according to a specific embodiment of the present invention;

[0024] Figure 6 FIG. 4 is a structural block diagram of a graphic display device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0025] Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings and in combination with embodiments.

[0026] It should be noted that the terms "first", "second", etc. in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0027] The method embodiments provided in the embodiments of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Taking running on a mobile terminal as an example, Figure 1 FIG. 1 is a hardware structure diagram of a mobile terminal for displaying a graphic according to an embodiment of the present invention. Figure 1 As shown, the mobile terminal may include one or more ( Figure 1 Only one is shown) a processor 102 (the processor 102 may include but is not limited to a microprocessor MCU or a programmable logic device FPGA and other processing devices) and a memory 104 for storing data, wherein the mobile terminal may also include a transmission device 106 and an input and output device 108 for communication functions. It will be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the mobile terminal. Figure 1 More or fewer components than shown, or with Figure 1 Different configurations shown.

[0028] The memory 104 can be used to store computer programs, such as software programs and modules of application software, such as the computer program corresponding to the method for displaying graphics in the embodiments of the present invention. The processor 102 executes the computer programs stored in the memory 104 to execute various functional applications and data processing, thereby implementing the above-mentioned method. The memory 104 may include a high-speed random access memory and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include a memory remotely located relative to the processor 102, and these remote memories may be connected to the mobile terminal via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0029] The transmission device 106 is used to receive or send data via a network. A specific example of the aforementioned network may include a wireless network provided by the mobile terminal's communications provider. In one embodiment, the transmission device 106 includes a network interface controller (NIC), which can be connected to other network devices via a base station to enable communication with the Internet. In one embodiment, the transmission device 106 may be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0030] In this embodiment, a method for displaying a graphic is provided. Figure 2 is a flow chart of a method for displaying a graphic according to an embodiment of the present invention, such as Figure 2 As shown, the process includes the following steps:

[0031] S202: If the amount of received target audio data is greater than or equal to a preset threshold, sending a target request to a target service, wherein the target request is used to request the target service to segment the target audio;

[0032] S204: Receive the first audio returned by the target service, and draw a first waveform corresponding to the first audio on the first canvas, wherein the first audio is the audio included in the audio array obtained by segmenting the target audio by the target service upon receiving the target request;

[0033] S206: When the playback duration of the first audio reaches a preset duration, receiving a second audio returned by the target service, and concatenating a second waveform corresponding to the second audio with the first waveform on the first canvas to obtain a target waveform, wherein the second audio is the audio included in the audio array that follows the first audio and is adjacent to the first audio;

[0034] S208 , when the second audio is the last audio included in the segmented target audio, the first waveform displayed on the second canvas is replaced with the target waveform to display the target waveform on the second canvas.

[0035] The above operations may be performed by a controller, a processor, or other processing devices or processing units with similar processing capabilities.

[0036] In the above embodiment, the preset threshold can be pre-set and can be set to 200MB, 250MB, 300MB, etc. For example, when the preset threshold is 250MB, when the amount of data of the received target audio is greater than or equal to 250MB, a target request is sent to the target service to request the target service to split the target audio, etc. It should be noted that the above example of the preset threshold is only an exemplary embodiment, and the preset threshold is not limited to the above example.

[0037] In the above embodiment, the preset duration can be pre-set and can be set to 80%, 85%, 90%, etc. For example, when the preset duration is 80%, when the playback duration of the first audio reaches 80%, the second audio returned by the target service is received, and the second waveform corresponding to the second audio is spliced ​​with the first waveform on the first canvas to obtain the target waveform, etc. It should be noted that the above example of the preset duration is only an exemplary embodiment, and the preset duration is not limited to the above example.

[0038] In the above embodiment, when the amount of data of the received target audio is greater than or equal to a preset threshold, a target request for requesting the target service to segment the target audio is sent to the target service, the first audio returned by the target service is received, and the first waveform corresponding to the first audio is drawn on the first canvas. When the playback time of the first audio reaches the preset time, the second audio returned by the target service is received, and the second waveform corresponding to the second audio is spliced ​​with the first waveform on the first canvas to obtain the target waveform. Then, when the second audio is the last audio included in the segmented target audio, the first waveform displayed on the second canvas is replaced with the target waveform to display the target waveform on the second canvas. This embodiment achieves the purpose of smoothly displaying a complete waveform on a visual canvas by splicing the second waveform corresponding to the second audio with the waveform corresponding to the first audio on the first canvas to obtain the target waveform, and then, when the second audio is the last audio included in the segmented target audio, the target waveform is replaced and displayed on the second canvas. This solves the problem of low graphics display efficiency in the related art, and achieves the effect of improving graphics display efficiency and reducing redundant operations of repeated graphics drawing.

[0039] In an exemplary embodiment, the method further includes: when the data volume of the target audio is less than a preset threshold, drawing a third waveform corresponding to the target audio on the first canvas, and displaying the third waveform on the second canvas of the first target interface. In this embodiment, when the data volume of the target audio is less than the preset threshold, the third waveform corresponding to the target audio can be directly drawn on the first canvas in one go, and the drawn third waveform can be displayed on the second canvas of the first target interface.

[0040] In one exemplary embodiment, receiving a first audio signal returned by a target service and drawing a first waveform corresponding to the first audio signal on a first canvas includes: receiving the first audio signal and a first index corresponding to the first audio signal included in an audio array returned by the target service based on a target request; drawing the first waveform corresponding to the first audio signal on the first canvas, and establishing and storing a first mapping relationship between the first index and the end point of the first waveform signal. In this embodiment, upon receiving the target request, the target service segments the target audio signal into multiple audio signals according to the target request and generates an audio array. The audio array includes the multiple audio signals obtained by segmenting the target audio signal and the indexes corresponding to each of the multiple audio signals. In addition, the audio array includes the data volume corresponding to each of the multiple audio signals, the download addresses corresponding to each of the multiple audio signals, and the like. After establishing and storing the first mapping relationship between the first index and the end point of the first waveform signal, when a request is made to listen to audio starting from the end point of the first waveform signal, the first index of the audio signal to be played can be determined using the stored first mapping relationship.

[0041] In an exemplary embodiment, after drawing a first waveform corresponding to the first audio on the first canvas and establishing and storing a first mapping relationship between the first index and the end point of the first waveform, the method further includes: receiving the second audio included in the audio array returned by the target service; obtaining a first scaling factor corresponding to the x-axis on the current first canvas and a second scaling factor corresponding to the y-axis on the current first canvas, wherein the first scaling factor is used to indicate the reduction ratio or magnification factor of the value of the point on the second waveform on the x-axis when drawing the second waveform on the first canvas, and the second scaling factor is used to indicate the reduction ratio or magnification factor of the value of the point on the second waveform on the y-axis when drawing the second waveform on the first canvas, the y-axis is used to indicate the sampling data of the audio, and the x-axis is used to indicate the sampling time of the audio, and the second waveform is the waveform corresponding to the second audio; according to the first mapping relationship, the first scaling factor and the second scaling factor, drawing the second waveform corresponding to the second audio on the first canvas. In this embodiment, when drawing waveform graphs of the segmented target audio, it is necessary to ensure the uniformity of the data of each segment of the waveform graph drawn. Therefore, after drawing the first waveform graph corresponding to the first audio and before drawing the second waveform graph corresponding to the second audio, it is necessary to determine whether the first scaling factor corresponding to the x-axis on the current first canvas is consistent with the reduction ratio or magnification of the value of the point on the first waveform graph on the x-axis, and determine whether the first scaling factor corresponding to the y-axis on the current first canvas is consistent with the reduction ratio or magnification of the value of the point on the first waveform graph on the y-axis.

[0042] In an exemplary embodiment, a second waveform graph corresponding to the second audio is drawn on a first canvas according to a first mapping relationship, a first scaling factor, and a second scaling factor, including: when the first scaling factor and the second scaling factor are both 1, and when drawing the first waveform graph, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are also both 1, searching for the end point of the first waveform graph having a first mapping relationship with the first index, and splicing the starting point of the second waveform graph with the end point of the first waveform graph on the first canvas to obtain a target waveform graph, wherein the third scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the x-axis when drawing the first waveform graph on the first canvas, and the fourth scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the y-axis when drawing the first waveform graph on the first canvas. In this embodiment, when the first and second scaling factors are both 1, and when the first waveform is drawn, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, this indicates that the reduction ratio or magnification factor of the value of the point on the second waveform corresponding to the second audio on the x-axis is consistent with the reduction ratio or magnification factor of the value of the point on the first waveform on the first canvas, and the reduction ratio or magnification factor of the value of the point on the second waveform corresponding to the second audio on the y-axis is consistent with the reduction ratio or magnification factor of the value of the point on the first waveform on the first canvas. In addition, the first, second, third, and fourth scaling factors may also be different from 1. For example, when the first and second scaling factors are both 1.5, and when the first waveform is drawn, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1.5, the end point of the first waveform having a first mapping relationship with the first index is found, and the starting point of the second waveform is spliced ​​with the end point of the first waveform on the first canvas to obtain the target waveform. Alternatively, when the first scaling factor and the second scaling factor are both 0.5, and when drawing the first waveform, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 0.5, the end point of the first waveform having a first mapping relationship with the first index is searched, and the starting point of the second waveform is spliced ​​with the end point of the first waveform on the first canvas to obtain the target waveform, and so on. It should be noted that the third scaling factor and the fourth scaling factor can be set according to actual application requirements, and the first scaling factor and the second scaling factor can be adjusted according to the settings of the third scaling factor and the fourth scaling factor. The examples of the first scaling factor, the second scaling factor, the third scaling factor, and the fourth scaling factor are merely exemplary embodiments, and the first scaling factor, the second scaling factor, the third scaling factor, and the fourth scaling factor are not limited to the above examples.

[0043] In an exemplary embodiment, according to the first mapping relationship, the first scaling factor and the second scaling factor, a second waveform graph corresponding to the second audio is drawn on the first canvas, including: when the first scaling factor is not 1, the second scaling factor is 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, the value of the point on the second waveform graph corresponding to the second audio on the x-axis is multiplied by the first scaling factor to obtain a fourth waveform graph, wherein the third scaling factor is used to represent the reduction ratio or magnification of the value of the point on the first waveform graph on the x-axis when the first waveform graph is drawn on the first canvas, and the fourth scaling factor is used to represent the reduction ratio or magnification of the value of the point on the first waveform graph on the y-axis when the first waveform graph is drawn on the first canvas. The reduction ratio or magnification of the value on the waveform; searching for the end point of the first waveform having a first mapping relationship with the first index, and splicing the starting point of the fourth waveform with the end point of the first waveform on the first canvas to obtain a target waveform; or when the first scaling factor is 1, the second scaling factor is not 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are also 1 when drawing the first waveform, multiplying the value of the point on the second waveform corresponding to the second audio on the y-axis by the second scaling factor to obtain a fifth waveform; searching for the end point of the first waveform having a first mapping relationship with the first index, and splicing the starting point of the fifth waveform with the end point of the first waveform on the first canvas to obtain the target waveform.In this embodiment, in order to ensure the uniformity of data of each waveform graph drawn, when the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the x-axis is inconsistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the x-axis, or the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the y-axis is inconsistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the y-axis, it is necessary to adjust the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the x-axis to be consistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the x-axis, or adjust the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the y-axis to be consistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas. The reduction ratio or magnification factor of the value of the point on the y-axis is consistent. For example, when the first scaling factor is 0.5, and the second scaling factor, the third scaling factor, and the fourth scaling factor are all 1, the value of the point on the second waveform corresponding to the second audio on the x-axis is multiplied by the first scaling factor to obtain the fourth waveform, or when the second scaling factor is 0.5, and the first scaling factor, the third scaling factor, and the fourth scaling factor are all 1, the value of the point on the second waveform corresponding to the second audio on the y-axis is multiplied by the second scaling factor to obtain the fifth waveform, and so on. It should be noted that the examples of the above-mentioned first scaling factor, the above-mentioned second scaling factor, the above-mentioned third scaling factor, and the above-mentioned fourth scaling factor are only exemplary embodiments, and the first scaling factor, the second scaling factor, the third scaling factor, and the fourth scaling factor are not limited to the above examples.

[0044] In an exemplary embodiment, drawing a second waveform corresponding to a second audio on a first canvas according to a first mapping relationship, a first scaling factor, and a second scaling factor includes: when the first scaling factor is not 1, the second scaling factor is not 1, and when drawing the first waveform, a third scaling factor corresponding to the x-axis and a fourth scaling factor corresponding to the y-axis on the first canvas are both 1, multiplying the value of a point on the second waveform corresponding to the second audio on the x-axis by the first scaling factor, and multiplying the value of a point on the second waveform corresponding to the second audio on the y-axis by the second scaling factor, to obtain a sixth waveform, wherein the third scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform on the x-axis when drawing the first waveform on the first canvas, and the fourth scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform on the y-axis when drawing the first waveform on the first canvas; searching for an end point of the first waveform having a first mapping relationship with the first index, and splicing the starting point of the sixth waveform with the end point of the first waveform on the first canvas to obtain a target waveform. In this embodiment, when the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the x-axis is inconsistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the x-axis, and the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the y-axis is inconsistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the y-axis, the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the x-axis can be adjusted to be consistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the x-axis, and the reduction ratio or magnification factor of the value of the point on the second waveform graph corresponding to the second audio on the y-axis can be adjusted to be consistent with the reduction ratio or magnification factor of the value of the point on the first waveform graph on the first canvas on the y-axis. The reduction ratio or magnification factor of the value of the point on the waveform graph on the y-axis is consistent. For example, when the first scaling factor and the second scaling factor are both 0.5, and the third scaling factor and the fourth scaling factor are both 1, the value of the point on the second waveform graph corresponding to the second audio on the x-axis is multiplied by the first scaling factor, and the value of the point on the second waveform graph corresponding to the second audio on the y-axis is multiplied by the second scaling factor to obtain the sixth waveform graph, and so on, to ensure the uniformity of the data of each segment of the waveform graph drawn. It should be noted that the examples of the above-mentioned first scaling factor, the above-mentioned second scaling factor, the above-mentioned third scaling factor and the above-mentioned fourth scaling factor are only exemplary embodiments, and the first scaling factor, the second scaling factor, the third scaling factor and the fourth scaling factor are not limited to the above-mentioned examples.

[0045] In an exemplary embodiment, when receiving the second audio included in the audio array returned by the target service, the method further includes: receiving a second index corresponding to the second audio; and after drawing a second waveform corresponding to the second audio on the first canvas, the method further includes: establishing and storing a second mapping relationship between the second index and the end point of the second waveform. In this embodiment, after establishing and storing the second mapping relationship between the second index and the end point of the second waveform, when a user requests to listen to the audio starting from the end point of the second waveform, the second index of the audio to be played can be determined using the stored second mapping relationship.

[0046] In an exemplary embodiment, when the second audio is the last audio included in the segmented target audio, the first waveform displayed on the second canvas is replaced with the target waveform to display the target waveform on the second canvas, which includes: when the second audio is the last audio included in the segmented target audio, the first waveform displayed on the second canvas of the second target interface is replaced with the target waveform to display the target waveform on the second canvas. In this embodiment, when it is determined that the waveform currently drawn on the first canvas is the waveform corresponding to the last audio included in the segmented target audio, it means that the operation of segmented waveform drawing of the target audio has been completed. At this time, the drawn and spliced ​​complete waveform can be replaced on the second canvas of the second target interface for display, so as to achieve the purpose of non-stuttering and dynamic waveform drawing, and further ensure that operations such as annotation can be performed on the complete waveform of longer audio.

[0047] Obviously, the embodiments described above are only part of the embodiments of the present invention, rather than all the embodiments.

[0048] The present invention will be described in detail below with reference to specific embodiments:

[0049] The main solutions of this specific embodiment include:

[0050] The user selects an audio file. If the file is too large, the server needs to segment it and pass the segmented audio array to the client. The waveform drawing process uses two canvases, which are subsequently replaced by canvas1 (corresponding to the second canvas) and canvas2 (corresponding to the first canvas). Canvas1 is the waveform display area where users can perform annotation operations. Canvas2 is the buffered canvas used to combine the two audio waveform segments. This canvas exists only in memory and is not displayed on the page.

[0051] Consider an array of audio files. When the page is initialized, only the waveform of the first audio segment (N1) in the array is drawn on canvas1. During audio playback, if the duration of the audio reaches the set value, the next audio segment (N2) is downloaded. Based on the drawing data of N1 + N2, the waveforms of the two audio segments are spliced ​​and drawn on canvas2. Once the drawing is complete, the contents of canvas2 can be copied to canvas1 using the drawImage method, achieving smooth and dynamic waveform drawing. Since the waveform splicing operation is performed on canvas2, that is, the splicing operation is performed entirely in memory, it does not cause the page to be rearranged or redrawn, improving performance while reducing redundant drawing operations.

[0052] The embodiment of the present application provides a waveform segmentation drawing process, Figure 3 is a flow chart of segmented drawing of a waveform diagram according to a specific embodiment of the present invention, such as Figure 3 As shown, the process includes the following steps:

[0053] S302, selecting an audio file;

[0054] S304, performing a first determination to determine whether the audio file is greater than or equal to 250 MB;

[0055] S306, when the first judgment result is negative, the waveform graph is drawn;

[0056] S308, if the first judgment result is yes, segment the audio;

[0057] S310, obtaining an audio array and drawing an audio waveform graph with index 0;

[0058] S312: Play the audio and perform a second determination to determine whether the duration of the audio playback is greater than or equal to the set duration. If the second determination result is negative, continue playing the audio.

[0059] S314: If the second judgment result is yes, obtain the next audio segment to complete data splicing, draw it off-screen and replace the original canvas;

[0060] S316, perform a third judgment to determine whether the next audio segment is the last audio segment in the audio array; if the result of the third judgment is no, execute step S312; if the result of the above third judgment is yes, execute step S306.

[0061] The following is a detailed description of the various processes involved in the segmented drawing of the waveform graph:

[0062] 1. Diversion of audio files to be drawn

[0063] Figure 4 is a schematic diagram of audio segmentation according to a specific embodiment of the present invention, such as Figure 4 As shown, the user enters the client, selects the annotation task, enters the audio list interface to be annotated, and obtains the basic information of each audio file, including the size of the audio file. The user selects any audio file. When the size of the audio file is less than 250MB (corresponding to the above-mentioned preset threshold), the waveform corresponding to the audio can be directly drawn at one time; if the audio file selected by the user is greater than or equal to 250MB, the client sends a request to the server (corresponding to the above-mentioned target service) to split the audio file selected by the user, that is, to split a long audio (an audio file greater than or equal to 250MB) into N short audio segments (each short audio segment included in the N short audio segments is less than 250MB), and save the N short audio segments after segmentation in the form of an array. At the same time, the basic information saved also includes the size of the short audio file.

[0064] 2. How to draw waveform of long audio files

[0065] Take the example of splitting a long audio into two short audio segments:

[0066] After the client obtains the audio array, it downloads the audio (N1, corresponding to the first audio) with index 0 (corresponding to the first index) in the audio array and draws a waveform graph as the initialization waveform graph of the long audio (corresponding to the first waveform graph). Figure 5 This is a schematic diagram of a canvas according to a specific embodiment of the present invention. Figure 5 As shown, Wrapper is the visible area, Inner is the canvas1 drawing area of ​​the waveform, and the waveform of audio N1 is completely drawn into the canvas1 canvas.

[0067] The horizontal axis of the audio waveform is the audio duration (time axis, corresponding to the sampling time mentioned above), and the vertical axis is the sampling value (corresponding to the sampling data mentioned above). The data that needs to be stored at this time is as follows:

[0068] 1) Drawing data of N1 waveform;

[0069] 2) The relationship array between the audio index and the horizontal coordinate of the end point of the waveform, in the format: [{index:0,xCoord:the end coordinate of the time axis}];

[0070] 3) The reduction ratio or magnification of the value of the point on the waveform graph on the x-axis and y-axis;

[0071] The annotator plays the audio and annotates it. When the audio first plays to 80% of the timeline (corresponding to the preset duration), the client sends another request to the server based on the audio array to download the audio with index 1 (N2, corresponding to the second audio). The drawing data of N2's waveform is spliced ​​after the drawing data of N1's waveform, and the audio duration of N2 is spliced ​​after the audio duration of N1. The index of N2 (corresponding to the second index) and the data of the horizontal axis at the end of the timeline are added to the relationship array described in 2) above.

[0072] It should be noted that if the user has changed the reduction ratio or magnification of the X-axis and Y-axis of the waveform graph, when processing the data of the newly downloaded audio, the drawing data of the new audio must be reduced or magnified proportionally according to the modified reduction ratio or magnification of the X-axis and Y-axis to ensure the data consistency of each waveform segment drawn.

[0073] The waveform is drawn on canvas2 based on the drawing data spliced ​​by N1 and N2 and the audio duration. After the drawing is completed, the content of canvas2 is copied to canvas1 through the drawImage method (other methods that can copy the content of canvas2 to canvas1 can also be used to complete the dynamic splicing of the waveform, and the waveform of the original long audio can be fully displayed on canvas2.

[0074] The function of the array described in 2) above is that if the user needs to start listening to audio from a certain point on the timeline, the timeline information stored in the array can be used to determine the audio index to be played.

[0075] In addition, if the long audio is divided into 3 or more segments, the above method also applies.

[0076] It can be seen from the above embodiments that the present application divides the long audio into segments, downloads them in segments, splices the segmented audio data in the memory, and splices and draws the waveform on the buffer canvas in the memory, and then copies the complete waveform after splicing on the buffer canvas to the canvas of the browser page to ensure that the user can mark the complete waveform of the long audio.

[0077] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in each embodiment of the present invention.

[0078] In this embodiment, a graphic display device is also provided, which is used to implement the above-mentioned embodiments and preferred embodiments. Details already described will not be repeated here. As used below, the term "module" may refer to a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, implementation using hardware, or a combination of software and hardware, is also possible and contemplated.

[0079] Figure 6 is a structural block diagram of a graphic display device according to an embodiment of the present invention, such as Figure 6 As shown, the device includes:

[0080] A sending module 62 is configured to send a target request to a target service when the amount of received target audio data is greater than or equal to a preset threshold, wherein the target request is used to request the target service to segment the target audio;

[0081] A first drawing module 64 is configured to receive a first audio signal returned by the target service and draw a first waveform corresponding to the first audio signal on a first canvas, wherein the first audio signal is the audio signal included in an audio array obtained by segmenting the target audio signal upon receiving the target request.

[0082] a splicing module 66 configured to receive a second audio file returned by the target service when the playback duration of the first audio file reaches a preset duration, and to splice a second waveform corresponding to the second audio file with the first waveform file on the first canvas to obtain a target waveform file, wherein the second audio file is the audio file included in the audio array and subsequent to and adjacent to the first audio file;

[0083] The display module 68 is configured to replace the first waveform displayed on the second canvas with the target waveform when the second audio is the last audio included in the segmented target audio, so as to display the target waveform on the second canvas.

[0084] In an exemplary embodiment, the apparatus further comprises:

[0085] The second drawing module is used to draw a third waveform corresponding to the target audio on the first canvas when the data volume of the target audio is less than a preset threshold, and display the third waveform on the second canvas of the first target interface.

[0086] In an exemplary embodiment, the first drawing module 64 includes:

[0087] A receiving submodule, configured to receive a first audio and a first index corresponding to the first audio included in an audio array returned by the target service based on the target request;

[0088] A submodule is established, which is used to draw a first waveform corresponding to the first audio on a first canvas, and to establish and store a first mapping relationship between a first index and an end point of the first waveform.

[0089] In an exemplary embodiment, the apparatus further comprises:

[0090] A first receiving module is configured to draw a first waveform corresponding to the first audio on a first canvas, establish and store a first mapping relationship between a first index and an end point of the first waveform, and then receive a second audio included in an audio array returned by a target service;

[0091] an acquisition module, configured to acquire a first scaling factor corresponding to the x-axis on the current first canvas and a second scaling factor corresponding to the y-axis on the current first canvas, wherein the first scaling factor is used to indicate a reduction ratio or a magnification factor of a value of a point on the second waveform graph on the x-axis when the second waveform graph is drawn on the first canvas, and the second scaling factor is used to indicate a reduction ratio or a magnification factor of a value of a point on the second waveform graph on the y-axis when the second waveform graph is drawn on the first canvas, the y-axis being used to indicate audio sampling data, the x-axis being used to indicate audio sampling time, and the second waveform graph being a waveform graph corresponding to the second audio;

[0092] The third drawing module is configured to draw a second waveform corresponding to the second audio on the first canvas according to the first mapping relationship, the first scaling factor, and the second scaling factor.

[0093] In an exemplary embodiment, the third drawing module includes:

[0094] The first splicing submodule is used to find the end point of the first waveform graph having a first mapping relationship with the first index, and splice the starting point of the second waveform graph with the end point of the first waveform graph on the first canvas to obtain a target waveform graph when the first scaling factor and the second scaling factor are both 1 and the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are also 1 when drawing the first waveform graph, wherein the third scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the x-axis when drawing the first waveform graph on the first canvas, and the fourth scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the y-axis when drawing the first waveform graph on the first canvas.

[0095] In an exemplary embodiment, the third drawing module further includes:

[0096] a first processing submodule, configured to multiply the value of a point on the second waveform graph corresponding to the second audio on the x-axis by the first scaling factor when the first scaling factor is not 1, the second scaling factor is 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, to obtain a fourth waveform graph, wherein the third scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform graph on the x-axis when the first waveform graph is drawn on the first canvas, and the fourth scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform graph on the y-axis when the first waveform graph is drawn on the first canvas; a second splicing submodule, configured to find the end point of the first waveform graph having a first mapping relationship with the first index, and to splice the starting point of the fourth waveform graph with the end point of the first waveform graph on the first canvas to obtain a target waveform graph; or

[0097] The second processing sub-module is used to multiply the value of the point on the second waveform graph corresponding to the second audio on the y-axis by the second scaling coefficient to obtain a fifth waveform graph when the first scaling coefficient is 1, the second scaling coefficient is not 1, and the third scaling coefficient corresponding to the x-axis and the fourth scaling coefficient corresponding to the y-axis on the first canvas are also 1 when drawing the first waveform graph; the third splicing sub-module is used to find the end point of the first waveform graph having a first mapping relationship with the first index, and splice the starting point of the fifth waveform graph with the end point of the first waveform graph on the first canvas to obtain a target waveform graph.

[0098] In an exemplary embodiment, the third drawing module further includes:

[0099] a third processing submodule, configured to, when the first scaling factor is not 1, the second scaling factor is not 1, and when the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, multiply the value of the point on the second waveform graph corresponding to the second audio on the x-axis by the first scaling factor, and multiply the value of the point on the second waveform graph corresponding to the second audio on the y-axis by the second scaling factor, to obtain a sixth waveform graph, wherein the third scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform graph on the x-axis when drawing the first waveform graph on the first canvas, and the fourth scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform graph on the y-axis when drawing the first waveform graph on the first canvas;

[0100] The fourth splicing submodule is configured to search for the end point of the first waveform image having a first mapping relationship with the first index, and splice the starting point of the sixth waveform image with the end point of the first waveform image on the first canvas to obtain a target waveform image.

[0101] In an exemplary embodiment, the apparatus further comprises:

[0102] A second receiving module, configured to receive a second index corresponding to the second audio when receiving the second audio included in the audio array returned by the target service;

[0103] The establishing module is configured to establish and store a second mapping relationship between a second index and an end point of the second waveform after drawing a second waveform corresponding to the second audio on the first canvas.

[0104] In an exemplary embodiment, the display module includes:

[0105] The display submodule is used to replace the first waveform displayed on the second canvas of the second target interface with the target waveform when the second audio is the last audio included in the segmented target audio, so as to display the target waveform on the second canvas.

[0106] It should be noted that the above modules can be implemented through software or hardware. For the latter, it can be implemented in the following ways, but not limited to: the above modules are all located in the same processor; or the above modules are located in different processors in any combination.

[0107] An embodiment of the present invention further provides a computer-readable storage medium, in which a computer program is stored. The computer program is configured to execute the steps of any one of the above method embodiments when running.

[0108] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0109] An embodiment of the present invention further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the steps in any one of the above method embodiments.

[0110] In an exemplary embodiment, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor, and the input / output device is connected to the processor.

[0111] For specific examples in this embodiment, reference may be made to the examples described in the above embodiments and exemplary implementation modes, and this embodiment will not be described in detail here.

[0112] The present invention provides a graphical display method that efficiently and completely dynamically renders waveforms for long audio clips required for annotation scenarios, making the waveforms more complete and suitable for audio annotation scenarios. By downloading the next audio clip to be rendered in advance, concatenating and rendering the audio file waveforms on a buffered canvas in memory, and then replacing the content on the buffered canvas with the content on the browser page for display and annotation, the number of waveform redraws is effectively reduced, further alleviating browser rendering pressure and improving rendering performance.

[0113] Obviously, those skilled in the art will appreciate that the various modules or steps of the present invention described above can be implemented using a general-purpose computing device, can be centralized on a single computing device, or can be distributed across a network of multiple computing devices. They can be implemented using program code executable by the computing device, and thus, can be stored in a storage device and executed by the computing device. In some cases, the steps shown or described herein can be performed in a different order than that shown, or can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.

[0114] The foregoing description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Those skilled in the art will readily appreciate that various modifications and variations of the present invention are possible. Any modifications, equivalent substitutions, or improvements made within the principles of the present invention are intended to be within the scope of protection of the present invention.

Claims

1. A method for displaying a graphic, characterized in that: include: When the amount of received target audio data is greater than or equal to a preset threshold, sending a target request to a target service, wherein the target request is used to request the target service to segment the target audio; Receive a first audio signal returned by the target service, and draw a first waveform corresponding to the first audio signal on a first canvas, wherein the first audio signal is an audio signal included in an audio array obtained by segmenting the target audio signal by the target service upon receiving the target request; When the playback duration of the first audio reaches a preset duration, receiving a second audio returned by the target service, and splicing a second waveform corresponding to the second audio with the first waveform on the first canvas to obtain a target waveform, wherein the second audio is an audio included in the audio array that follows the first audio and is adjacent to the first audio, and copying the spliced ​​target waveform from the first canvas to the second canvas for display; In a case where the second audio is the last audio included in the segmented target audio, replacing the first waveform displayed on the second canvas with the target waveform to display the target waveform on the second canvas; When the data volume of the target audio is less than the preset threshold, a third waveform corresponding to the target audio is drawn on the first canvas, and the third waveform is displayed on the second canvas of the first target interface.

2. The method according to claim 1, characterized in that The receiving the first audio returned by the target service and drawing a first waveform corresponding to the first audio on a first canvas includes: Receive the first audio and a first index corresponding to the first audio included in the audio array returned by the target service based on the target request; The first waveform corresponding to the first audio is drawn on the first canvas, and a first mapping relationship between the first index and the end point of the first waveform is established and stored.

3. The method according to claim 2, characterized in that After drawing the first waveform corresponding to the first audio on the first canvas and establishing and storing a first mapping relationship between the first index and the end point of the first waveform, the method further includes: receiving a second audio included in the audio array returned by the target service; Obtain a first scaling factor corresponding to the x-axis on the current first canvas and a second scaling factor corresponding to the y-axis on the current first canvas, wherein the first scaling factor is used to indicate a reduction ratio or a magnification factor of the x-axis values ​​of points on the second waveform when drawing the second waveform on the first canvas, and the second scaling factor is used to indicate a reduction ratio or a magnification factor of the y-axis values ​​of points on the second waveform when drawing the second waveform on the first canvas, the y-axis is used to indicate the sampling data of the audio, the x-axis is used to indicate the sampling time of the audio, and the second waveform is a waveform corresponding to the second audio; The second waveform corresponding to the second audio is drawn on the first canvas according to the first mapping relationship, the first scaling factor, and the second scaling factor.

4. The method according to claim 3, characterized in that Drawing the second waveform corresponding to the second audio on the first canvas according to the first mapping relationship, the first scaling factor, and the second scaling factor includes: When the first scaling factor and the second scaling factor are both 1, and when drawing the first waveform graph, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are also both 1, the end point of the first waveform graph having the first mapping relationship with the first index is searched, and the starting point of the second waveform graph is spliced ​​with the end point of the first waveform graph on the first canvas to obtain the target waveform graph, wherein the third scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the x-axis when drawing the first waveform graph on the first canvas, and the fourth scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform graph on the y-axis when drawing the first waveform graph on the first canvas.

5. The method according to claim 3, characterized in that Drawing the second waveform corresponding to the second audio on the first canvas according to the first mapping relationship, the first scaling factor, and the second scaling factor includes: When the first scaling factor is not 1, the second scaling factor is 1, and when the first waveform is drawn, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are also 1, multiply the value of the point on the second waveform corresponding to the second audio on the x-axis by the first scaling factor to obtain a fourth waveform, wherein the third scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform on the x-axis when the first waveform is drawn on the first canvas, and the fourth scaling factor is used to represent the reduction ratio or magnification factor of the value of the point on the first waveform on the y-axis when the first waveform is drawn on the first canvas; search for the end point of the first waveform having the first mapping relationship with the first index, and splice the starting point of the fourth waveform with the end point of the first waveform on the first canvas to obtain the target waveform; or When the first scaling factor is 1, the second scaling factor is not 1, and when drawing the first waveform, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, multiply the value of the point on the second waveform corresponding to the second audio on the y-axis by the second scaling factor to obtain a fifth waveform; search for the end point of the first waveform that has the first mapping relationship with the first index, and splice the starting point of the fifth waveform with the end point of the first waveform on the first canvas to obtain the target waveform.

6. The method according to claim 3, characterized in that Drawing the second waveform corresponding to the second audio on the first canvas according to the first mapping relationship, the first scaling factor, and the second scaling factor includes: When the first scaling factor is not 1, the second scaling factor is not 1, and when the first waveform graph is drawn, the third scaling factor corresponding to the x-axis and the fourth scaling factor corresponding to the y-axis on the first canvas are both 1, multiplying the value of the point on the second waveform graph corresponding to the second audio on the x-axis by the first scaling factor, and multiplying the value of the point on the second waveform graph corresponding to the second audio on the y-axis by the second scaling factor, to obtain a sixth waveform graph, wherein the third scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform graph on the x-axis when the first waveform graph is drawn on the first canvas, and the fourth scaling factor is used to indicate a reduction ratio or a magnification factor of the value of the point on the first waveform graph on the y-axis when the first waveform graph is drawn on the first canvas; The end point of the first waveform image having the first mapping relationship with the first index is searched, and the starting point of the sixth waveform image is spliced ​​with the end point of the first waveform image on the first canvas to obtain the target waveform image.

7. A graphic display device, characterized in that: include: a sending module, configured to send a target request to a target service when the amount of received target audio data is greater than or equal to a preset threshold, wherein the target request is used to request the target service to segment the target audio; a first drawing module, configured to receive a first audio signal returned by the target service and draw a first waveform corresponding to the first audio signal on a first canvas, wherein the first audio signal is audio signal included in an audio array obtained by segmenting the target audio signal by the target service upon receiving the target request; a splicing module, configured to, when the playback duration of the first audio reaches a preset duration, receive a second audio returned by the target service, and splice a second waveform corresponding to the second audio with the first waveform on the first canvas to obtain a target waveform, wherein the second audio is an audio included in the audio array that follows the first audio and is adjacent to the first audio, and copy the spliced ​​target waveform from the first canvas to the second canvas for display; a display module, configured to replace the first waveform displayed on the second canvas with the target waveform, so as to display the target waveform on the second canvas, when the second audio is the last audio included in the segmented target audio; The second drawing module is used to draw a third waveform corresponding to the target audio on the first canvas when the data volume of the target audio is less than the preset threshold, and display the third waveform on the second canvas of the first target interface.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, wherein the computer program implements the steps of the method described in any one of claims 1 to 6 when executed by a processor.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.

Images