Method, system and equipment for realizing visual audio by using native audio API (Application Program Interface)

Abstract

A method for realizing visual audio by using a native audio API (Application Program Interface) comprises the following steps: establishing a basic mechanism, a page comprising tilt for playing audio; carrying out audiogt; the element is used for drawing the lt of the visual graph; the method comprises the following steps: carrying out canvasgt; an element; establishing an audio context; connecting an analyzer node; acquiring frequency domain data in real time; and drawing a visual graph.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a method, system, and device for implementing audio visualization using a native audio API. Background Art

[0002] With the development of web technologies, HTML5 has brought a variety of multimedia processing capabilities to browsers. The WebAudio API is a high-performance audio processing interface that provides developers with a range of functions, including audio acquisition, processing, analysis, synthesis, and playback. Traditional audio visualization relies primarily on plug-ins (such as Flash) or third-party libraries, which suffer from poor compatibility, low performance, and security issues.

[0003] Existing audio visualization solutions are mostly based on encapsulated components or frameworks, which lack flexibility and most do not fully utilize the audio analysis capabilities provided by the browser's native API. In particular, there are still technical difficulties in achieving high-performance, low-latency, and real-time responsive visualization processing on the web side. Summary of the Invention

[0004] One of the objectives of the present invention is to provide a method, system, and device for implementing audio visualization using a native audio API. The implementation of audio visualization is lighter, more real-time, and more scalable, and can meet the needs of various application scenarios such as interactive music, education, entertainment, and monitoring.

[0005] One of the purposes of the present invention is to provide a method, system and device for realizing audio visualization by using native audio API, <audio>Elements and <canvas>The drawing interface enables audio visualization without external plug-ins by establishing an audio context, connecting analyzer nodes, acquiring frequency domain data in real time, and drawing visualization graphs.

[0006] One of the purposes of the present invention is to provide a method, system and device for implementing audio visualization using a native audio API, making full use of the native API without relying on a third-party library.

[0007] One of the purposes of the present invention is to provide a method, system and device for implementing audio visualization using a native audio API, which has a simple structure and is suitable for embedding into any web page.

[0008] One of the purposes of the present invention is to provide a method, system and device for realizing audio visualization using a native audio API, which has strong real-time response capability and can draw visual effects according to dynamic changes in audio.

[0009] One of the objectives of the present invention is to provide a method, system and device for implementing audio visualization using a native audio API, which can support a variety of visualization style designs.

[0010] In order to achieve at least one of the inventive objectives of the present invention, the present invention provides a method for implementing audio visualization using a native audio API, the method comprising the following steps:

[0011] Build the basic structure, the page includes the <audio>Elements and graphics used to draw visualizations <canvas>element;

[0012] Establishing audio context;

[0013] Connect to analyzer nodes; acquire frequency domain data in real time; and

[0014] Draw visual graphics;

[0015] The step of establishing the audio context further includes the following steps: creating a source node, a processing node, and an output node, and connecting each node in series to form a complete link.

[0016] In some embodiments, the method for implementing visual audio using a native audio API further includes the steps of: performing initialization, listening to the audio.onplay event, initializing the audio context and related nodes during the first playback, and preventing repeated initialization.

[0017] In some embodiments, the method for visualizing audio using a native audio API further includes the steps of obtaining audio waveform data from an analyzer node, processing the data, and finally sending the data to a canvas for drawing.

[0018] In some embodiments, the method of implementing visual audio using a native audio API also includes the steps of: setting an initialization state; binding a play event; creating an audio context; creating an audio source; creating an analyzer node; setting a window size, where the larger the window, the more detailed the analysis results; and connecting the source node to the analyzer node.

[0019] In some embodiments, the method for implementing audio visualization using a native audio API further includes the step of: continuously updating the analyzer data into the data array when the audio is played continuously.

[0020] In some embodiments, the method for implementing audio visualization using a native audio API further includes the steps of: calculating the width of each rectangle in the visual audio graph and the total width of each bar during the data drawing process, wherein the width of each rectangle = canvas width / array length, and the total width of each bar = data / 255*canvas height.

[0021] According to another aspect of the present invention, the present invention further provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the method for implementing audio visualization using a native audio API are performed.

[0022] According to another aspect of the present invention, the present invention further provides a device for implementing audio visualization using a native audio API, comprising:

[0023] Memory, for storing software applications,

[0024] The processor is configured to execute the software application, wherein each program of the software application correspondingly executes each step of the method for implementing audio visualization using a native audio API.

[0025] According to another aspect of the present invention, the present invention also provides a system for realizing audio visualization by using a native audio API, which applies the method for realizing audio visualization by using a native audio API. The system for realizing audio visualization by using a native audio API includes an infrastructure page unit, an audio context establishment unit, an analyzer node connection unit, a frequency domain data real-time acquisition unit, and a visualization graphics drawing unit, wherein the infrastructure page unit constructs a basic mechanism, and the page includes a unit for playing audio. <audio>Elements and graphics used to draw visualizations <canvas>element, the audio context establishing unit establishes an audio context, the analyzer node connecting unit connects the analyzer node, the frequency domain data real-time acquiring unit acquires frequency domain data in real time, and the visual graphics drawing unit draws a visual graphics.

[0026] In some embodiments, the analyzer node connection unit uses audioCtx.createAnalyser to create an analyzer node, and then connects the source node to the analyzer node, wherein the analyzer node obtains the data of the time domain graph and converts the time domain graph into frequency domain graph data through fast Fourier transform. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] Figure 1 This is a visual audio graph implemented in a method for implementing audio visualization using a native audio API according to an embodiment of the present invention. The figure shows a grayscaled visual audio graph.

[0028] Figure 2 3 is a flowchart of the steps of the method for implementing audio visualization using a native audio API according to the above embodiment of the present invention, illustrating the audio processing flow.

[0029] Figure 3 3 is a flowchart of the steps of the method for implementing audio visualization using a native audio API according to the above embodiment of the present invention, illustrating the audio processing flow.

[0030] Figure 4 3 is a flowchart of the steps of the method for implementing audio visualization using a native audio API according to the above embodiment of the present invention, illustrating the audio processing flow.

[0031] Figure 5 : is a flowchart of the steps of the method for implementing audio visualization using the native audio API according to the above embodiment of the present invention, illustrating the setting of gradient colors. The figure shows the grayscale image. DETAILED DESCRIPTION

[0032] The following description is intended to disclose the present invention so that those skilled in the art can implement the present invention. The preferred embodiments described below are for illustrative purposes only, and those skilled in the art will readily appreciate other obvious variations. The basic principles of the present invention defined in the following description may be applied to other embodiments, variations, improvements, equivalents, and other technical solutions that do not depart from the spirit and scope of the present invention.

[0033] It is understood that the term "one" should be understood as "at least one" or "one or more", that is, in one embodiment, the number of an element may be one, while in another embodiment, the number of the element may be multiple, and the term "one" should not be understood as a limitation on the quantity.

[0034] The present invention is an invention related to computer programs. Based on a method of realizing visual audio using a native audio API, the present invention describes a solution for solving the problem raised by the present invention, which is based on a computer program processing flow, and controls or processes external or internal objects of the computer by executing a computer program compiled according to the flow. Through the method of the present invention, it is possible to utilize a computer system to realize visual audio in a lighter, more real-time, and more scalable manner, and can meet the needs of various application scenarios such as interactive music, education, entertainment, and monitoring; combined with <audio>Elements and <canvas>The drawing interface establishes an audio context, connects to analyzer nodes, acquires frequency domain data in real time, and draws visual graphs, enabling audio visualization without external plugins. It fully leverages native APIs, eliminating the need for third-party libraries. Its simple structure makes it suitable for embedding in any web page. It offers strong real-time responsiveness, enabling the rendering of visual effects based on dynamic audio changes, and supports a variety of visualization styles. It should be understood that the term "computer" as used herein refers not only to desktop computers, laptops, tablets, and other devices, but also to other intelligent electronic devices capable of executing programs and processing data.

[0035] The method for implementing audio visualization using a native audio API comprises the following steps:

[0036] Establishing audio context;

[0037] Connect to analyzer nodes; acquire frequency domain data in real time; and

[0038] Draw a visualization graph.

[0039] Specifically, the method for implementing audio visualization using the native audio API includes the following steps:

[0040] S100: Build the basic structure, including the page for playing audio <audio>Elements and graphics used to draw visualizations <canvas>element.

[0041] In a preferred embodiment, the code called in step S100 is implemented as follows:

[0042] <canvas id＝"canvas">< / canvas>

[0043] <audio src＝"https: resource.dengzhanyong.com audio 海底.mp3"controls>< / audio>

[0044] S200: Execute initialization, listen for the audio.onplay event, initialize the audio context and related nodes during the first playback to prevent repeated initialization.

[0045] Specifically, the step S200 further includes the following steps:

[0046] Get event initialization status;

[0047] Bind play event;

[0048] The initialization content is executed only once, and this event is called each time the video is paused and then played again.

[0049] In a preferred embodiment, the code called in step S200 is implemented as follows:

[0050]

[0051] S300: Acquire the played audio data and perform audio processing. This involves calling the AudioContext API. This API is equivalent to an audio context, where all audio events occur within the context.

[0052] Specifically, if Figure 2 and Figure 3 As shown, step S300 includes the following steps:

[0053] Create source nodes, processing nodes, and output nodes. Each node is connected in series to form a complete link. A processing node can have multiple processing nodes and multiple source nodes.

[0054] Preferably, the source node is created through AudioContext. Preferably, the audio tag is implemented as the source node.

[0055] Preferably, the audio is processed in the processing node, such as processing the timbre, pitch, audio, etc.

[0056] Preferably, the currently used loudspeaker module is implemented as an output node.

[0057] In a specific embodiment, Figure 4 As shown, creating a processing node is specifically implemented as creating an analyzer node. The step S300 further includes the following steps: acquiring audio waveform data from the analyzer node, processing the data, and finally sending the data to the canvas for drawing.

[0058] More specifically, the step S300 further includes the following steps: creating an audio context; creating an audio source; and connecting to an output device.

[0059] In a preferred embodiment, the code called in step S300 is implemented as follows:

[0060]

[0061] Among them, audioCtx.destination is implemented as the current output device.

[0062] S400: Acquire and process audio data.

[0063] Specifically, step S400 includes the following steps:

[0064] S410: Call audioCtx.createAnalyser to create an analyzer node;

[0065] S420: Connect the source node to the analyzer node.

[0066] S430: The analyzer node obtains data of the time domain graph;

[0067] S440: Convert the time domain image into frequency domain image data through fast Fourier transform. During the conversion process, parameters are set and the relevant API provided by AudioContext is called.

[0068] The step S400 also includes the steps of: setting an initialization state; binding a play event; creating an audio context; creating an audio source; creating an analyzer node; setting a window size, where the larger the window, the more detailed the analysis results; and connecting the source node to the analyzer node.

[0069] In a preferred embodiment, the code called in step S400 is implemented as follows:

[0070]

[0071] fftSize: Sets the Fourier transform window size. The larger the window, the more detailed the analysis results. The value must be a power of 2.

[0072] The analysis results are placed in an array, and each item in the array is an 8-bit unsigned integer. Therefore, what is created here is not an ordinary array, but a Uint8Array.

[0073] Among them, frequencyBinCount: The value of this property is half of fftSize. Since the frequency domain graph after Fourier transform is a symmetrical structure, only half of the data needs to be obtained. Finally, connect the analyzer node to the output device, otherwise the audio sound will not be heard.

[0074] S500: Execute drawing data.

[0075] Specifically, step S500 includes the following steps:

[0076] Determine whether the audio is played continuously;

[0077] When the audio is played continuously, the analyzer data is continuously updated to the data array.

[0078] During data drawing, the width of each rectangle in the audio visualization graph and the total width of each bar are calculated. The width of each rectangle is calculated as canvas width / array length, and the total width of each bar is calculated as data / 255*canvas height.

[0079] More specifically, the step S500 also includes the following steps: drawing content; clearing the canvas; updating the data of the analyzer node to data; calculating the height of each square; obtaining the value of this column; obtaining the horizontal coordinate of each column; calculating the number of squares in each column; looping to draw the small squares in each column; setting the color; obtaining the vertical coordinate of each small square; and drawing a rounded rectangle.

[0080] In a preferred embodiment, the code called in step S500 is implemented as follows:

[0081]

[0082]

[0083] Furthermore, the method for realizing audio visualization using the native audio API also includes the steps of drawing a rounded rectangle: calling the lineTo method to set the four sides; calling the quadraticCurveTo (quadratic Bezier curve path) method to set the rounded path; and performing filling.

[0084] In a preferred embodiment, the code called by the step of drawing a rounded rectangle is implemented as follows:

[0085]

[0086]

[0087] Furthermore, the method for implementing audio visualization using a native audio API also includes a step of setting a gradient color: encapsulating a method generateGradient for obtaining a gradient color; receiving two parameters: baseColor (starting color) and count (number of gradient colors).

[0088] In a preferred embodiment, the code called in the step of setting the gradient color is implemented as follows:

[0089]

[0090] It can be understood that HSLA represents a color mode, which is composed of four parts: Hue, Saturation, Lightness and Alpha.

[0091] It is understood that, among them, hue: an integer between 0 and 360, which represents the basic properties of color, such as red, green or blue. Among them, saturation: a percentage between 0% and 100%, which represents the purity of the color. 0% represents gray, and 100% represents the brightest color. Among them, brightness: a percentage between 0% and 100%, which represents the lightness and darkness of the color. 0% represents black, 50% represents the original color, and 100% represents white. Among them, transparency (alpha): a decimal between 0 and 1, which represents the transparency of the color. 0 represents completely transparent, and 1 represents completely opaque. It is understood that, Figure 5 This is a schematic diagram after grayscale conversion. The gradient color set before grayscale conversion is not subject to this restriction.

[0092] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided in the form of methods, systems, or computer program products. Thus, the present invention may take the form of an all-hardware embodiment, an all-software embodiment, or a combination of software and hardware embodiments.

[0093] The present invention may be embedded in a computer program product comprising all the features enabling the method described herein to be implemented. The computer program product is contained in one or more computer-readable storage media having computer-readable program code contained therein. According to another aspect of the present invention, a computer-readable storage medium is also provided, on which a computer program is stored, which, when executed by a processor, is capable of executing the steps of the method of implementing audio visualization using a native audio API of the present invention. A computer storage medium is a medium in a computer memory for storing a certain discontinuous physical quantity. Computer storage media include, but are not limited to, semiconductors, disk memories, magnetic cores, magnetic drums, magnetic tapes, laser discs, and the like. It will be understood by those skilled in the art that computer storage media are not limited to the aforementioned examples, which are merely examples and are not intended to limit the present invention.

[0094] According to another aspect of the present invention, a device for implementing audio visualization using a native audio API is provided. The device includes a software application, a memory for storing the software application, and a processor for executing the software application. Each program in the software application is capable of correspondingly executing the steps of the method for implementing audio visualization using a native audio API of the present invention.

[0095] A typical combination of hardware and software may be a general-purpose computer system with a computer program. When the program is loaded and executed, it controls the computer system to perform the method for realizing audio visualization using a native audio API disclosed in the present invention.

[0096] It will be understood by those skilled in the art that the device may be embodied as a desktop computer, a notebook, a mobile smart device, etc., but the foregoing is merely an example and also includes other intelligent analysis devices equipped with the software application of the present invention.

[0097] Those skilled in the art will appreciate that the present invention's method for implementing audio visualization using a native audio API can be implemented using hardware, software, or a combination of both. The present invention can be implemented in a centralized manner within at least one computer system, or in a decentralized manner across multiple interconnected computer systems. Any computer system or other device capable of implementing the method is applicable. A commonly used combination of hardware and software can include a general-purpose computer system with a computer program installed, where the computer system is controlled by the installed and executed program to execute the method.

[0098] Corresponding to the embodiment of the method of the present invention, according to another aspect of the present invention, a system for implementing audio visualization using a native audio API is provided. The system is an application of the method of implementing audio visualization using a native audio API in the present invention to improve computer programs. The system for implementing audio visualization using a native audio API can utilize a computer system, and the implementation of audio visualization is lighter, more real-time, and more scalable, and can meet the needs of various application scenarios such as interactive music, education, entertainment, and monitoring; combined with <audio>Elements and <canvas>The drawing interface achieves audio visualization without external plug-ins by establishing an audio context, connecting analyzer nodes, obtaining frequency domain data in real time, and drawing visual graphics. It fully utilizes the native API without relying on third-party libraries. It has a simple structure and is suitable for embedding in any web page. It has strong real-time responsiveness and can draw visual effects based on dynamic changes in audio. It can support a variety of visualization style designs.

[0099] Specifically, the system for implementing audio visualization using native audio API includes a basic structure page unit, an audio context establishment unit, an analyzer node connection unit, a frequency domain data real-time acquisition unit, and a visualization graph drawing unit. The basic structure page unit constructs the basic mechanism, and the page includes a unit for playing audio. <audio>Elements and graphics used to draw visualizations <canvas>element, the audio context establishing unit establishes an audio context, the analyzer node connecting unit connects the analyzer node, the frequency domain data real-time acquiring unit acquires frequency domain data in real time, and the visual graphics drawing unit draws a visual graphics.

[0100] In a specific preferred embodiment, the infrastructure page unit is implemented to perform:

[0101] <canvas id＝"canvas">< / canvas>

[0102] <audio src＝"https: resource.dengzhanyong.com audio 海底.mp3"controls>< / audio>

[0103] Furthermore, the system for implementing audio visualization using a native audio API is also provided with a single initialization work unit, which initializes the audio context and related nodes during the first playback by monitoring the audio.onplay event to prevent repeated initialization.

[0104] The single initialization work unit includes an event monitoring module, a status acquisition module, an event binding module, a play judgment module, and an initialization execution module. The event monitoring module monitors the audio.onplay event, the status acquisition module obtains the event initialization status, the event binding module binds the play event, the play judgment module determines whether it is the first play or the playback after a pause, and the initialization execution module executes the initialization content only once. The event is called each time the playback is resumed after a pause, and content processing is performed.

[0105] In a specific preferred embodiment, the first single initialization work unit is implemented to execute:

[0106]

[0107] The audio context establishment unit is provided with a source node module, a processing node module and an output node module. In the source node module, a source node is created through AudioContext, and preferably, the source node is an audio tag. The processing node module processes the audio, such as: processing timbre, pitch, audio, etc. The output node module calls the currently used speaker, preferably, obtained in AudioContext. The audio context establishment unit is also configured to execute: each node is connected in series to form a complete link, and multiple processing nodes can be added to the processing node, and there can also be multiple source nodes.

[0108] The analyzer node connection unit sets an analyzer node, obtains audio waveform data from the analyzer node, processes the data, and finally passes it to the canvas for drawing.

[0109] The system for implementing visual audio using a native audio API is further provided with an audio context creation module, an audio source creation module, and an output device connection module. The audio context creation module creates an audio context, the audio source creation module creates an audio source, and the output device connection module connects to an output device.

[0110] In a preferred embodiment, the system for implementing audio visualization using a native audio API is further implemented to execute:

[0111]

[0112] Preferably, audioCtx.destination is implemented as the current output device.

[0113] The analyzer node connection unit uses audioCtx.createAnalyser to create an analyzer node, and then connects the source node to the analyzer node. The analyzer node obtains time domain graph data, which needs to be converted into frequency domain graph data through fast Fourier transform. The conversion process provides relevant APIs through AudioContext. The system for implementing audio visualization using native audio APIs also has a parameter setting module. During the conversion process, after configuring parameters in the parameter setting module, AudioContext provides relevant APIs to convert the time domain graph into frequency domain graph data through fast Fourier transform.

[0114] More specifically, the system for implementing visual audio using a native audio API is further configured to perform: setting an initialization state; binding a play event; creating an audio context; creating an audio source; creating an analyzer node; setting a window size, where the larger the window, the more detailed the analysis results; and connecting the source node to the analyzer node.

[0115] In a preferred embodiment, the system for implementing audio visualization using a native audio API is further implemented to execute:

[0116]

[0117]

[0118] The system for visualizing audio using the native audio API also includes a window setting module for setting the Fourier transform window size, preferably called fftSize, where a larger window size results in more detailed analysis results. The value must be a power of 2.

[0119] The system for implementing audio visualization using a native audio API is further provided with an array module, which is configured to execute: placing the analysis results into an array, each item of the array is an 8-bit unsigned integer, wherein a Uint8Array is created instead of an ordinary array.

[0120] The system for visualizing audio using the native audio API also includes a half-attribute value processing module, configured to call frequencyBinCount with a value equal to half of fftSize. Because the Fourier transformed frequency domain graph is symmetrical, only half of the data is required. Finally, the analyzer node is connected to an output device; otherwise, the audio will be inaudible.

[0121] As the audio continues to play, the analyzer data needs to be continuously updated to the data array. The visual graphics drawing unit includes a drawing process calculation logic processing module for calculation logic processing during the drawing process. Preferably, the drawing process calculation logic processing module calculates the width value of each rectangle in the visual audio graph and the total width value of each bar during the drawing data. The width of each rectangle = canvas width / array length, and the total width of each bar = data / 255 * canvas height.

[0122] The visual graphics drawing unit is also configured to execute: drawing content; clearing the canvas; updating the data of the analyzer node to data; calculating the height of each square; obtaining the value of this column; obtaining the horizontal coordinate of each column; calculating the number of squares in each column; looping to draw the small squares in each column; setting the color; obtaining the vertical coordinate of each small square; and drawing a rounded rectangle.

[0123] In a preferred embodiment, the visual graphics drawing unit is further configured to execute:

[0124]

[0125]

[0126] Specifically, the visual graphics drawing unit also includes a rounded rectangle drawing module, which is configured to execute: calling the lineTo method to set the four sides; calling the quadraticCurveTo (quadratic Bezier curve path) method to set the rounded path; and performing filling.

[0127] In a preferred embodiment, the code called by the rounded rectangle drawing module is implemented as follows:

[0128]

[0129] Specifically, the visual graphics drawing unit further includes a gradient color setting module, which is configured to execute: encapsulate a method generateGradient for obtaining gradient colors; and receive two parameters: baseColor (starting color) and count (number of gradient colors).

[0130] In a preferred embodiment, the code called by the gradient color setting module is executed as follows:

[0131]

[0132] It will be appreciated by those skilled in the art that the present invention has been described with reference to the flowcharts and / or block diagrams of the methods, systems, and computer program products according to the present invention. Each block in the flowcharts and / or block diagrams, and combinations of blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions (which are passed through the processor of the computer or other programmable data processing device) generate means for implementing the functions specified in one or more blocks in the flowcharts and / or block diagrams.

[0133] Those skilled in the art will appreciate that the embodiments of the present invention described above and shown in the accompanying drawings are intended to be illustrative only and are not intended to limit the present invention. The objectives of the present invention have been fully and effectively achieved. The functional and structural principles of the present invention have been demonstrated and illustrated in the embodiments. Any variations or modifications may be made to the embodiments of the present invention without departing from these principles.< / canvas> < / audio> < / canvas> < / audio> < / canvas> < / audio> < / canvas> < / audio> < / canvas> < / audio> < / canvas> < / audio> < / canvas> < / audio>

Claims

1. A method for implementing audio visualization using a native audio API, characterized in that: The method for implementing audio visualization using a native audio API comprises the following steps: Build the basic structure, the page includes the <audio>Elements and graphics used to draw visualizations <canvas> element;< / canvas> < / audio> Establishing audio context; Connect to analyzer nodes; acquire frequency domain data in real time; and Draw visual graphics; The step of establishing the audio context further includes the following steps: creating a source node, a processing node, and an output node, and connecting each node in series to form a complete link.

2. The method for implementing audio visualization using a native audio API as described in claim 1, wherein the method for implementing audio visualization using a native audio API further comprises the steps of: performing initialization, monitoring the audio.onplay event, initializing the audio context and related nodes upon first playback, and preventing repeated initialization.

3. The method for implementing audio visualization using a native audio API as described in claim 1, wherein the method for implementing audio visualization using a native audio API further comprises the steps of: obtaining audio waveform data from an analyzer node, processing the data, and finally sending the data to a canvas for drawing.

4. The method for implementing audio visualization using a native audio API as claimed in claim 1, wherein the method for implementing audio visualization using a native audio API further comprises the steps of: setting an initialization state; binding a play event; creating an audio context; Create an audio source; create an analyzer node; Set the window size, where the larger the window, the more detailed the analysis results; and connecting the source node to the analyzer node.

5. The method for implementing audio visualization using a native audio API as claimed in claim 1, wherein the method for implementing audio visualization using a native audio API further comprises the step of: continuously updating the analyzer data into the data array when the audio is played continuously.

6. The method for implementing audio visualization using a native audio API according to any one of claims 1 to 5, wherein the method further comprises the step of: calculating the width value of each rectangle in the audio visualization graph and the total width value of each bar in the data drawing process, wherein: The width of each rectangle = canvas width / array length, and the total width of each bar = data / 255 * canvas height.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for realizing audio visualization by using a native audio API as claimed in any one of claims 1 to 6 are performed.

8. A device for implementing audio visualization using a native audio API, characterized in that: include: Memory, for storing software applications, A processor is configured to execute the software application, wherein each program of the software application correspondingly executes each step of the method for implementing audio visualization using a native audio API as described in any one of claims 1 to 6.

9. A system for implementing audio visualization using a native audio API, applying the method for implementing audio visualization using a native audio API as claimed in any one of claims 1 to 6, characterized in that: The system for realizing audio visualization by using native audio API includes a basic structure page unit, an audio context establishment unit, an analyzer node connection unit, a frequency domain data real-time acquisition unit, and a visualization graph drawing unit, wherein the basic structure page unit constructs a basic mechanism, and the page includes a unit for playing audio. <audio>Elements and graphics used to draw visualizations <canvas> element, the audio context establishing unit establishes an audio context, the analyzer node connecting unit connects the analyzer node, the frequency domain data real-time acquiring unit acquires frequency domain data in real time, and the visual graphics drawing unit draws a visual graphics.< / canvas> < / audio> 10. The system for implementing audio visualization using a native audio API according to claim 9, wherein the analyzer node connection unit uses audioCtx.createAnalyser to create an analyzer node, and then connects the source node to the analyzer node, wherein: The analyzer node obtains the time domain data and converts the time domain data into frequency domain data through fast Fourier transform.

Images