A method and system for editing and rendering lyrics on a large screen in a bar

Abstract

The present invention provides a method and system for editing and rendering lyrics on a large screen in a bar, comprising: S1, searching for songs that need to be edited and rendered on the system; S2, selecting songs that need to be edited and rendered in a song list; S3, selecting a basic lyrics setting template; S4, configuring lyrics animation; S5, configuring lyrics color, specifically: S501, setting a gradient background; S502, cutting the background to match the text; S503, setting the text color to transparent; S6, saving lyrics settings; S7, projecting lyrics; S8, PC display. The present invention solves the problem of complex operation and untimely display of lyrics in a bar. The system integrates song search, lyrics editing, and lyrics animation editing, so that amateurs can also easily create lyrics.

Description

Technical Field

[0001] The present invention relates to the technical field of large-screen lyrics, and in particular to a method and system for editing and rendering lyrics on a large screen in a bar. Background Art

[0002] The bar large screen lyrics system is widely used in various bars, restaurants and other entertainment venues. In large bars, the system can provide customers with rich song resources and personalized song request methods; in small bars, the system can provide customers with professional sound processing and real-time lyrics display; in theme bars, the system can set corresponding song resources according to different themes to create a unique music atmosphere for customers.

[0003] The existing lyrics system for large-screen bars has the following problems: (1) The resource package is too large, resulting in untimely loading and display, which can easily lead to system memory overflow; (2) The text is implemented by overlaying layers to achieve multiple color gradients, which has a slow rendering speed and occupies a lot of cache; (3) The lyrics animation progress does not support custom control. Summary of the invention

[0004] The purpose of the present invention is to overcome the shortcomings of the prior art and provide a method and system for editing and rendering lyrics on a large screen in a bar, which is specifically achieved through the following technical solutions:

[0005] The present invention provides a method for editing and rendering lyrics on a large screen in a bar, comprising the following steps:

[0006] S1. Search the system for songs that need to be edited and rendered:

[0007] S2. Select the song that needs to be edited and rendered in the song list;

[0008] S3, select the basic lyrics setting template;

[0009] S4, configure lyrics animation;

[0010] S5. Configure the lyrics color, specifically: S501. Set a gradient background; S502. Crop the background to match the text; S503. Set the text color to transparent;

[0011] S6. Save lyrics settings;

[0012] S7, Lyrics projection;

[0013] S8, PC display.

[0014] Optionally or preferably, when setting a gradient background, the gradient background of the text is defined by using the background-image attribute in conjunction with a linear-gradient function or a radial-gradient function.

[0015] Optionally or preferably, when clipping, use the background-clip property with the text value to clip the gradient background to match the shape of the text.

[0016] Optionally or preferably, when setting the text to be transparent, the color of the text itself is made transparent by setting the color attribute to transparent.

[0017] Optionally or preferably, when setting text to be transparent, use -webkit-text-fill-color: transparent to make the color of the text itself transparent.

[0018] The present invention also provides a bar large screen lyrics editing and rendering system, based on the above lyrics editing and rendering method, including: a song basic setting module, a song list, a player, an animation editing module, and a lyrics editor;

[0019] The song basic setting module is used to set the lyrics gradient background and color;

[0020] The song list is used to display the lyrics; the player is used to project the rendered lyrics and animations;

[0021] The lyrics editor provides a text input box to support users to input or paste lyrics text, and provides a timeline editing function to allow users to set the playback time for each lyric and set the lyrics rendering effect;

[0022] The animation editing module controls the lyrics animation through Lottie.

[0023] Based on the above technical solution, the following technical effects can be produced:

[0024] The method and system for editing and rendering lyrics on a large screen in a bar provided by the present invention solve the problems of complex operation and untimely display of lyrics in a bar. The system integrates song search, lyrics editing, and lyrics animation editing, so that amateurs can also easily create lyrics. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the structures shown in these drawings without paying creative work.

[0026] Figure 1 It is a schematic diagram of the method flow of the present invention. DETAILED DESCRIPTION

[0027] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0028] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0029] Embodiment 1:

[0030] like Figure 1 As shown:

[0031] The present invention provides a method for editing and rendering lyrics on a large screen in a bar, comprising the following steps:

[0032] S1. Search the system for songs that need to be edited and rendered:

[0033] S2. Select the song that needs to be edited and rendered in the song list;

[0034] S3, select the basic lyrics setting template;

[0035] S4, configure lyrics animation;

[0036] S5. Configure the lyrics color, specifically: S501. Set a gradient background; S502. Crop the background to match the text; S503. Set the text color to transparent;

[0037] S6. Save lyrics settings;

[0038] S7, Lyrics projection;

[0039] S8, PC display.

[0040] In this embodiment, when setting a gradient background, the gradient background of the text is defined by using the background-image attribute in conjunction with the linear-gradient function or the radial-gradient function. Specifically, the linear-gradient function can set multiple color stop points along a straight line to create a smooth color transition effect; the radial-gradient function can create a gradient effect that spreads outward from a central point, which can simulate a circular or elliptical color transition.

[0041] In this embodiment, when clipping, the background-clip attribute is used in conjunction with the text value to clip the gradient background to match the shape of the text. In this way, only the text portion will display the gradient background, while other areas will not be displayed.

[0042] In this embodiment, when the text is set to be transparent, -webkit-text-fill-color: transparent is used to make the color of the text itself transparent. In this way, the user can only see the gradient background, thereby achieving the effect of text gradient.

[0043] Specifically, here is a simple CSS text gradient example code:

[0044]

[0045]

[0046] The present invention also includes a lyrics editing and rendering system for a large screen in a bar, which is based on the lyrics editing and rendering method and specifically includes: a song basic setting module, a song list, a player, an animation editing module, and a lyrics editor;

[0047] The song basic setting module is used to set the lyrics gradient background and color;

[0048] The song list is used to display the lyrics; the player is used to project the rendered lyrics and animations;

[0049] The lyrics editor provides a text input box to support users to input or paste lyrics text, and provides a timeline editing function to allow users to set the playback time for each lyric and set the lyrics rendering effect;

[0050] The animation editing module controls the lyrics animation through Lottie, which is a popular library for rendering Adobe After Effects animations on iOS, Android, Web, and ReactNative platforms. It allows developers to export complex animations in JSON format and easily use them in their applications. If you want to use Lottie to control the animation display of lyrics, you can programmatically control the playback, pause, stop, and progress of the animation to achieve controllability of the lyrics animation.

[0051] In this embodiment, when Lottie is used to control the lyrics animation, the following steps are included:

[0052] (1) Prepare the animation: You can first create the lyrics animation in Adobe After Effects and use the Bodymovin plug-in to export it as a JSON file, in which the appearance and disappearance of each lyric can be used as part of the animation;

[0053] (2) Introduce the Lottie library: Introduce the Lottie library into the project by adding scripts, etc.

[0054] (3) Use the API provided by Lottie to load the above JSON animation file and display it on the application interface. The sample code is as follows:

[0055] <scriptsrc="https: / / unpkg.com / lottie-web / build / lottie.min.js">

[0056] <div id＝"lottie">

[0057] <script>

[0058] var animData＝{

[0059] / / 这里放置JSON动画数据

[0060] / / 通过AJAX请求动态加载这个JSON

[0061] }；

[0062] var anim＝lottie.loadAnimation({

[0063] container:document.getElementById('lottie'),

[0064] renderer:'svg',

[0065] loop:false,

[0066] autoplay:false,

[0067] animationData:animData

[0068] })；

[0069] / / 控制动画播放

[0070] function playAnimation(){

[0071] anim.play()；

[0072] }

[0073] / / 控制动画暂停

[0074] function pauseAnimation(){

[0075] anim.pause()；

[0076] }

[0077] / / 停止动画并回到第一帧

[0078] function stopAnimation(){

[0079] anim.stop()；

[0080] }

[0081] / / 跳转到动画的特定帧

[0082] function goToFrame(frame){

[0083] anim.goToAndStop(frame,true)；

[0084] }

[0085] < / script> ;

[0086] (4) Controlling animation: By calling the API methods provided by Lottie, such as play(), pause(), stop(), goToAndStop(), etc., the animation playback can be controlled according to the playback progress of the lyrics;

[0087] (5) Synchronize lyrics and animation: Write some logic to synchronize the playback of lyrics and the display of animation as needed. For example, listen to the audio playback event through timeupdate() and update the animation progress or display the corresponding animation frame according to the current playback time.

[0088] This embodiment has the following advantages:

[0089] 1. A lyrics system that integrates lyrics editing, animation setting, and screen projection;

[0090] 2. Use local cache strategy to quickly achieve screen projection effect and reduce network requests;

[0091] 3. Use CSS color overlay to achieve cool effects such as text gradient;

[0092] 4. Use lottie to control the animation display, so that the lyrics animation can be controlled.

[0093] The above is only a preferred embodiment of the present invention. It should be understood that the present invention is not limited to the form disclosed herein, and should not be regarded as excluding other embodiments, but can be used in various other combinations, modifications and environments, and can be modified within the scope of the concept described herein through the above teachings or the technology or knowledge of the relevant field. The changes and modifications made by those skilled in the art shall not deviate from the spirit and scope of the present invention, and shall be within the scope of protection of the claims attached to the present invention.

Claims

1. A method for editing and rendering lyrics on a large screen in a bar, characterized in that: The following steps are involved: S1. Search the system for songs that need to be edited and rendered; S2. Select the song that needs to be edited and rendered in the song list; S3, select the basic lyrics setting template; S4, configure lyrics animation; S5. Configure the lyrics color, specifically: S501. Set a gradient background; S502. Crop the background to match the text; S503. Set the text color to transparent; S6. Save lyrics settings; S7, Lyrics projection; S8, PC display.

2. A method for editing and rendering lyrics on a large screen in a bar according to claim 1, characterized in that: When setting a gradient background, use the background-image property with the linear-gradient function or radial-gradient function to define the gradient background of the text.

3. According to claim 1, a method for editing and rendering lyrics on a large screen in a bar is characterized by: When clipping, use the background-clip property with the text value to clip the gradient background to match the shape of the text.

4. The method for editing and rendering lyrics on a large screen in a bar according to claim 1, characterized in that: When setting text to transparent, set the color property to transparent to make the color of the text itself transparent.

5. The method for editing and rendering lyrics on a large screen in a bar according to claim 1, characterized in that: When setting text to transparent, use -webkit-text-fill-color: transparent to make the color of the text itself transparent.

6. A lyrics editing and rendering system for a large screen in a bar, based on the above lyrics editing and rendering method, characterized in that: include: Song basic setting module, song list, player, animation editing module, lyrics editor; The song basic setting module is used to set the lyrics gradient background and color; The song list is used to display the lyrics; the player is used to project the rendered lyrics and animations; The lyrics editor provides a text input box to support users to input or paste lyrics text, and provides a timeline editing function to allow users to set the playback time for each lyric and set the lyrics rendering effect; The animation editing module controls the lyrics animation through Lottie.

Images