An audio playing method and a processing terminal bypassing automatic playing restriction of a browser

Abstract

The application discloses an audio playing method bypassing automatic playing limitation of a browser, comprising the following steps: step 1, instantiating an MQTT client; step 2, judging whether the MQTT client receives a target instruction, if yes, continuing; step 3, selecting all target audio resources based on target audio resource information; step 4, establishing a corresponding working process for each audio file in the target audio resources, thereby establishing working processes with the same number of audio files; step 5, creating a command line playing tool of playable audio, and playing each audio file in the target audio resources in sequence until all audios are played. The application can bypass the automatic playing limitation of the browser, and still realize automatic playing of audio without active interaction of the user, thereby guaranteeing the stability of message notification function required by business, and improving user experience.

Description

Technical Field

[0001] This invention relates to the field of browser audio playback technology, specifically an audio playback method and processing terminal that bypasses browser autoplay restrictions. Background Technology

[0002] Many web projects rely on browsers to run. For example, a web project might need to play audio (such as music or voice notifications), which requires a browser. However, many existing browsers restrict autoplay for audio and video, requiring users to manually click play before the audio or video will play. Disabling autoplay in browsers can impact the normal operation of some web projects. For instance, in message notification scenarios, projects often use message queues (MQ) and WebSockets to push new messages from the backend to the frontend. When browsers are strictly restricted from autoplay, backend messages cannot be pushed automatically in a timely manner, preventing audio and video from playing automatically and disrupting normal business operations. This is especially problematic for large-screen displays, where users cannot interact as quickly as on a regular device (computer monitor). If a user misses their initial interaction, subsequent important notifications will lack audio feedback due to the inability to autoplay, impacting user experience and hindering business progress. Therefore, a technology is needed that allows audio and video playback to continue in the browser even after autoplay is disabled, bypassing the restriction. Summary of the Invention

[0003] To address the shortcomings of existing technologies, the purpose of this invention is to provide an audio playback method and processing terminal that bypasses browser autoplay restrictions, thereby solving the problems described in the background section.

[0004] The technical solution to achieve the objective of this invention is: an audio playback method that bypasses browser autoplay restrictions, comprising the following steps:

[0005] Step 1: After the Vue project is initialized and the page loads successfully, instantiate the MQTT client and configure the corresponding MQTT server connection parameters in the system environment;

[0006] Step 2: Determine whether the MQTT client has received the target instruction. The target instruction includes information about the target audio resource to be played. If yes, continue to step 3; otherwise, continue to receive MQTT information.

[0007] Step 3: Based on the target audio resource information, select all target audio resources;

[0008] Step 4: Create a corresponding worker process for each audio file in the target audio resource, thereby creating the same number of worker processes as the number of audio files;

[0009] Step 5: Create a command-line player that can play audio and play each audio file in the target audio resource in sequence until all audio files have been played.

[0010] Furthermore, in step 1, the MQTT client is instantiated using lifecycle hook functions in the VUE component.

[0011] Furthermore, in step 1, when the system environment is a Windows operating system, the configured MQTT server connection parameters include host and port.

[0012] Furthermore, in step 3, the Node.js crawler library is invoked, and the crawler library is used to traverse all DOM structures within the page to accurately locate the src attribute within all audio tags, thereby selecting the target audio resource.

[0013] Furthermore, in step 5, a command-line playback tool is created using the child_process module of Node.js, where the ffplay command component is created as a command-line playback tool capable of playing audio.

[0014] Furthermore, following step 5, it also includes,

[0015] Step 6: Check the completion status of all processes and audio playback. If all are completed, end the process.

[0016] Furthermore, the specific implementation process of detecting the completion status of all processes includes:

[0017] Define a function in the main process that returns a new Promise instance. Use the forEach method to iterate through each of the passed-in worker processes, and add an exit event listener to each worker process.

[0018] When a process triggers the exit event, it means that the process has ended, and the defined variable is incremented by 1. If the current value of the variable is the same as the number of processes, it means that all processes have completed.

[0019] Furthermore, the specific implementation process of detecting the completion status of all audio playback includes:

[0020] Maintain a variable that acts as a counter. Increment the counter when each audio file finishes playing. When the counter count equals the number of audio files, it means that all audio files have finished playing, and execute the tmp.dir command to delete the temporary folder.

[0021] A processing terminal, comprising:

[0022] Memory, used to store program instructions;

[0023] A processor for running the program instructions to perform the steps of the audio playback method that bypasses browser autoplay restrictions.

[0024] The beneficial effects of this invention are as follows: This invention can bypass the browser's autoplay limitation and still achieve automatic audio playback without user interaction (such as manually clicking the play button), thereby ensuring the stability of the message notification function required by the business, improving the user experience, and is not dependent on specific browser versions and operating systems, making it easy to adapt to mainstream systems, expand application scenarios, and facilitate subsequent iterations. Attached Figure Description

[0025] Figure 1 A flowchart illustrating the image focus evaluation method;

[0026] Figure 2 This is a schematic diagram of the processing terminal. Detailed Implementation

[0027] The present invention will be further described below with reference to the accompanying drawings and specific embodiments:

[0028] like Figure 1 As shown, an audio playback method that bypasses browser autoplay restrictions includes the following steps:

[0029] Step 1: After the Vue project is initialized and the page loads successfully, instantiate the MQTT client and configure the corresponding MQTT server connection parameters in the system environment.

[0030] In this step, the MQTT client can be instantiated using lifecycle hooks in Vue components. The MQTT client is used to receive MQTT information such as messages and commands from the MQTT server.

[0031] The configured MQTT server connection parameters are adapted to the corresponding system environment. For example, if the system environment is a Windows operating system, the configured MQTT server connection parameters include parameters such as host and port to enable the message listening channel and thus receive MQTT information from the MQTT server.

[0032] Step 2: Determine whether the MQTT client has received the target instruction. The target instruction includes information about the target audio resource to be played. If yes, continue to step 3; otherwise, continue to receive MQTT information.

[0033] Step 3: Select all target audio resources based on the target audio resource information.

[0034] In this step, a Node.js web crawler library is invoked, and the entire DOM structure on the page is traversed through the crawler library to accurately locate the src attribute within all <audio> tags. The <audio> tag is the audio tag, thereby selecting the target audio resource.

[0035] The main code that precisely locates the src attribute within all <audio> tags is as follows:

[0036] const{data}=awaitaxios.get(url);

[0037] const￥=cheerio.load(data); constaudioSources=[];

[0038] ￥('audio').each((i,elem)=>{constsrc=￥(elem).attr('src'); if(src)

[0039] {audioSources.push(src);}}).

[0040] Step 4: Create a corresponding worker process for each audio file in the target audio resource, thus creating the same number of worker processes as the number of audio files.

[0041] In this step, the child_process module of Node.js is used to create child processes, each of which serves as a worker process.

[0042] Step 5: Create a command-line player that can play audio. The command-line player is a program module that can execute command lines. After creating the command-line player, play each audio file in the target audio resource sequentially until all audio files have been played.

[0043] In this step, you can create a command-line playback tool using Node.js's child_process module. For example, you can create an ffplay command component as a command-line playback tool that can play audio.

[0044] The `exec` function is introduced using Node.js's `child_process` module. This function executes external commands within a script shell. The external command can be `ffplay`, thus enabling playback of the currently playing audio.

[0045] For audio files to be played, the node-tmp library pipes all audio files corresponding to other processes to a local temporary file, storing them in a local buffer for later playback. The pipe mechanism sends each audio file to a pointer to the temporary file.

[0046] Step 6: Check the completion status of all processes and audio playback. If all are completed, end the process.

[0047] Define a function in the main process that returns a new Promise instance. Use the forEach method to iterate through each worker process, adding an exit event listener to each worker process. When a process triggers the exit event, it means that the process has ended, and the defined variable is incremented by 1. If the current value of the variable is the same as the number of processes, it means that all processes have completed.

[0048] To check if all audio files have finished playing, a variable can be maintained as a counter. The counter is incremented when each audio file finishes playing. When the counter count equals the number of audio files, it means that all audio files have finished playing, and the tmp.dir command is executed to delete the temporary folder.

[0049] This invention can bypass the browser's autoplay limitation and still achieve automatic audio playback without user interaction (such as manually clicking the play button), thereby ensuring the stability of the message notification function required by the business, improving the user experience, and is not dependent on specific browser versions and operating systems. It is easy to adapt to mainstream systems, expand application scenarios, and facilitate subsequent iterations.

[0050] like Figure 2 As shown, the present invention also provides a processing terminal 100, which includes:

[0051] Memory 101 is used to store program instructions;

[0052] Processor 102 is configured to run the program instructions to perform the steps of the audio playback method that bypasses browser autoplay restrictions.

[0053] The embodiments disclosed in this specification are merely illustrative of one aspect of the invention, and the scope of protection of the invention is not limited to these embodiments. Any other functionally equivalent embodiments fall within the scope of protection of the invention. Those skilled in the art can make various other corresponding changes and modifications based on the technical solutions and concepts described above, and all such changes and modifications should fall within the scope of protection of the claims of this invention.

Claims

1. An audio playback method that bypasses browser autoplay restrictions, characterized in that, Includes the following steps: Step 1: After the Vue project is initialized and the page loads successfully, instantiate the MQTT client and configure the corresponding MQTT server connection parameters in the system environment; Step 2: Determine whether the MQTT client has received the target instruction. The target instruction includes information about the target audio resource to be played. If yes, continue to step 3; otherwise, continue to receive MQTT information. Step 3: Based on the target audio resource information, select all target audio resources; Step 4: Create a corresponding worker process for each audio file in the target audio resource, thereby creating the same number of worker processes as the number of audio files; Step 5: Create a command-line playback tool that can play audio, and play each audio file in the target audio resource in sequence until all audio has been played; Step 6: Check the completion status of all processes and audio playback. If all are complete, end the process. The specific implementation process of detecting the completion status of all processes includes: Define a function in the main process that returns a new Promise instance. Use the forEach method to iterate through each of the passed-in worker processes, and add an exit event listener to each worker process. When a process triggers the exit event, it means that the process has ended, and the defined variable is incremented by 1. If the current value of the variable is the same as the number of processes, it means that all processes have completed. The specific implementation process for detecting the completion status of all audio playback includes: Maintain a variable that acts as a counter. Increment the counter when each audio file finishes playing. When the counter count equals the number of audio files, it means that all audio files have finished playing, and execute the tmp.dir command to delete the temporary folder.

2. The audio playback method for bypassing browser autoplay restrictions according to claim 1, characterized in that, In step 1, the MQTT client is instantiated using lifecycle hook functions in the VUE component.

3. The audio playback method for bypassing browser autoplay restrictions according to claim 1, characterized in that, In step 1, if the system environment is a Windows operating system, the configured MQTT server connection parameters include host and port.

4. The audio playback method for bypassing browser autoplay restrictions according to claim 1, characterized in that, In step 3, the Node.js crawler library is invoked, and the crawler library is used to traverse all DOM structures within the page to accurately locate the src attribute within all audio tags, thereby selecting the target audio resource.

5. The audio playback method for bypassing browser autoplay restrictions according to claim 1, characterized in that, In step 5, a command-line playback tool is created using the child_process module of Node.js. Specifically, the ffplay command component is created as a command-line playback tool that can play audio.

6. A processing terminal, characterized in that, It includes: Memory, used to store program instructions; A processor for running the program instructions to perform the steps of the audio playback method for bypassing browser autoplay restrictions as described in any one of claims 1-5.

Images