Interface display method and apparatus in music application, device, and storage medium

Abstract

An interface display method and apparatus in a music application, a device, and a storage medium, relating to the technical field of computers. The method comprises: displaying a song playback interface in portrait form, wherein the song playback interface in portrait form displays song playback information of a first song in portrait form (310); in response to a switching operation for the song playback interface, switching the song playback interface in portrait form to a song playback interface in landscape form (320); and in the song playback interface in landscape form, displaying song playback information of the first song in landscape form, wherein the song playback information comprises at least one of the following: a song cover image, basic song information, song functional controls, and a song background image (330). In the present application, by displaying song playback information in landscape form, the song playback information is no longer limited by the width of a screen, increasing the screen proportion of basic song information and enhancing the prominence of the basic song information.

Description

Interface display methods, devices, equipment, and storage media in music applications

[0001] This application claims priority to Chinese Patent Application No. 202411413527.7, filed on October 11, 2024, entitled "Method, Apparatus, Device and Storage Medium for Displaying Interface in Music Application", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of computer technology, and in particular to a method, apparatus, device and storage medium for displaying an interface in a music application. Background Technology

[0003] Music is everywhere in life, and it can change people's moods. Currently, people usually use music apps to play music.

[0004] In related technologies, when playing music using a music application installed on a terminal device, regardless of whether the terminal device is in portrait or landscape mode, the music application's display interface will show a portrait-oriented song playback interface, which will also display portrait-oriented song playback information.

[0005] However, the aforementioned vertical screen format for song playback is limited by the screen width of the terminal device, resulting in small font sizes for lyrics display, which cannot meet the needs of some scenarios that require large lyrics display. Summary of the Invention

[0006] This application provides a method, apparatus, device, and storage medium for displaying an interface in a music application. The technical solution provided by this application is as follows:

[0007] According to one aspect of the embodiments of this application, a method for displaying an interface in a music application is provided, the method being executed by a terminal device, the method comprising:

[0008] The interface displays a vertical screen for playing songs, and the vertical screen for playing songs displays the vertical screen information of the first song.

[0009] In response to the switching operation of the song playback interface, the vertical screen song playback interface is switched to the horizontal screen song playback interface;

[0010] In the landscape-style song playback interface, the landscape-style song playback information of the first song is displayed, and the song playback information includes at least one of the following: song cover image, song basic information, song function controls, and song background image.

[0011] According to one aspect of the embodiments of this application, a user interface display device for a music application is provided, the device comprising:

[0012] The playback display module is used to display a vertical screen song playback interface, wherein the vertical screen song playback interface displays the vertical screen song playback information of the first song;

[0013] The interface switching module is used to respond to the switching operation of the song playback interface and switch the vertical screen song playback interface to the horizontal screen song playback interface.

[0014] The information display module is used to display the song playback information of the first song in the landscape mode of the song playback interface. The song playback information includes at least one of the following: song cover image, basic song information, song function controls, and song background image.

[0015] According to one aspect of the embodiments of this application, a terminal device is provided, the terminal device including a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement the interface display method in the music application described above.

[0016] According to one aspect of the embodiments of this application, a computer-readable storage medium is provided, wherein a computer program is stored in the computer-readable storage medium, the computer program being loaded and executed by a processor to implement the interface display method in the music application described above.

[0017] According to one aspect of the embodiments of this application, a computer program product is provided, the computer program product including a computer program, the computer program being loaded and executed by a processor to implement the interface display method in the music application described above.

[0018] The technical solution provided in this application can bring the following beneficial effects:

[0019] This invention enables the switching of the song playback interface format in a music application on a terminal device. By switching the song playback interface from a portrait to a landscape format, the playback information of the song can be displayed in a landscape format. Compared with related technologies that can only display the song playback interface in a portrait format, the technical solution of this application makes the song playback information no longer limited by the screen width, increases the screen area of ​​the basic song information, and improves the display of the basic song information. Attached Figure Description

[0020] Figure 1 is a schematic diagram of the implementation environment of a solution provided in an embodiment of this application;

[0021] Figure 2 is a schematic diagram of the switching display of the song playback interface provided in an embodiment of this application;

[0022] Figure 3 is a flowchart of an interface display method in a music application according to an embodiment of this application;

[0023] Figure 4 is a schematic diagram of the song playback information style switching process provided in an embodiment of this application;

[0024] Figure 5 is a schematic diagram of the process of switching songs by selecting a song cover image according to an embodiment of this application;

[0025] Figure 6 is a schematic diagram of the operation effect of lyrics provided in an embodiment of this application;

[0026] Figure 7 is a schematic diagram of the arrangement position of song playback information in the song playback interface indicated by the first layout style provided in an embodiment of this application;

[0027] Figure 8 is a schematic diagram of a song spectrum animation provided in an embodiment of this application;

[0028] Figure 9 is a flowchart of a method for determining a first typesetting style according to an embodiment of this application;

[0029] Figure 10 is a schematic diagram of the arrangement position of song playback information in the song playback interface indicated by the second layout style provided in an embodiment of this application;

[0030] Figure 11 is a schematic diagram of the arrangement position of song playback information in the song playback interface indicated by the third layout style provided in an embodiment of this application;

[0031] Figure 12 is a block diagram of an interface display device in a music application provided in an embodiment of this application;

[0032] Figure 13 is a structural block diagram of a terminal device provided in an embodiment of this application. Detailed Implementation

[0033] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0034] Please refer to Figure 1, which illustrates a schematic diagram of an implementation environment provided in one embodiment of this application. This implementation environment can be implemented as an application system, such as a music application system. The implementation environment may include: a terminal device 10 and a server 20.

[0035] There may be one or more terminal devices 10. Terminal devices 10 may be electronic devices such as mobile phones, tablets, laptops, desktop computers, game consoles, e-book readers, multimedia playback devices, wearable devices, smart voice interaction devices, smart home appliances, vehicle terminals, aircraft, etc.

[0036] The terminal device 10 may have a music application client installed, which has the function of playing songs. Optionally, the music application may be an application that needs to be downloaded and installed, or it may be an application that can be used immediately upon clicking; this application does not limit this.

[0037] Server 20 provides background services for the client of the music application installed and running on terminal device 10. For example, server 20 can be the background server of the aforementioned music application. Server 20 can be a standalone physical server, a server cluster consisting of multiple servers, or a cloud computing service center. Optionally, server 20 can simultaneously provide background services for music applications on multiple terminal devices 10. Terminal devices 10 and server 20 can communicate with each other via a network.

[0038] In this embodiment of the application, the music application client initially displays a portrait-oriented song playback interface, which displays the portrait-oriented song playback information of the first song; in response to a switching operation on the song playback interface, the portrait-oriented song playback interface is switched to a landscape-oriented song playback interface, thereby displaying the landscape-oriented song playback information of the first song in the landscape-oriented song playback interface.

[0039] Figure 2 shows a schematic diagram of the switching display of the song playback interface. Figure (1) in Figure 2 shows the song playback interface in portrait mode, and the song playback information in the portrait mode is displayed in portrait mode. Figure (2) in Figure 2 shows the song playback interface in landscape mode, and the song playback information in the landscape mode is displayed in landscape mode. In response to the switching operation of the song playback interface, the song playback interface will switch from Figure (1) in Figure 2 to Figure (2) in Figure 2.

[0040] Please refer to Figure 3, which shows a flowchart of an interface display method in a music application according to an embodiment of this application. The execution entity of each step of this method can be a terminal device. The method may include at least one of the following steps 310 to 330:

[0041] Step 310: Display the vertical screen song playback interface, which displays the vertical screen song playback information of the first song.

[0042] In some embodiments, the execution subject of the technical solution provided in this application is a mobile phone, that is, the interface display method in the music application provided in the embodiments of this application is an interface display method applied to the music application of a mobile phone.

[0043] The song playback interface is the interface used to play songs in a music application. The vertical screen version of the song playback interface is the song playback interface displayed when the terminal device is in vertical screen mode, as shown in Figure 2(1). The terminal device being in vertical screen mode means that the terminal device is placed vertically.

[0044] The vertical screen music playback interface displays the playback information of the first song in vertical format. The first song can be any song, and the vertical screen music playback information is displayed based on the vertical screen music playback interface.

[0045] In some embodiments, the song playback information includes at least one of the following: song cover image, song basic information, song function controls, and song background image.

[0046] A song cover image is an image used to showcase the style and content of a song; typically, it refers to the album cover image. Basic song information includes the song title, artist name, and lyrics. The song background image is the background of the landscape-style playback interface, featuring the song cover image, basic song information, and song function controls.

[0047] The song function controls include at least one of the following: a song playback control, a song switching control, a song favorites control, and a style switching control. The song playback control controls the playback and pause of a song. For example, when a user clicks the song playback control, the music application plays a song; if the user clicks the song playback control again, the music application pauses playback of the song. The song switching control controls the switching of song playback. For example, if the music application is playing the first song, clicking the song playback control switches to playing the second song. The song favorites control adds a song to a playlist. For example, clicking the song favorites control adds the song to the default playlist. The style switching control switches the layout style of the song playback interface. For example, if the song playback interface displays the song playback information in the first layout style, and the user performs an operation on the style switching control, the song playback interface switches to displaying the song playback information in the second layout style.

[0048] Step 320: In response to the switching operation of the song playback interface, switch the vertical screen song playback interface to the horizontal screen song playback interface.

[0049] The operation of switching the song playback interface is performed by the user, and is used to switch the song playback interface from portrait mode to landscape mode.

[0050] In some embodiments, the switching operation is a rotation operation of the terminal device. The switching operation is used to control the deflection angle of the gyroscope of the terminal device to change, and the deflection angle includes rotation angles corresponding to three axes. If one of the rotation angles reaches a first threshold, step 320 is executed.

[0051] The terminal device is equipped with a gyroscope. When the user rotates the terminal device, the deflection angle of the gyroscope changes. The gyroscope's deflection angle includes rotation angles corresponding to three axes: the x-axis, y-axis, and z-axis. The x-axis rotation angle refers to the angle the terminal device rotates around the x-axis when the user rotates it; the y-axis rotation angle refers to the angle the terminal device rotates around the y-axis; and the z-axis rotation angle refers to the angle the terminal device rotates around the z-axis. Therefore, the deflection angle is represented as a sequence of rotation angles corresponding to the three axes. For example, if the initial deflection angle is (0,0,0), after the user performs the first operation, the deflection angle becomes (30,30,30).

[0052] When the user rotates the terminal device, the deflection angle of the gyroscope is obtained. If one of the rotation angles reaches a first threshold, step 320 is executed. The size of the first threshold is set by the technicians according to the requirements of the song playback interface, and this application does not limit it.

[0053] For example, if the first threshold is 90 degrees, then when the user rotates the terminal device, if one of the rotation angles of the gyroscope reaches 90 degrees, then step 320 is executed. For example, the first threshold can also be any angle such as 80 degrees, 100 degrees, 180 degrees, 170 degrees, 190 degrees, etc.

[0054] In some embodiments, step 320 is executed when the rotation angle corresponding to the x-axis in the deflection angle reaches a first threshold. Alternatively, step 320 is executed when the rotation angle corresponding to the y-axis in the deflection angle reaches the first threshold. Alternatively, step 320 is executed when the rotation angle corresponding to the z-axis in the deflection angle reaches the first threshold. Alternatively, step 320 is executed when one of the rotation angles corresponding to the x-axis and y-axis in the deflection angle reaches the first threshold. Alternatively, step 320 is executed when one of the rotation angles corresponding to the x-axis and z-axis in the deflection angle reaches the first threshold. Alternatively, step 320 is executed when one of the rotation angles corresponding to the y-axis and z-axis in the deflection angle reaches the first threshold.

[0055] By using the operation control of rotating the terminal device to switch the music playback interface from portrait to landscape mode, the difficulty of triggering the interface switching is reduced, making it simpler and more convenient for users to switch the music playback interface mode.

[0056] In some embodiments, the song playback interface also includes a format switching control, and the switching operation is an operation on the format switching control. In response to an operation on the format switching control, the portrait-oriented song playback interface is switched to a landscape-oriented song playback interface. For example, the operation on the format switching control is clicking the format switching control.

[0057] The landscape mode music playback interface is displayed when the terminal device is in landscape mode, as shown in Figure 2(2). Landscape mode refers to the terminal device being placed horizontally. The process of switching from the portrait mode music playback interface to the landscape mode music playback interface can be seen in Figure 2(1) to Figure 2(2), which is the process of switching from the vertical position of the terminal device to the horizontal position.

[0058] Step 330: Display the playback information of the first song in landscape mode on the landscape mode song playback interface.

[0059] The landscape-style song playback information is displayed based on the landscape-style song playback interface. Landscape-style playback information is used to highlight basic song information, while portrait-style playback information is used to highlight the song cover art, as shown in Figure 2. The basic song information occupies a larger portion of the screen in the landscape-style playback interface than in the portrait-style interface. Furthermore, the landscape-style basic song information is used to highlight lyrics, and the lyrics occupy a larger portion of the screen in the landscape-style playback interface than in the portrait-style interface.

[0060] In some embodiments, a landscape-style song playback interface is displayed, in which landscape-style song playback information of a first song is displayed; in response to a switching operation on the song playback interface, the landscape-style song playback interface is switched to a portrait-style song playback interface; in the portrait-style song playback interface, portrait-style song playback information of the first song is displayed.

[0061] The technical solution provided in this application embodiment realizes the switching of the song playback interface format of the music application in the terminal device. By switching the vertical screen song playback interface to a horizontal screen song playback interface, the horizontal screen song playback information can be displayed in the horizontal screen song playback interface. Compared with the related technology, which can only display the vertical screen song playback interface, the technical solution of this application, by displaying the horizontal screen song playback information, makes the song playback information no longer limited by the screen width, increases the screen area of ​​the basic song information, and improves the display of the basic song information. This meets the needs of users in certain scenarios where they need to display more basic song information, such as screen casting for karaoke, or placing the phone to view lyrics while running in the gym. Moreover, by displaying the horizontal screen song playback interface, the terminal device can also be used vertically on the desktop while charging, improving the ease of use of the music application.

[0062] In some embodiments, in a landscape-oriented song playback interface, the landscape-oriented song playback information of a first song is displayed in a first layout style, wherein the first layout style is a pre-configured layout style.

[0063] The layout style refers to the arrangement of song playback information within the song playback interface. It indicates the position and display style of the song playback information. The layout style includes the song cover image, basic song information, song function controls, and background image.

[0064] The layout style of the song cover image includes its position in the song playback interface, its display style, and its screen proportion. The layout style of the basic song information includes its position in the song playback interface, its display color, transparency, font, and animation effects. Specifically, the display color of the song title, artist name, and lyrics can be the same or different; the transparency of the song title, artist name, and lyrics can be the same or different; the font of the song title, artist name, and lyrics can be the same or different; and the animation effects of the song title, artist name, and lyrics can be the same or different, without limitation in this application. The layout style of the song function controls includes their position in the song playback interface, their display color, transparency, and screen proportion. The layout style of the song background image includes the display animations and colors of the song background image.

[0065] The layout style is pre-configured, and the first layout style can be any one of at least one pre-configured layout styles. Optionally, the first layout style can be a default layout style pre-configured in the music application. For example, if the default layout style pre-configured in the music application is layout style a among at least one layout style, then when the terminal device switches from a portrait-oriented music playback interface to a landscape-oriented music playback interface, the landscape-oriented music playback information of the first song will be displayed in layout style a. Optionally, the first layout style can also be a layout style pre-configured by the user from at least one layout style. For example, if the user pre-configures layout style b as the layout style for the music playback information from at least one layout style, then when the terminal device switches from a portrait-oriented music playback interface to a landscape-oriented music playback interface, the landscape-oriented music playback information of the first song will be displayed in layout style b.

[0066] This application provides three examples of the first typesetting style, which can be referred to in the following embodiments, but will not be described here.

[0067] By configuring the song playback information in landscape mode, the song playback information can be arranged more reasonably in the landscape mode song playback interface, which can better adapt to the usage status of most users and improve the user's comfort when using the music application.

[0068] In some embodiments, the song function control includes a style switching control. Step 330 is followed by step 340, which includes at least one of sub-steps 341-342 (not shown in the figure).

[0069] Sub-step 341, in response to an operation on the style switching control, displays at least one candidate layout style for the song playback information.

[0070] For example, an operation on the style switching control is a click operation on the style switching control. In response to the click operation on the style switching control, a landscape-oriented style selection interface is displayed. The landscape-oriented style selection interface is displayed based on the terminal device being in landscape mode, and is used to match the landscape-oriented song playback interface.

[0071] The style selection interface displays at least one candidate layout style with song playback information, and at least one candidate layout style is a pre-configured layout style.

[0072] Sub-step 342, in response to the operation of selecting a second layout style from at least one candidate layout style, displays the horizontal layout information of the first song in the horizontal layout of the song playback interface.

[0073] For example, selecting a second layout style from at least one candidate layout style involves clicking on the second layout style among at least one candidate layout styles. After selecting the second layout style, the user returns to the landscape-oriented song playback interface from the landscape-oriented style selection interface, and the landscape-oriented song playback information of the first song is displayed in the landscape-oriented song playback interface using the second layout style. The second layout style can be any layout style other than the first layout style among at least one candidate layout styles.

[0074] The process of switching song playback information styles can be seen in Figure 4. A style switching control 401 is displayed in the landscape-oriented song playback interface 410. When the user clicks the style switching control 401, they enter a landscape-oriented style selection interface 420. The landscape-oriented style selection interface 420 displays at least one candidate layout style for the song playback information, including layout style 402, layout style 403, layout style 404, etc. The user can swipe left and right in the landscape-oriented style selection interface 420 to view at least one candidate layout style. After the user selects layout style 404 from the candidate layout styles, they return from the landscape-oriented style selection interface 420 to the landscape-oriented song playback interface 430, where the song playback information is displayed in landscape format using layout style 404.

[0075] By providing a style switching control, users can change the layout style of the song playback information in landscape mode, enriching the display of the landscape song playback interface and increasing user engagement and interaction.

[0076] In some embodiments, step 330 is followed by step 350. Regarding the execution order of steps 340 and 350, step 350 may be executed before or after step 340; this application does not impose any limitation. Step 350 includes at least one of sub-steps 351 to 352 (not shown in the figures).

[0077] Sub-step 351, in response to the operation on the first cover image, displays a landscape-style song selection interface, the first cover image being the cover image of the first song, and the song selection interface displaying cover images of at least one candidate song.

[0078] For example, the operation on the first cover image is a click operation on the first cover image. In response to the click operation on the first cover image, a landscape-oriented song selection interface is displayed. The landscape-oriented song selection interface is displayed based on the terminal device being in landscape mode, and is used to match the landscape-oriented song playback interface.

[0079] The song selection interface displays the cover art of at least one candidate song. For example, the song selection interface displays the album cover art of at least one candidate song.

[0080] In sub-step 352, in response to the operation of selecting a second cover image from at least one candidate song cover image, the second song's landscape-style song playback information is displayed in the landscape-style song playback interface, wherein the second cover image is the cover image of the second song.

[0081] For example, selecting a second cover image from the cover images of at least one candidate song is done by clicking on the second cover image. After selecting the second cover image, the user returns to a landscape-style song playback interface, where the landscape-style playback information for the second song is displayed. The second song is any song other than the first song from the at least one candidate song.

[0082] The process of switching songs by selecting a song cover image can be seen in Figure 5. The landscape-oriented song playback interface 510 displays a first cover image 501. When the user clicks on the first cover image 501, they enter a landscape-oriented song selection interface 520. This interface displays cover images for at least one candidate song, including cover images 502, 503, 504, etc. The user can swipe left and right on the landscape-oriented song selection interface 520 to view the cover images of at least one candidate song. After the user selects cover image 502 from the candidate song cover images, they return to the landscape-oriented song playback interface 510, where the playback information for the song corresponding to cover image 502 is displayed.

[0083] Switching between songs by interacting with the first cover image provides a simple and convenient way to switch between songs, enriching the functionality of the song playback interface and helping to enhance the appeal and interest of music applications to users.

[0084] In some embodiments, in response to a swipe operation on the lyrics, the lyrics after the swipe operation are displayed. Optionally, the swipe operation on the lyrics can be a swipe operation on the lyrics display area or a swipe operation on a specific lyric. In response to a click operation on the lyrics, the playback progress of the first song jumps to the playback progress corresponding to that lyric.

[0085] Figure 6 shows a schematic diagram of the operation effect of lyrics. Figure 6(1) illustrates the operation effect of sliding the lyrics. In the landscape mode song playback interface 600, a lyrics display area 601 is displayed. When the user performs a sliding operation on the lyrics display area 601, the lyrics are displayed after the sliding operation. Figure 6(2) illustrates the operation effect of clicking the lyrics. In the landscape mode song playback interface 600, lyrics 602 are displayed. When the user performs a clicking operation on lyrics 602, the playback progress corresponding to lyrics 602 is displayed.

[0086] The three layout styles provided in this application are described below.

[0087] The first layout style: The first layout style is determined based on the audio data and cover image of the first song. The audio data of the first song is used to determine the spectral power of the song in the background image, and the cover image is used to determine the display color of the background image, the basic information of the song, and the display color of the functional controls of the song.

[0088] The first layout style includes: the song cover image is located on the left side of the landscape-style song playback interface; the song title and artist name are located in the top right area of ​​the landscape-style song playback interface; the lyrics are located in the middle right area of ​​the landscape-style song playback interface; the song function controls are located in the bottom right area of ​​the landscape-style song playback interface; and the song background image serves as the background of the landscape-style song playback interface.

[0089] This application does not limit the division ratio of the left and right regions, or the division ratio of the top, middle, and bottom regions mentioned above. For example, the division ratio of the left and right regions is 1:1, and the division ratio of the top, middle, and bottom regions is 1:1:1.

[0090] The arrangement of the song playback information indicated by the first layout style in the song playback interface can be referred to as Figure 7. In the landscape-style song playback interface 700, the landscape-style cover image of the first song, basic song information, song function controls, and song background image are displayed. The cover image 701 is located on the left side of the landscape-style song playback interface 700, the song title and artist name 702 are located in the top right area of ​​the landscape-style song playback interface 700, the lyrics 703 are located in the middle right area of ​​the landscape-style song playback interface 700, the song function controls 704 are located in the bottom right area of ​​the landscape-style song playback interface 700, and the song background image 705 serves as the background of the landscape-style song playback interface 700.

[0091] By arranging the song playback information in the above manner, the layout of each song's playback information is more reasonable, increasing the screen area occupied by the basic song information. This frees the basic song information from being limited by the screen width, meeting the needs of users in certain scenarios where large lyrics are required, and improving user satisfaction.

[0092] In some embodiments, a song spectrum animation is displayed in the background image of the song, which is used to graphically represent the musical rhythm of the first song.

[0093] The schematic diagram of the song spectrum animation effect can be seen in Figure 8. In the song background image 800, the song spectrum animation effect 801 is displayed. The song spectrum animation effect 801 is used to graphically display the musical rhythm of the first song. From the song spectrum animation effect 801 shown in Figure 8, it can be seen which parts of the first song have a stronger musical rhythm and which parts have a more relaxed musical rhythm.

[0094] By displaying the song's spectrum animation in the background image, the animation in the background image can be matched with the rhythm of the song during playback, allowing users to feel the visual effect of the song's rhythm, enhancing their experience and participation in the song's rhythm, and helping to attract users to listen to the song.

[0095] In some embodiments, a time indicator is displayed on the playback progress bar of the first song. This time indicator shows the current playback progress of the first song and moves along the progress bar as the song progresses. The time indicator can also dynamically display the musical rhythm of the first song. For example, the time indicator can emit dynamic light effects, the rhythm of which matches the musical rhythm of the first song.

[0096] In some embodiments, a fast Fourier transform is performed on the audio data of the first song to obtain the frequency domain data of the audio data; frequency band data in the first frequency band is obtained from the frequency domain data; the frequency band data in the first frequency band is filtered and smoothed to obtain the processed frequency band data; the processed frequency band data is rendered to obtain the song's spectrum animation effect.

[0097] This application does not limit the value of the first frequency band. For example, if the first frequency band is a frequency band that the human ear is sensitive to, then the first frequency band is 1000Hz-3000Hz.

[0098] For example, OpenGL (Open Graphics Library) can be used to render the processed frequency band data to obtain the song's spectrum animation. This song's spectrum animation will change with the rhythm of the music.

[0099] By selecting frequency data from the first frequency band for rendering, the final displayed song spectrum animation can better showcase the changes in musical rhythm, avoiding the selection of frequency data outside the first frequency band, which would result in the song spectrum animation being too gentle or too intense, thus achieving a better visual effect of the song's musical rhythm.

[0100] Please refer to Figure 9, which shows a flowchart of a method for determining a first typesetting style according to an embodiment of this application. The execution entity for each step of this method can be a terminal device or a server. The method includes at least one of the following steps S1 to S5.

[0101] Step S1: Obtain the color attributes of each pixel in the song cover image. The color attributes include at least one of the following: chroma, saturation, and brightness.

[0102] Chroma is used to indicate the color of a pixel, saturation is used to indicate the lightness or darkness of a pixel color, and luminance is used to indicate the brightness or darkness of a pixel color.

[0103] Step S2: Determine the first pixel in each pixel according to the color attribute of each pixel. The first pixel is the color with a significant display effect in the song cover image.

[0104] The first pixel is the pixel that best represents the song cover image, or the pixel with the highest brightness that is most eye-catching.

[0105] In some embodiments, the pixel with the highest brightness among all pixels can be directly determined as the first pixel, or the pixel with the largest number of identical color attributes among all pixels can be directly determined as the first pixel. For example, if a song cover image contains 100 pixels, and among these pixels there are 20 pixels with the same chroma as pixel a, 20 pixels with the same saturation as pixel a, and 20 pixels with the same brightness as pixel a, and the number of pixels with identical color attributes corresponding to pixel a is 60, and 60 is the maximum number of pixels with identical color attributes among all pixels, then pixel a is determined as the first pixel.

[0106] In some embodiments, the first pixel is not a pixel among all pixels, but a pixel determined by the color attributes of each pixel. Optionally, the chroma of the first pixel is the chroma with the highest number of equal values ​​among all pixels, the saturation of the first pixel is the saturation with the highest number of equal values ​​among all pixels, and the brightness of the first pixel is the brightness with the highest number of equal values ​​among all pixels. Optionally, the chroma of the first pixel is the average chroma of all pixels, the saturation of the first pixel is the average saturation of all pixels, and the brightness of the first pixel is the average brightness of all pixels.

[0107] In some embodiments, the first pixel is one of the pixels, then step S2 includes at least one of the sub-steps S21 to S23.

[0108] Sub-step S21: Based on the chroma and saturation of each pixel, divide each pixel into the corresponding chroma interval and saturation interval respectively, to obtain at least one chroma interval and at least one saturation interval, wherein the interval length of the at least one chroma interval is the same, and the interval length of the at least one saturation interval is the same.

[0109] At least one chroma range and at least one saturation range are pre-defined. The lengths of both the chroma and saturation ranges are the same. This application does not limit the lengths of the chroma and saturation ranges. For example, if the chroma value range is 0 to 255, the length of the chroma range can be set to 5, resulting in chroma ranges of 0-5, 5-10, ..., 250-255. Similarly, if the saturation value range is 0 to 255, the length of the saturation range can be set to 5, resulting in saturation ranges of 0-5, 5-10, ..., 250-255.

[0110] Based on the chroma and saturation of each pixel, each pixel is divided into its corresponding chroma and saturation intervals. For example, if pixel a has a chroma of 12 and a saturation of 22, and both the chroma and saturation intervals have a length of 5, then pixel a is divided into a chroma interval of 10-15 and a saturation interval of 20-25. Based on the chroma and saturation intervals corresponding to each pixel, at least one chroma interval and at least one saturation interval containing the pixel are obtained.

[0111] Sub-step S22: Obtain at least one pixel that is in the chroma range with the largest number of pixels and the saturation range with the largest number of pixels.

[0112] Obtain the number of pixels contained in at least one chroma interval and the number of pixels contained in at least one saturation interval, and obtain the chroma interval and the saturation interval with the largest number of pixels. Based on the chroma interval and the saturation interval with the largest number of pixels, obtain at least one pixel that is in both the chroma interval and the saturation interval with the largest number of pixels.

[0113] In some embodiments, each pixel is divided into a corresponding chroma interval, saturation interval, and luminance interval based on its chroma, saturation, and luminance, resulting in at least one chroma interval, at least one saturation interval, and at least one luminance interval. The at least one chroma interval has the same length, the at least one saturation interval has the same length, and the at least one luminance interval has the same length. At least one pixel is selected that is located in the chroma interval with the most pixels, the saturation interval with the most pixels, and the luminance interval with the most pixels.

[0114] Sub-step S23: Determine the first pixel based on at least one pixel.

[0115] The first pixel is determined from the at least one pixel.

[0116] By dividing each pixel into its corresponding chroma and saturation ranges, the first pixel is selected based on the chroma and saturation ranges with the most pixels. This provides more possibilities for pixel selection and avoids situations where some pixels belong to colors with significant display effects in the song cover image but do not meet the selection criteria for the first pixel. This enriches the way the first pixel is determined, ensuring that the first pixel belongs to the pixels with the most frequent chroma and saturation in the song cover image, which conforms to the user's viewing habits.

[0117] In some embodiments, the pixel with the highest brightness among at least one pixels is determined as the first pixel. Therefore, the first pixel belongs to the pixel with the highest brightness among at least one pixel in the song cover image that appears frequently in terms of chroma and saturation.

[0118] In some embodiments, the pixel with the highest number of identical color attributes among at least one pixel is determined as the first pixel. For example, if the number of at least one pixel is 10, and at least one pixel has 2 pixels with the same chroma as pixel a, 2 pixels with the same saturation as pixel a, and 2 pixels with the same brightness as pixel a, and the number of identical color attributes corresponding to pixel a is 6, and 6 is the maximum number of identical color attributes among at least one pixel, then pixel a is determined as the first pixel.

[0119] By selecting the highlight color or the most prominent color from at least one pixel using the above method, the first pixel can more accurately represent the color of the song cover image, which is consistent with the musical meaning of the song and enhances the atmosphere of the song playback interface.

[0120] In some embodiments, the first pixel is not a pixel among at least one pixels, but a pixel determined by the color attributes of at least one pixel. Optionally, the chroma of the first pixel is the chroma with the highest number of equal values ​​among at least one pixels, the saturation of the first pixel is the saturation with the highest number of equal values ​​among at least one pixels, and the luminance of the first pixel is the luminance with the highest number of equal values ​​among at least one pixels. Optionally, the chroma of the first pixel is the average chroma of at least one pixel, the saturation of the first pixel is the average saturation of at least one pixel, and the luminance of the first pixel is the average luminance of at least one pixel.

[0121] Step S3: Determine the first display color and the second display color based on the color attribute of the first pixel. The first display color is the display color of the basic information of the song and the function control of the song, and the second display color is the display color of the background image of the song.

[0122] In step S3, the display color of the basic song information and the display color of the song function control are the same. In other embodiments, the display color of the basic song information and the display color of the song function control may be different. Then, based on the color attribute of the first pixel, the display color of the basic song information, the display color of the song function control, and the display color of the song background image are determined respectively.

[0123] In some embodiments, step S3 includes at least one of sub-steps S31 to S34.

[0124] Sub-step S31: Determine the chromaticity of the first pixel as the chromaticity of the first display color and the chromaticity of the second display color.

[0125] Sub-step S32: Determine the preset first brightness as the brightness of the first display color, and determine the preset second brightness as the brightness of the second display color.

[0126] The brightness of the first and second display colors is not determined based on the color attributes of the first pixel, but is a preset brightness. This is used to ensure that the first and second display colors conform to the user's eye habits when displayed, avoiding excessive brightness that causes glare or insufficient brightness that makes it difficult to see the displayed content, thus improving eye protection performance.

[0127] The first brightness can be the same as or different from the second brightness. The specific brightness values ​​of the first and second brightness are set by a technician according to the sensitivity of the human eye to brightness, and this application does not impose any limitations. For example, the first brightness can be set to 100, and the second brightness can be set to 16.

[0128] Sub-step S33: Determine the saturation of the first display color and the saturation of the second display color based on the saturation of the first pixel.

[0129] In some embodiments, when the saturation of the first pixel is within a first saturation range, the saturation of the first pixel is determined as the saturation of the first display color; when the saturation of the first pixel is less than the lower limit of the first saturation range, the lower limit of the first saturation range is determined as the saturation of the first display color; when the saturation of the first pixel is greater than the upper limit of the first saturation range, the upper limit of the first saturation range is determined as the saturation of the first display color.

[0130] The setting of the first saturation range is to be determined by technicians based on the color sensitivity of the human eye, and this application does not impose any restrictions.

[0131] For example, if the first saturation range is 40 to 85, then when the saturation of the first pixel is within the first saturation range, the saturation of the first pixel is determined as the saturation of the first display color. When the saturation of the first pixel is less than 40, 40 is determined as the saturation of the first display color; when the saturation of the first pixel is greater than 85, 85 is determined as the saturation of the first display color. For instance, if the saturation of the first pixel is 60, then the saturation of the first display color is 60; if the saturation of the first pixel is 30, then the saturation of the first display color is 40; and if the saturation of the first pixel is 90, then the saturation of the first display color is 85.

[0132] In some embodiments, when the saturation of the first pixel is within the second saturation range, the saturation of the first pixel is determined as the saturation of the second display color; when the saturation of the first pixel is less than the lower limit of the second saturation range, the lower limit of the second saturation range is determined as the saturation of the second display color; when the saturation of the first pixel is greater than the upper limit of the second saturation range, the upper limit of the second saturation range is determined as the saturation of the second display color.

[0133] The setting of the second saturation range is to be determined by technicians based on the color sensitivity of the human eye, and this application does not impose any restrictions.

[0134] For example, if the second saturation range is 40 to 100, then when the saturation of the first pixel falls within the second saturation range, the saturation of the first pixel is determined as the saturation of the second display color. If the saturation of the first pixel is less than 40, 40 is determined as the saturation of the second display color; if the saturation of the first pixel is greater than 100, 100 is determined as the saturation of the second display color. For instance, if the saturation of the first pixel is 60, then the saturation of the second display color is 60; if the saturation of the first pixel is 30, then the saturation of the first display color is 40; and if the saturation of the first pixel is 120, then the saturation of the first display color is 100.

[0135] By setting a saturation range, the saturation of the first and second display colors is determined, ensuring that the lightness or darkness of the first and second display colors matches the user's visual habits. This avoids colors that are too bright due to excessive saturation or too dull due to excessive saturation, thus improving the harmony of color display.

[0136] In some embodiments, if the chroma of the first pixel is within a first chroma range, and the saturation of the first pixel is within a third saturation range, then the saturation of the first pixel is determined as the saturation of the first display color; if the saturation of the first pixel is less than the lower limit of the third saturation range, then the lower limit of the third saturation range is determined as the saturation of the first display color; if the saturation of the first pixel is greater than the upper limit of the third saturation range, then the upper limit of the third saturation range is determined as the saturation of the first display color.

[0137] The settings for the first chromaticity range and the third saturation range are to be set by technicians according to the color sensitivity of the human eye, and this application does not impose any restrictions.

[0138] For example, if the first chromaticity range is 0 to 5 and the third saturation range is 40 to 70, then if the chromaticity of the first pixel is within the first chromaticity range, and the saturation of the first pixel is within the third saturation range, then the saturation of the first pixel is determined as the saturation of the first display color; if the saturation of the first pixel is less than 40, then 40 is determined as the saturation of the first display color; if the saturation of the first pixel is greater than 70, then 70 is determined as the saturation of the first display color. For example, if the chromaticity of the first pixel is 2, and the saturation of the first pixel is 60, then the saturation of the first display color is 60; if the saturation of the first pixel is 30, then the saturation of the first display color is 40; and if the saturation of the first pixel is 90, then the saturation of the first display color is 70.

[0139] If the chromaticity of the first pixel is outside the first chromaticity range, the first display color is determined based on the first saturation range.

[0140] In some embodiments, if the chromaticity of the first pixel is within the second chromaticity range, and the saturation of the first pixel is within the fourth saturation range, then the saturation of the first pixel is determined as the saturation of the second display color; if the saturation of the first pixel is less than the lower limit of the fourth saturation range, then the lower limit of the fourth saturation range is determined as the saturation of the second display color; if the saturation of the first pixel is greater than the upper limit of the fourth saturation range, then the upper limit of the fourth saturation range is determined as the saturation of the second display color.

[0141] The settings for the second chromaticity range and the fourth saturation range shall be determined by the technicians themselves based on the color sensitivity of the human eye, and this application does not impose any restrictions.

[0142] For example, if the second chromaticity range is 215 to 250 and the fourth saturation range is 40 to 80, then if the chromaticity of the first pixel is within the first chromaticity range, and the saturation of the first pixel is within the fourth saturation range, then the saturation of the first pixel is determined as the saturation of the second display color; if the saturation of the first pixel is less than 40, then 40 is determined as the saturation of the second display color; if the saturation of the first pixel is greater than 80, then 80 is determined as the saturation of the second display color. For example, if the chromaticity of the first pixel is 220, and the saturation of the first pixel is 60, then the saturation of the second display color is 60; if the saturation of the first pixel is 30, then the saturation of the second display color is 40; and if the saturation of the first pixel is 90, then the saturation of the second display color is 80.

[0143] If the chromaticity of the first pixel is outside the second chromaticity range, the second display color is determined based on the second saturation range.

[0144] By determining whether the chromaticity of the first pixel falls within the first chromaticity range or the second chromaticity range, the saturation of the first and second display colors is further determined. This ensures that the saturation of the first and second display colors is coordinated with their chromaticity, improving the harmony of color settings and satisfying users' visual habits regarding colors.

[0145] Sub-step S34: Obtain the first display color based on the saturation, chroma, and brightness of the first display color; and obtain the second display color based on the saturation, chroma, and brightness of the second display color.

[0146] By determining the first display color and the second display color through the above steps, the various color attributes of the first display color and the second display color are coordinated with each other to meet the user's visual habits regarding color.

[0147] Step S4: Display the basic song information and the song function controls according to the pre-set transparency of the basic song information and the corresponding transparency of the song function controls, as well as the first display color.

[0148] Based on the preset transparency and first display color of the song's basic information, the song's basic information is displayed; and based on the preset transparency and first display color of the song's function controls, the song's function controls are displayed.

[0149] The transparency of the basic song information and the transparency of the song function controls can be the same or different. The transparency of the basic song information and the song function controls should be set by the technicians according to the color sensitivity of the human eye. This application does not impose any restrictions.

[0150] Step S5: Obtain the song background image based on the second display color and the song spectrum animation in the song background image.

[0151] Based on the second display color, the background color of the song background image is obtained, and the song spectrum animation is displayed on the song background image of the second display color to obtain the song background image.

[0152] In some embodiments, the display color of the song spectrum animation can be set to a different display color than the second display color. Then, the song spectrum animation in the song background image is rendered with the display color of the song spectrum animation, and combined with the song background image of the second display color to obtain the final displayed song background image. For example, the display color of the song spectrum animation can be the first display color. Then, the song spectrum animation in the song background image is rendered with the first display color, and combined with the song background image of the second display color to obtain the final displayed song background image.

[0153] By obtaining the basic information, functional controls, and background image of the song through the above steps, the color display of the song playback interface can be matched with the color of the song cover image, enhancing the user's immersion when listening to music, thereby improving the effectiveness and conversion efficiency of song playback.

[0154] The second layout style: The first layout style is a pre-configured layout style based on the song style, which is determined based on the song's basic information.

[0155] In some embodiments, the first layout style also includes pre-configured display colors for basic song information and song function controls, display fonts for basic song information, display animations for lyrics, and display animations included in the song background image.

[0156] In the first layout style, the song playback information layout is a pre-set layout style by technical personnel. The display colors of the song's basic information and song function controls are colors that match the song's style; the display font of the song's basic information is a font that matches the song's style; the display animation of the lyrics is an animation that matches the song's style; and the display animation included in the song's background image is an animation that matches the song's style. The display color can be any color from the color library, the display font can be any font from the font library, and the display animation of the lyrics includes at least one of the following: a display animation of each word appearing, a display animation of each sentence appearing, a display animation of lyrics blinking, and a display animation of lyrics moving. The display animation included in the song's background image includes at least one of the following: a display animation of background flowing, a display animation of background playing video clips, and a display animation of background image changing.

[0157] For example, if the first song has a relaxed and natural style, the display color of the song's basic information and the song's function controls can be set to white, the display font of the song's basic information can be set to SimSun, the display animation of the lyrics can be set to a word-by-word display animation, and the display animation contained in the song's background image can be set to a background flow display animation.

[0158] In the second layout style, the first layout style includes: the song cover image, song title, and artist name are located in the bottom left area of ​​the landscape-style song playback interface; the lyrics are located in the middle area of ​​the landscape-style song playback interface; the song function controls are located in the bottom right area of ​​the landscape-style song playback interface; and the song background image serves as the background of the landscape-style song playback interface.

[0159] This application does not limit the division ratio of the left and right regions, or the division ratio of the middle and bottom regions mentioned above. For example, the division ratio of the left and right regions is 1:1, and the division ratio of the middle and bottom regions is 3:1.

[0160] The arrangement of the song playback information indicated by the second layout style in the song playback interface can be seen in Figure 10. In the landscape-style song playback interface 1000, the landscape-style cover image of the first song, basic song information, song function controls, and song background image are displayed. The cover image 1002, song title, and artist name 1003 are located in the bottom left area of ​​the landscape-style song playback interface 1000, the lyrics 1001 are located in the middle area of ​​the landscape-style song playback interface 1000, the song function controls 1004 are located in the bottom right area of ​​the landscape-style song playback interface 1000, and the song background image 1005 serves as the background of the landscape-style song playback interface 1000. Figure 10 shows a schematic diagram of three display animation effects. The display animation effect of lyrics 1001 in Figure (1) is different from the display animation effect of lyrics 1006 in Figure (2) and the display animation effect of lyrics 1008 in Figure (3). The display animation effect contained in the song background image 1005 in Figure (1) is different from the display animation effect contained in the song background image 1007 in Figure (2) and the display animation effect contained in the song background image 1009 in Figure (3).

[0161] By setting the layout of song playback information according to the song's style, the playback information becomes more coordinated with the song, which can enhance the user's immersion when listening to music.

[0162] The third type of layout style: The first type of layout style is a pre-configured layout style based on the style of the song background image. The first type of layout style includes the pre-configured display colors of the basic song information and the song function controls, the display font of the basic song information, and the display style of the song cover image. The display style of the song cover image includes a record-style display style.

[0163] In the first layout style, the song playback information is pre-set by technical personnel. The display colors of the song's basic information and function controls are colors that match the style of the song's background image; the font used to display the song's basic information is a font that matches the style of the song's background image; and the display style of the song cover image is a style that matches the style of the song's background image. The display colors can be any color from a color library, the display font can be any font from a font library, and the display style of the song cover image can be any form of display style, including, for example, a record-style display style.

[0164] For example, if the first song has a light and natural style, the display color of the song's basic information and the song's function controls can be set to white, the display font of the song's basic information can be set to SimSun, and the display style of the song cover image can be set to a record-style display style.

[0165] In the third layout style, the first layout style includes: the song cover image is located on the left side of the landscape-style song playback interface; the song title and artist name are located in the top right area of ​​the landscape-style song playback interface; the lyrics are located in the middle right area of ​​the landscape-style song playback interface; the song function controls are located in the bottom right area of ​​the landscape-style song playback interface; and the song background image serves as the background of the landscape-style song playback interface.

[0166] The arrangement of the song playback information in the song playback interface indicated by the third layout style can be seen in Figure 11. In the landscape-style song playback interface 1100, the landscape-style cover image of the first song, the basic information of the song, the song function controls, and the song background image are displayed. The arrangement of the song playback information in the song playback interface is the same as that in the first layout style. Figure 11 shows a schematic diagram of the display styles of the two song cover images. The display style 1101 of the song cover image in Figure 11(1) is different from the display style 1102 of the song cover image in Figure 11(2).

[0167] By setting the layout style of the song playback information according to the style of the song's background image, the song playback information and the song's background image can be more coordinated, which can improve the user's sense of immersion when listening to music.

[0168] The following are embodiments of the apparatus described in this application, which can be used to execute the embodiments of the method described in this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the method described in this application.

[0169] Please refer to Figure 12, which shows a block diagram of an interface display device in a music application according to an embodiment of this application. This device has the function of implementing the interface display method in the aforementioned music application. This function can be implemented by hardware or by hardware executing corresponding software. The device can be the terminal device described above, or it can be installed within a terminal device. As shown in Figure 12, the device 1200 may include: a playback display module 1210, an interface switching module 1220, and an information display module 1230.

[0170] The playback display module 1210 is used to display a vertical screen song playback interface, in which the vertical screen song playback interface displays the vertical screen song playback information of the first song.

[0171] The interface switching module 1220 is used to switch the vertical screen song playback interface to a horizontal screen song playback interface in response to the switching operation of the song playback interface.

[0172] The information display module 1230 is used to display the horizontal playback information of the first song in the horizontal playback interface. The song playback information includes at least one of the following: song cover image, basic song information, song function controls, and song background image.

[0173] In some embodiments, the information display module 1230 is configured to:

[0174] In the landscape-style song playback interface, the playback information of the first song is displayed in a first layout style, wherein the first layout style is a pre-configured layout style.

[0175] In some embodiments, the basic song information includes: song title, artist name, and lyrics; the first layout style includes: the song cover image is located on the left side of the landscape-style song playback interface; the song title and artist name are located in the top right area of ​​the landscape-style song playback interface; the lyrics are located in the middle right area of ​​the landscape-style song playback interface; the song function controls are located in the bottom right area of ​​the landscape-style song playback interface; and the song background image serves as the background of the landscape-style song playback interface.

[0176] In some embodiments, the song function control includes a style switching control; the device 1200 further includes a style switching module, the style switching module being used for:

[0177] In response to an operation on the style switching control, at least one candidate layout style for the song playback information is displayed;

[0178] In response to the operation of selecting a second layout style from the at least one candidate layout styles, the landscape layout of the first song's playback information is displayed in the landscape layout of the song playback interface using the second layout style.

[0179] In some embodiments, the basic song information includes: song title, artist name, and lyrics; the first layout style is a pre-configured layout style based on the song style, the song style is determined based on the basic song information, and the first layout style includes the pre-configured basic song information and the display colors of the song function controls, the display font of the basic song information, the display animation of the lyrics, and the display animation contained in the song background image;

[0180] The first layout style includes: the song cover image, the song title, and the artist name are located in the bottom left area of ​​the landscape-style song playback interface; the lyrics are located in the middle area of ​​the landscape-style song playback interface; the song function controls are located in the bottom right area of ​​the landscape-style song playback interface; and the song background image serves as the background of the landscape-style song playback interface.

[0181] In some embodiments, the basic song information includes: song title, artist name, and lyrics; the first layout style is a layout style pre-configured based on the style of the song background image, the first layout style includes the pre-configured display colors of the basic song information and the song function controls, the display font of the basic song information, and the display style of the song cover image, the display style of the song cover image includes a record-style display style;

[0182] The first layout style includes: the song cover image is located on the left side of the landscape-style song playback interface; the song title and the artist name are located in the top right area of ​​the landscape-style song playback interface; the lyrics are located in the middle right area of ​​the landscape-style song playback interface; the song function controls are located in the bottom right area of ​​the landscape-style song playback interface; and the song background image serves as the background of the landscape-style song playback interface.

[0183] In some embodiments, the device 1200 further includes a song selection module, the song selection module being configured to:

[0184] In response to an operation on the first cover image, a landscape-oriented song selection interface is displayed, wherein the first cover image is the cover image of the first song, and the song selection interface displays cover images of at least one candidate song.

[0185] In response to the operation of selecting a second cover image from the cover images of the at least one candidate song, the landscape-style song playback interface displays the landscape-style song playback information of the second song, wherein the second cover image is the cover image of the second song.

[0186] In some embodiments, the background image of the song displays a song spectrum animation, which is used to graphically represent the musical rhythm of the first song.

[0187] In some embodiments, the apparatus further includes a style generation module, the style generation module being configured to:

[0188] Perform a Fast Fourier Transform on the audio data of the first song to obtain the frequency domain data of the audio data;

[0189] Obtain the frequency band data in the first frequency band from the frequency domain data;

[0190] The frequency band data of the first frequency band is filtered and smoothed to obtain the processed frequency band data;

[0191] The processed frequency band data is rendered to obtain the song's spectral dynamics.

[0192] In some embodiments, the style generation module is configured to:

[0193] Obtain the color attributes of each pixel in the song cover image, wherein the color attributes include at least one of the following: chroma, saturation, and brightness;

[0194] Based on the color attributes of each pixel, a first pixel is determined among the pixels, where the first pixel is a color with a significant display effect in the song cover image;

[0195] Based on the color attribute of the first pixel, a first display color and a second display color are determined. The first display color is the display color of the basic information of the song and the function control of the song, and the second display color is the display color of the background image of the song.

[0196] Based on the pre-set basic song information and the transparency of each of the song function controls, as well as the first display color, the basic song information and the song function controls are displayed respectively.

[0197] The song background image is obtained based on the second display color and the song spectrum animation in the song background image.

[0198] In some embodiments, the style generation module is configured to:

[0199] Based on the chroma and saturation of each pixel, each pixel is divided into a corresponding chroma interval and saturation interval to obtain at least one chroma interval and at least one saturation interval. The interval lengths of the at least one chroma interval and the at least one saturation interval are the same.

[0200] Get at least one pixel that is in the color range with the most pixels and the saturation range with the most pixels.

[0201] The first pixel is determined based on the at least one pixel.

[0202] In some embodiments, the style generation module is configured to:

[0203] The pixel with the highest brightness among the at least one pixels is determined as the first pixel;

[0204] or,

[0205] The pixel with the most identical color attributes among the at least one pixel is determined as the first pixel.

[0206] In some embodiments, the style generation module is configured to:

[0207] The chromaticity of the first pixel is determined as the chromaticity of the first display color and the chromaticity of the second display color;

[0208] A preset first brightness is determined as the brightness of the first display color, and a preset second brightness is determined as the brightness of the second display color;

[0209] Based on the saturation of the first pixel, determine the saturation of the first display color and the saturation of the second display color;

[0210] The first display color is obtained based on the saturation, chroma, and brightness of the first display color; and the second display color is obtained based on the saturation, chroma, and brightness of the second display color.

[0211] In some embodiments, the style generation module is configured to:

[0212] When the saturation of the first pixel is within the first saturation range, the saturation of the first pixel is determined as the saturation of the first display color; when the saturation of the first pixel is less than the lower limit of the first saturation range, the lower limit of the first saturation range is determined as the saturation of the first display color; when the saturation of the first pixel is greater than the upper limit of the first saturation range, the upper limit of the first saturation range is determined as the saturation of the first display color.

[0213] When the saturation of the first pixel is within the second saturation range, the saturation of the first pixel is determined as the saturation of the second display color; when the saturation of the first pixel is less than the lower limit of the second saturation range, the lower limit of the second saturation range is determined as the saturation of the second display color; when the saturation of the first pixel is greater than the upper limit of the second saturation range, the upper limit of the second saturation range is determined as the saturation of the second display color.

[0214] In some embodiments, the style generation module is configured to:

[0215] If the chroma of the first pixel is within the first chroma range, and the saturation of the first pixel is within the third saturation range, then the saturation of the first pixel is determined as the saturation of the first display color; if the saturation of the first pixel is less than the lower limit of the third saturation range, then the lower limit of the third saturation range is determined as the saturation of the first display color; if the saturation of the first pixel is greater than the upper limit of the third saturation range, then the upper limit of the third saturation range is determined as the saturation of the first display color.

[0216] If the chroma of the first pixel is within the second chroma range, and the saturation of the first pixel is within the fourth saturation range, then the saturation of the first pixel is determined as the saturation of the second display color; if the saturation of the first pixel is less than the lower limit of the fourth saturation range, then the lower limit of the fourth saturation range is determined as the saturation of the second display color; if the saturation of the first pixel is greater than the upper limit of the fourth saturation range, then the upper limit of the fourth saturation range is determined as the saturation of the second display color.

[0217] In some embodiments, the switching operation is an operation of rotating the terminal device, the switching operation being used to control the deflection angle of the gyroscope of the terminal device to change, the deflection angle including rotation angles corresponding to three axes; the interface switching module 1220 is used for:

[0218] If one of the rotation angles in the deflection angle reaches a first threshold, the step of switching the portrait-style song playback interface to a landscape-style song playback interface is executed.

[0219] It should be noted that the apparatus provided in the above embodiments is only illustrated by the division of the above functional modules when implementing its functions. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the content structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the apparatus and method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0220] Please refer to Figure 13, which shows a structural block diagram of a terminal device 1300 provided in one embodiment of this application. The terminal device 1300 can be any electronic device with data computing, processing, and storage functions. The terminal device 1300 can be used to implement the interface display method in the music application provided in the above embodiments.

[0221] Typically, terminal device 1300 includes a processor 1301 and a memory 1302.

[0222] Processor 1301 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1301 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1301 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1301 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the screen. In some embodiments, processor 1301 may also include an AI processor for handling computational operations related to machine learning.

[0223] The memory 1302 may include one or more computer-readable storage media, which may be non-transitory. The memory 1302 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1302 are used to store a computer program configured to be executed by one or more processors to implement the interface display method in the music application described above.

[0224] Those skilled in the art will understand that the structure shown in FIG13 does not constitute a limitation on the terminal device 1300, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0225] In an illustrative embodiment, a computer-readable storage medium is also provided, wherein a computer program is stored in the storage medium, and the computer program, when executed by the processor of a terminal device, implements the interface display method in the aforementioned music application. Optionally, the aforementioned computer-readable storage medium may be ROM (Read-Only Memory), RAM (Random Access Memory), CD-ROM (Compact Disc Read-Only Memory), magnetic tape, floppy disk, and optical data storage device, etc.

[0226] In an exemplary embodiment, a computer program product is also provided, comprising a computer program stored in a computer-readable storage medium. A processor of a terminal device reads the computer program from the computer-readable storage medium and executes the computer program, causing the terminal device to perform the interface display method in the aforementioned music application.

[0227] It should be understood that "multiple" as used herein refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. Furthermore, the step numbers described herein are merely illustrative of one possible execution order. In some other embodiments, the steps may not be executed in numerical order, such as two steps with different numbers being executed simultaneously, or two steps with different numbers being executed in the reverse order of the illustration. This application does not limit this.

[0228] The above description is merely an exemplary embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method for displaying an interface in a music application, the method being executed by a terminal device, the method comprising: The interface displays a vertical screen for playing songs, and the vertical screen for playing songs displays the vertical screen information of the first song. In response to the switching operation of the song playback interface, the vertical screen song playback interface is switched to the horizontal screen song playback interface; In the landscape-style song playback interface, the landscape-style song playback information of the first song is displayed, and the song playback information includes at least one of the following: song cover image, song basic information, song function controls, and song background image.

2. The method according to claim 1, wherein, The step of displaying the landscape-style song playback information of the first song in the landscape-style song playback interface includes: In the landscape-style song playback interface, the playback information of the first song is displayed in a first layout style, wherein the first layout style is a pre-configured layout style.

3. The method according to claim 2, wherein, The basic information of the song includes: song title, artist name, and lyrics; The first typesetting style includes: The song cover image is located on the left side of the landscape-style song playback interface; The song title and the artist's name are located in the top right area of ​​the landscape-style song playback interface; The lyrics are located in the middle right area of ​​the landscape-style song playback interface; The song function controls are located in the bottom right area of ​​the landscape-style song playback interface. The song background image serves as the background of the landscape-style song playback interface.

4. The method according to claim 2, wherein, The song function control includes a style switching control; the method further includes: In response to an operation on the style switching control, at least one candidate layout style for the song playback information is displayed; In response to the operation of selecting a second layout style from the at least one candidate layout styles, the landscape layout of the first song's playback information is displayed in the landscape layout of the song playback interface using the second layout style.

5. The method according to claim 2, wherein, The basic information of the song includes: song title, artist name, and lyrics; The first layout style is a pre-configured layout style based on the song style, and the song style is determined based on the basic information of the song; The first typesetting style includes: The song cover image, the song title, and the artist's name are located at the bottom left of the landscape-style song playback interface; The lyrics are located in the central area of ​​the landscape-style song playback interface; The song function controls are located at the bottom right of the landscape-style song playback interface. The song background image serves as the background of the landscape-style song playback interface.

6. The method according to claim 5, wherein, The first layout style also includes the pre-configured basic information of the song and the display colors of the song function controls, the display font of the basic information of the song, the display animation of the lyrics, and the display animation contained in the background image of the song.

7. The method according to claim 2, wherein, The basic information of the song includes: song title, artist name, and lyrics; The first layout style is a pre-configured layout style based on the style of the song background image. The first layout style includes the pre-configured display colors of the basic information of the song and the functional controls of the song, the display font of the basic information of the song and the display style of the song cover image. The display style of the song cover image includes a record-style display style. The first typesetting style includes: The song cover image is located on the left side of the landscape-style song playback interface; The song title and the artist's name are located in the top right area of ​​the landscape-style song playback interface; The lyrics are located in the middle right area of ​​the landscape-style song playback interface; The song function controls are located in the bottom right area of ​​the landscape-style song playback interface. The song background image serves as the background of the landscape-style song playback interface.

8. The method according to any one of claims 1 to 7, wherein, The method further includes: In response to an operation on the first cover image, a landscape-oriented song selection interface is displayed, wherein the first cover image is the cover image of the first song, and the song selection interface displays cover images of at least one candidate song. In response to the operation of selecting a second cover image from the cover images of the at least one candidate song, the landscape-style song playback interface displays the landscape-style song playback information of the second song, wherein the second cover image is the cover image of the second song.

9. The method according to any one of claims 1 to 8, wherein, The background image of the song displays a song spectrum animation, which is used to graphically represent the musical rhythm of the first song.

10. The method according to claim 9, wherein, The method further includes: Perform a Fast Fourier Transform on the audio data of the first song to obtain the frequency domain data of the audio data; Obtain the frequency band data in the first frequency band from the frequency domain data; The frequency band data of the first frequency band is filtered and smoothed to obtain the processed frequency band data; The processed frequency band data is rendered to obtain the song's spectral dynamics.

11. The method according to any one of claims 1 to 10, wherein, The method further includes: Obtain the color attributes of each pixel in the song cover image, wherein the color attributes include at least one of the following: chroma, saturation, and brightness; Based on the color attributes of each pixel, a first pixel is determined among the pixels, where the first pixel is a color with a significant display effect in the song cover image; Based on the color attribute of the first pixel, a first display color and a second display color are determined. The first display color is the display color of the basic information of the song and the function control of the song, and the second display color is the display color of the background image of the song. Based on the pre-set basic song information and the transparency of each of the song function controls, as well as the first display color, the basic song information and the song function controls are displayed respectively. The song background image is obtained based on the second display color and the song spectrum animation in the song background image.

12. The method according to claim 11, wherein, The step of determining the first pixel among the pixels based on the color attributes of each pixel includes: Based on the chroma and saturation of each pixel, each pixel is divided into a corresponding chroma interval and saturation interval to obtain at least one chroma interval and at least one saturation interval. The interval lengths of the at least one chroma interval and the at least one saturation interval are the same. Get at least one pixel that is in the color range with the most pixels and the saturation range with the most pixels. The first pixel is determined based on the at least one pixel.

13. The method according to claim 12, wherein, Determining the first pixel based on the at least one pixel includes: The pixel with the highest brightness among the at least one pixels is determined as the first pixel; or, The pixel with the most identical color attributes among the at least one pixel is determined as the first pixel.

14. The method according to claim 11, wherein, The step of determining the first display color and the second display color based on the color attribute of the first pixel includes: The chromaticity of the first pixel is determined as the chromaticity of the first display color and the chromaticity of the second display color; A preset first brightness is determined as the brightness of the first display color, and a preset second brightness is determined as the brightness of the second display color; Based on the saturation of the first pixel, determine the saturation of the first display color and the saturation of the second display color; The first display color is obtained based on the saturation, chroma, and brightness of the first display color; and the second display color is obtained based on the saturation, chroma, and brightness of the second display color.

15. The method according to claim 14, wherein, Determining the saturation of the first display color and the saturation of the second display color based on the saturation of the first pixel includes: When the saturation of the first pixel is within the first saturation range, the saturation of the first pixel is determined as the saturation of the first display color; when the saturation of the first pixel is less than the lower limit of the first saturation range, the lower limit of the first saturation range is determined as the saturation of the first display color; when the saturation of the first pixel is greater than the upper limit of the first saturation range, the upper limit of the first saturation range is determined as the saturation of the first display color. When the saturation of the first pixel is within the second saturation range, the saturation of the first pixel is determined as the saturation of the second display color; when the saturation of the first pixel is less than the lower limit of the second saturation range, the lower limit of the second saturation range is determined as the saturation of the second display color; when the saturation of the first pixel is greater than the upper limit of the second saturation range, the upper limit of the second saturation range is determined as the saturation of the second display color.

16. The method according to claim 14 or 15, wherein, The method further includes: If the chroma of the first pixel is within the first chroma range, and the saturation of the first pixel is within the third saturation range, then the saturation of the first pixel is determined as the saturation of the first display color; if the saturation of the first pixel is less than the lower limit of the third saturation range, then the lower limit of the third saturation range is determined as the saturation of the first display color; if the saturation of the first pixel is greater than the upper limit of the third saturation range, then the upper limit of the third saturation range is determined as the saturation of the first display color. If the chroma of the first pixel is within the second chroma range, and the saturation of the first pixel is within the fourth saturation range, then the saturation of the first pixel is determined as the saturation of the second display color; if the saturation of the first pixel is less than the lower limit of the fourth saturation range, then the lower limit of the fourth saturation range is determined as the saturation of the second display color; if the saturation of the first pixel is greater than the upper limit of the fourth saturation range, then the upper limit of the fourth saturation range is determined as the saturation of the second display color.

17. The method according to any one of claims 1 to 16, wherein, The switching operation is a rotation operation of the terminal device, which controls the deflection angle of the gyroscope of the terminal device to change, the deflection angle including the rotation angles corresponding to the three axes; the method further includes: If one of the rotation angles in the deflection angle reaches a first threshold, the step of switching the portrait-style song playback interface to a landscape-style song playback interface is executed.

18. An interface display device for a music application, the device comprising: The playback display module is used to display a vertical screen song playback interface, wherein the vertical screen song playback interface displays the vertical screen song playback information of the first song; The interface switching module is used to respond to the switching operation of the song playback interface and switch the vertical screen song playback interface to the horizontal screen song playback interface. The information display module is used to display the song playback information of the first song in the landscape mode of the song playback interface. The song playback information includes at least one of the following: song cover image, basic song information, song function controls, and song background image.

19. A terminal device comprising a processor and a memory, the memory storing a computer program, the computer program being loaded and executed by the processor to implement an interface display method in a music application as described in any one of claims 1 to 17.

20. A computer-readable storage medium storing a computer program, the computer program being loaded and executed by a processor to implement the interface display method in a music application as described in any one of claims 1 to 17.

21. A computer program product comprising a computer program loaded and executed by a processor to implement the interface display method in a music application as described in any one of claims 1 to 17.

Images