Interface display method and device in music application program, equipment and storage medium

Abstract

The invention discloses an interface display method and device in a music application program, equipment and a storage medium, and relates to the technical field of computers. The method comprises the following steps: displaying a vertical-screen song playing interface, wherein vertical-screen song playing information of a first song is displayed in the vertical-screen song playing interface; in response to a switching operation for the song playing interface, switching the song playing interface in a vertical screen form into a song playing interface in a horizontal screen form; the song playing information of the first song in the horizontal screen form is displayed in the song playing interface in the horizontal screen form, and the song playing information comprises at least one of a song cover image, song basic information, a song function control and a song background image. According to the method, the song playing information in the landscape form is displayed, so that the song playing information is not limited by the screen width any more, the picture ratio of the basic song information is increased, and the display degree of the basic song information is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to an interface display method, device, equipment and storage medium in a music application. Background Art

[0002] Music is everywhere in our lives and can change people's moods. Currently, people usually use music applications to play music.

[0003] In the related art, when music is played using a music application installed in a terminal device, regardless of whether the terminal device is in portrait or landscape mode, a song playback interface in portrait format will be displayed in the display interface of the music application, and song playback information will be displayed in portrait format in the song playback interface.

[0004] However, the above-mentioned vertical screen song playback interface is limited by the screen width of the terminal device, resulting in a small font size for displaying lyrics, which cannot meet certain scenarios that require large lyrics display. Summary of the invention

[0005] The embodiment of the present application provides an interface display method, device, equipment and storage medium in a music application. The technical solution provided by the embodiment of the present application is as follows:

[0006] According to one aspect of an embodiment of the present application, a method for displaying an interface in a music application is provided, the method comprising:

[0007] Displaying a song playing interface in a vertical screen format, wherein the song playing interface in the vertical screen format displays song playing information of the first song in a vertical screen format;

[0008] In response to a switching operation on the song playing interface, the song playing interface in the vertical screen format is switched to a song playing interface in the horizontal screen format;

[0009] In the horizontal screen song playing interface, the horizontal screen song playing information of the first song is displayed, and the song playing information includes at least one of the following: song cover image, song basic information, song function control, and song background image.

[0010] According to one aspect of an embodiment of the present application, there is provided an interface display device in a music application, the device comprising:

[0011] A playback display module, used to display a song playback interface in a vertical screen format, wherein the song playback interface in the vertical screen format displays song playback information of the first song in a vertical screen format;

[0012] An interface switching module, for switching the song playing interface in the vertical screen format to the song playing interface in the horizontal screen format in response to a switching operation on the song playing interface;

[0013] An information display module is used to display the song playing information of the first song in the horizontal screen format in the song playing interface, and the song playing information includes at least one of the following: song cover image, song basic information, song function controls, and song background image.

[0014] According to one aspect of an embodiment of the present application, a terminal device is provided, which includes a processor and a memory, wherein the memory stores a computer program, and the computer program is loaded and executed by the processor to implement the interface display method in the above-mentioned music application.

[0015] According to one aspect of an embodiment of the present application, a computer-readable storage medium is provided, in which a computer program is stored. The computer program is loaded and executed by a processor to implement the interface display method in the above-mentioned music application.

[0016] According to one aspect of an embodiment of the present application, a computer program product is provided, wherein the computer program product includes a computer program, and the computer program is loaded and executed by a processor to implement the interface display method in the above-mentioned music application.

[0017] The technical solution provided in the embodiments of the present application can bring the following beneficial effects:

[0018] The form switching of the song playback interface of the music application in the terminal device is realized. By switching the song playback interface in the vertical screen form to the song playback interface in the horizontal screen form, the song playback information in the horizontal screen form can be displayed in the song playback interface in the horizontal screen form. Compared with the related art that can only display the song playback interface in the vertical screen form, the technical solution of the present application displays the song playback information in the horizontal screen form, so that the song playback information is no longer limited by the screen width, the screen ratio of the basic information of the song is increased, and the display of the basic information of the song is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 It is a schematic diagram of an implementation environment of a solution provided by an embodiment of the present application;

[0020] Figure 2 It is a schematic diagram of switching display of a song playing interface provided by an embodiment of the present application;

[0021] Figure 3 is a flowchart of an interface display method in a music application provided by an embodiment of the present application;

[0022] Figure 4 is a schematic diagram of a style switching process of song playback information provided by an embodiment of the present application;

[0023] Figure 5 is a schematic diagram of a process of switching songs by selecting a song cover image provided by an embodiment of the present application;

[0024] Figure 6 This is a schematic diagram of the effect of operating lyrics provided by an embodiment of the present application;

[0025] Figure 7 It is a schematic diagram of the arrangement position of song playing information indicated by the first type of layout style provided in an embodiment of the present application in a song playing interface;

[0026] Figure 8 is a schematic diagram of a song spectrum dynamic effect provided by an embodiment of the present application;

[0027] Fig. 9 is a flow chart of a method for determining a first typesetting style provided by an embodiment of the present application;

[0028] Fig.10 It is a schematic diagram of the arrangement position of the song playing information indicated by the second type of layout style provided in an embodiment of the present application in the song playing interface;

[0029] Fig.11 It is a schematic diagram of the arrangement position of song playing information indicated by the third type of layout style provided in an embodiment of the present application in the song playing interface;

[0030] Fig.12 is a block diagram of an interface display device in a music application provided by an embodiment of the present application;

[0031] Fig.13 This is a structural block diagram of a terminal device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0032] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0033] Please refer to Figure 1 , which shows a schematic diagram of a solution implementation environment provided by an embodiment of the present application. The solution implementation environment can be implemented as an application system, such as a music application system. The solution implementation environment may include: a terminal device 10 and a server 20.

[0034] The number of terminal devices 10 can be one or more. The terminal device 10 can be an electronic device such as a mobile phone, a tablet computer, a laptop computer, a desktop computer, a game console, an e-book reader, a multimedia player, a wearable device, an intelligent voice interaction device, a smart home appliance, a vehicle terminal, an aircraft, etc.

[0035] The terminal device 10 may be installed with a client of a music application, and the music application has the function of playing songs. Optionally, the music application may be an application that needs to be downloaded and installed, or may be an application that can be used instantly, and this application does not limit this.

[0036] The server 20 is used to provide background services for the client of the music application installed and running in the terminal device 10. For example, the server 20 can be the background server of the above-mentioned music application. The server 20 can be an independent physical server, or a server cluster composed of multiple servers, or a cloud computing service center. Optionally, the server 20 provides background services for the music applications in multiple terminal devices 10 at the same time. The terminal device 10 and the server 20 can communicate with each other through the network.

[0037] In an embodiment of the present application, a song playback interface in a vertical screen format is initially displayed in the client of the music application, and the song playback interface in the vertical screen format displays song playback information of the first song in a vertical screen format; in response to a switching operation on the song playback interface, the song playback interface in the vertical screen format is switched to a song playback interface in a horizontal screen format, thereby displaying the song playback information of the first song in a horizontal screen format in the song playback interface in a horizontal screen format.

[0038] Figure 2 A schematic diagram showing the switching display of the song playing interface is shown. Figure 2 Figure (1) shows a song playback interface in vertical screen format, and the song playback information in the song playback interface in vertical screen format is displayed in vertical screen format. Figure 2 Figure (2) in the figure shows a horizontal screen song playing interface, and the song playing information in the horizontal screen song playing interface is displayed in horizontal screen form. In response to the switching operation on the song playing interface, the song playing interface will change from Figure 2 Figure (1) in the figure, switch to Figure 2 Figure (2) in .

[0039] Please refer to Figure 3 , which shows a flow chart of an interface display method in a music application provided by an embodiment of the present application. The execution subject of each step of the method may be a terminal device. The method may include at least one of the following steps 310 to 330:

[0040] Step 310, displaying a song playing interface in a vertical screen format, wherein the song playing interface in a vertical screen format displays song playing information of the first song in a vertical screen format.

[0041] In some embodiments, the executor of the technical solution provided in the present application is a mobile phone, that is, the interface display method in the music application provided in the embodiment of the present application is an interface display method applied to the music application of the mobile phone.

[0042] The song playing interface is an interface for playing songs in a music application. The vertical screen song playing interface is a song playing interface displayed when the terminal device is in the vertical screen state, such as Figure 2 As shown in Figure (1), the terminal device is in a vertical screen state, which means that the terminal device is placed vertically.

[0043] The vertical screen song playing interface displays the song playing information of the first song in vertical screen format. The first song can be any song. The vertical screen song playing information is the song playing information displayed based on the vertical screen song playing interface.

[0044] 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.

[0045] The song cover image is an image used to display the style and content of the song. Usually, the song cover image refers to the album cover image of the album in which the song is located. The basic information of the song includes: song title, singer name and lyrics. The song background image is the background of the horizontal screen song playback interface, including the song cover image, basic song information and song function controls.

[0046] The song function control includes at least one of the following: a song playback control, a song switching control, a song collection control, and a style switching control. Among them, the song playback control is used to control the playback and pause of the song. For example, the user clicks the song playback control, and the music application plays the song. If the user clicks the song playback control again, the music application pauses the song. The song switching control is used to control the switching playback of songs. For example, the music application is playing the first song. If the user clicks the song playback control, the music application switches to play the second song. The song collection control is used to collect songs to a playlist. For example, if the user clicks the song collection control, the song is collected to the default playlist. The style switching control is used to switch the layout style of the song playback interface. For example, the song playback information is displayed in the first layout style in the song playback interface. If the user performs an operation on the style switching control, the song playback information is switched to the second layout style in the song playback interface.

[0047] Step 320, in response to the switching operation on the song playing interface, the song playing interface in the vertical screen format is switched to the song playing interface in the horizontal screen format.

[0048] The switching operation for the song playing interface is performed by the user, and is used to switch the song playing interface in the vertical screen format to the song playing interface in the horizontal screen format.

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

[0050] The terminal device is equipped with a gyroscope. When the user rotates the terminal device, the deflection angle of the gyroscope of the terminal device changes. The deflection angle of the gyroscope includes rotation angles corresponding to three axes, namely, the rotation angle corresponding to the x-axis, the rotation angle corresponding to the y-axis, and the rotation angle corresponding to the z-axis. The rotation angle corresponding to the x-axis refers to the angle at which the terminal device rotates around the x-axis when the user rotates the terminal device, the rotation angle corresponding to the y-axis refers to the angle at which the terminal device rotates around the y-axis when the user rotates the terminal device, and the rotation angle corresponding to the z-axis refers to the angle at which the terminal device rotates around the z-axis when the user rotates the terminal device. Therefore, the deflection angle is expressed as a sequence of rotation angles corresponding to the three axes. For example, the deflection angle is initially (0,0,0), and after the user performs the first operation, the deflection angle is (30,30,30).

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

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

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

[0054] By adopting the operation control of rotating the terminal device to switch the vertical screen song playback interface to the horizontal screen song playback interface, the difficulty of triggering the mode switching of the song playback interface is reduced, and it is easier and more convenient for users to switch the mode of the song playback interface.

[0055] In some embodiments, the song playback interface also includes a form switching control, and the switching operation is an operation on the form switching control. In response to the operation on the form switching control, the song playback interface in the vertical screen form is switched to the song playback interface in the horizontal screen form. Exemplarily, the operation on the form switching control is an operation of clicking the form switching control.

[0056] The horizontal screen song playback interface is a song playback interface displayed when the terminal device is in the horizontal screen state, such as Figure 2 As shown in Figure (2) in FIG. 1 , the terminal device is in a horizontal screen state, which means that the terminal device is placed horizontally. For the switching process from the vertical screen song playback interface to the horizontal screen song playback interface, please refer to Figure 2 Zhongcong Figure 2 The (1) diagram in the figure is switched to Figure 2 The process of Figure (2) is to switch from a state where the terminal device is placed upright to a state where the terminal device is placed horizontally.

[0057] Step 330, displaying the song playing information of the first song in the horizontal screen format in the song playing interface.

[0058] The horizontal screen song playing information is the song playing information displayed based on the horizontal screen song playing interface. The horizontal screen song playing information is used to focus on displaying the basic information of the song, and the vertical screen song playing information is used to focus on displaying the song cover image, such as Figure 2As shown, the screen proportion of the basic information of the song in the horizontal screen song playback interface is greater than that of the basic information of the song in the vertical screen song playback interface. In addition, the basic information of the song in the horizontal screen is used to focus on displaying the lyrics, and the screen proportion of the lyrics in the horizontal screen song playback interface is greater than that of the lyrics in the vertical screen song playback interface.

[0059] In some embodiments, a song playback interface in horizontal format is displayed, and song playback information of a first song in horizontal format is displayed in the song playback interface in horizontal format; in response to a switching operation on the song playback interface, the song playback interface in horizontal format is switched to a song playback interface in vertical format; in the song playback interface in vertical format, song playback information of the first song in vertical format is displayed.

[0060] The technical solution provided by the embodiment of the present application realizes the form switching of the song playing interface of the music application in the terminal device. By switching the song playing interface in the vertical screen form to the song playing interface in the horizontal screen form, the song playing information in the horizontal screen form can be displayed in the song playing interface in the horizontal screen form. Compared with the related art that can only display the song playing interface in the vertical screen form, the technical solution of the present application displays the song playing information in the horizontal screen form, so that the song playing information is no longer limited by the screen width, increases the screen proportion of the basic information of the song, improves the display of the basic information of the song, and meets some scenarios where users need to display a large amount of basic information of the song, such as casting the screen to sing karaoke, placing the mobile phone to read the lyrics while running in the gym, etc. And by displaying the song playing interface in the horizontal screen form, the terminal device can be used in a vertical state on the desktop when it is in a charging state, which improves the convenience of using the music application.

[0061] In some embodiments, in a song playback interface in a horizontal screen format, song playback information of a first song in a horizontal screen format is displayed in a first layout style, wherein the first layout style is a preconfigured layout style.

[0062] The layout style is the layout style for the song playback information. The layout style refers to the layout style of the song playback information in the song playback interface, which is used to indicate the arrangement position of the song playback information in the song playback interface and the display style of the song playback information in the song playback interface. The layout style of the song playback information in the song playback interface includes the layout style of the song cover image, the layout style of the song basic information, the layout style of the song function control and the layout style of the song background image.

[0063] The layout style of the song cover image includes the arrangement position of the song cover image in the song playback interface, the display style of the song cover image, and the screen ratio of the song cover image. The layout style of the basic information of the song includes the arrangement position of the basic information of the song in the song playback interface, the display color of the basic information of the song, the transparency of the basic information of the song, the display font of the basic information of the song, and the display dynamic effect of the basic information of the song. Among them, the display color of the song title, the display color of the singer name, and the display color of the lyrics can be the same or different; the transparency of the song title, the transparency of the singer name, and the transparency of the lyrics can be the same or different; the display font of the song title, the display font of the singer name, and the display font of the lyrics can be the same or different; the display dynamic effect of the song title, the display dynamic effect of the singer name, and the display dynamic effect of the lyrics can be the same or different, and this application does not limit this. The layout style of the song function control includes the arrangement position of the song function control in the song playback interface, the display color of the song function control, the display transparency of the song function control, and the screen ratio of the song function control. The layout style of the song background image includes the display animation included in the song background image and the display color of the song background image.

[0064] The typesetting style is preconfigured, and the first typesetting style may be any one of at least one preconfigured typesetting style. Optionally, the first typesetting style may be a default typesetting style preconfigured in the music application. For example, the default typesetting style preconfigured in the music application is typesetting style a in at least one typesetting style. When the terminal device switches from a vertical screen song playback interface to a horizontal screen song playback interface, in the horizontal screen song playback interface, the song playback information of the first song in horizontal screen format will be displayed in typesetting style a. Optionally, the first typesetting style may also be a typesetting style selected and configured by the user in advance from at least one typesetting style. For example, the user selects typesetting style b as the typesetting style of the song playback information from at least one typesetting style in advance. When the terminal device switches from a vertical screen song playback interface to a horizontal screen song playback interface, in the horizontal screen song playback interface, the song playback information of the first song in horizontal screen format will be displayed in typesetting style b.

[0065] The embodiments of the present application provide three examples of the first typesetting style, which can be referred to in the following embodiments and are not introduced here.

[0066] By configuring the song playback information in horizontal screen format, the song playback information can be arranged more reasonably in the horizontal screen song playback interface, which can better adapt to the usage status of most users and improve the comfort of users in using music applications.

[0067] 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 to 342 (not shown in the figure).

[0068] Sub-step 341, in response to the operation on the style switching control, display at least one candidate layout style of the song playing information.

[0069] Exemplarily, the 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 style selection interface in a horizontal screen format is displayed. The style selection interface in a horizontal screen format is a style selection interface displayed when the terminal device is in a horizontal screen state, and the style selection interface in a horizontal screen format is used to match the song playback interface in a horizontal screen format.

[0070] At least one candidate layout style of the song playing information is displayed in the style selection interface, and at least one candidate layout style is a pre-configured layout style.

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

[0072] Exemplarily, the operation of selecting the second layout style from at least one candidate layout style is the operation of clicking the second layout style from at least one candidate layout style. After selecting the second layout style, the horizontal screen style selection interface returns to the horizontal screen song playback interface, and in the horizontal screen song playback interface, the horizontal screen song playback information of the first song is displayed in the second layout style. The second layout style is any other layout style from at least one candidate layout style except the first layout style.

[0073] The schematic diagram of the song playback information style switching process can be referred to Figure 4 As shown, a style switching control 401 is displayed in a song playing interface 410 in a horizontal screen format. The user clicks the style switching control 401 to enter a style selection interface 420 in a horizontal screen format. The style selection interface 420 in a horizontal screen format displays at least one candidate typesetting style of the song playing information, including typesetting style 402, typesetting style 403, typesetting style 404, etc. The user can swipe left and right in the style selection interface 420 in a horizontal screen format to view at least one candidate typesetting style. After the user selects typesetting style 404 from at least one candidate typesetting style, the user returns from the style selection interface 420 in a horizontal screen format to the song playing interface 430 in a horizontal screen format. In the song playing interface 430 in a horizontal screen format, the song playing information in a horizontal screen format is displayed in typesetting style 404.

[0074] By providing a style switching control, users can change the layout style of the song playback information in the horizontal screen format through the style switching control, enriching the interface display form of the horizontal screen song playback interface and improving the user's sense of participation and interaction with the song playback interface.

[0075] In some embodiments, step 330 is followed by step 350. As for the execution order of step 340 and step 350, step 350 can be executed before step 340 or after step 340, which is not limited in this application. Step 350 includes at least one step of sub-steps 351 to 352 (not shown in the figure).

[0076] Sub-step 351, in response to the operation on the first cover image, a song selection interface in horizontal form is displayed, the first cover image is the song cover image of the first song, and the song selection interface displays at least one song cover image of a candidate song.

[0077] Exemplarily, 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 song selection interface in a horizontal screen format is displayed. The song selection interface in a horizontal screen format is a song selection interface displayed when the terminal device is in a horizontal screen state, and the song selection interface in a horizontal screen format is used to match the song playback interface in a horizontal screen format.

[0078] The song selection interface displays at least one song cover image of a candidate song. Exemplarily, the song selection interface displays at least one album cover image of a candidate song.

[0079] Sub-step 352, in response to the operation of selecting a second cover image among the song cover images of at least one candidate song, displays the song play information of the second song in a horizontal screen format in the song play interface, and the second cover image is the song cover image of the second song.

[0080] Exemplarily, the operation of selecting the second cover image in the song cover images of at least one candidate song is the operation of clicking the second cover image in the song cover images of at least one candidate song. After selecting the second cover image, the song selection interface in the horizontal screen form returns to the song playback interface in the horizontal screen form, and the song playback information in the horizontal screen form of the second song is displayed in the song playback interface in the horizontal screen form. The second song is any other song in the at least one candidate song except the first song.

[0081] The process diagram of switching songs by selecting the song cover image can be referred to Figure 5As shown, a first cover image 501 is displayed in a horizontal song playing interface 510. The user clicks on the first cover image 501 to enter a horizontal song selection interface 520. The horizontal song selection interface 520 displays at least one song cover image of a candidate song, including a song cover image 502, a song cover image 503, a song cover image 504, etc. The user can swipe left and right in the horizontal song selection interface 520 to view the song cover image of at least one candidate song. After the user selects the song cover image 502 from the song cover images of at least one candidate song, the user returns from the horizontal song selection interface 520 to the horizontal song playing interface 510, and the horizontal song playing information of the song corresponding to the song cover image 502 is displayed in the horizontal song playing interface 510.

[0082] Song switching is achieved by operating the first cover image, switching from the song playing interface of the first song to the song playing interface of the second song, providing a simple and convenient way to switch songs, enriching the operating functions of the song playing interface, and helping to enhance the attractiveness and interest of the music application to users.

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

[0084] For the operation effect diagram of lyrics, please refer to Figure 6 As shown, Figure 6 Figure (1) shows a schematic diagram of the operating effect of a sliding operation on lyrics. A lyrics display area 601 is displayed in a horizontal screen song playback interface 600. The user performs a sliding operation on the lyrics display area 601, and the lyrics after the sliding operation are displayed. Figure 6 Figure (2) shows a schematic diagram of the operating effect of a click operation on lyrics. Lyrics 602 are displayed in a horizontal screen song playback interface 600. The user performs a click operation on the lyrics 602, and the playback progress corresponding to the lyrics 602 is displayed.

[0085] The following is an introduction to the three layout styles provided by this application.

[0086] The first typesetting style: The first typesetting style is a typesetting style determined based on the audio data of the first song and the song cover image. The audio data of the first song is used to determine the song spectrum effect in the song background image, and the song cover image is used to determine the display color of the song background image, the song basic information, and the display color of the song function controls.

[0087] The first layout style includes: the song cover image is located on the left side of the song playback interface in horizontal screen format; the song title and singer name are located in the top area on the right side of the song playback interface in horizontal screen format; the lyrics are located in the middle area on the right side of the song playback interface in horizontal screen format; the song function controls are located in the bottom area on the right side of the song playback interface in horizontal screen format; the song background image serves as the background of the song playback interface in horizontal screen format.

[0088] The present application does not limit the above-mentioned division ratio of the left area and the right area, and the division ratio of the top area, the middle area and the bottom area. For example, the division ratio of the left area and the right area is 1:1, and the division ratio of the top area, the middle area and the bottom area is 1:1:1.

[0089] The arrangement position of the song playing information indicated by the first type of layout style in the song playing interface can be referred to Figure 7 As shown, in the horizontal screen song playing interface 700, the horizontal screen song cover image, song basic information, song function controls and song background image of the first song are displayed. The song cover image 701 is located on the left side of the horizontal screen song playing interface 700, the song name and singer name 702 are located in the top area of ​​the right side of the horizontal screen song playing interface 700, and the lyrics 703 are located in the middle area of ​​the right side of the horizontal screen song playing interface 700; the song function controls 704 are located in the bottom area of ​​the right side of the horizontal screen song playing interface 700, and the song background image 705 serves as the background of the horizontal screen song playing interface 700.

[0090] By arranging the song playback information in the above manner, the arrangement position of each song playback information is more reasonable, the screen ratio of the basic song information is increased, and the basic song information is no longer limited by the screen width, which meets certain user scenarios that require large lyrics display and improves user satisfaction.

[0091] In some embodiments, a song spectrum animation is displayed in the song background image, and the song spectrum animation is used to display the music rhythm of the first song in a graphical form.

[0092] The schematic diagram of the song spectrum effect can be referred to Figure 8 As shown, in the song background image 800, a song spectrum dynamic effect 801 is displayed, and the song spectrum dynamic effect 801 is used to display the music rhythm of the first song in a graphical form. Figure 8 From the song spectrum animation 801 displayed in the figure, it can be seen which parts of the first song have a stronger music rhythm and which parts have a slower music rhythm.

[0093] By displaying the song spectrum effects in the song background image, when the song is playing, the displayed effects in the song background image can be adapted to the music rhythm of the song, allowing users to feel the visual effects of the music rhythm of the song, enhancing the user's experience and sense of participation in the music rhythm of the song, and helping to attract users to listen to the song.

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

[0095] The present application does not limit the value of the first frequency band. Exemplarily, the first frequency band is a frequency band that the human ear is sensitive to, and the first frequency band is 1000 Hz-3000 Hz.

[0096] For example, OpenGL (Open Graphics Library) can be used to render the processed frequency band data to obtain a song spectrum dynamic effect. The song spectrum dynamic effect will change with the change of music rhythm.

[0097] By selecting the frequency band data of the first frequency band for rendering, the final displayed song spectrum dynamic effect can better show the changes in the music rhythm, avoiding selecting the frequency band data outside the first frequency band for rendering, which may cause the song spectrum dynamic effect to be too soothing or too strong, thereby achieving a better visual effect of the music rhythm of the song.

[0098] Please refer to Fig. 9 , which shows a flow chart of a method for determining a first typesetting style provided by an embodiment of the present application. The execution subject of each step of the method can be a terminal device or a server. The method includes at least one of the following steps S1 to S5.

[0099] Step S1, obtaining the color attribute of each pixel in the song cover image, the color attribute including at least one of the following: hue, saturation, brightness.

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

[0101] Step S2, determining a first pixel among the pixels according to the color attributes of the pixels, where the first pixel is a color having a significant display effect in the song cover image.

[0102] The first pixel is the pixel that best represents the song cover image among all the pixels, or the pixel whose brightness is most eye-catching among all the pixels.

[0103] 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 the same color attributes among all pixels can be directly determined as the first pixel. For example, if the song cover image contains 100 pixels, among all 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 the same color attributes corresponding to pixel a is 60, and 60 is the largest number of the same color attributes among all pixels, then pixel a is determined as the first pixel.

[0104] In some embodiments, the first pixel is not a pixel among the pixels, but a pixel determined by the color attributes of the pixels. Optionally, the chromaticity of the first pixel is the chromaticity with the largest number of the same pixels among the pixels, the saturation of the first pixel is the saturation with the largest number of the same pixels among the pixels, and the brightness of the first pixel is the brightness with the largest number of the same pixels among the pixels. Optionally, the chromaticity of the first pixel is the average chromaticity of the pixels, the saturation of the first pixel is the average saturation of the pixels, and the brightness of the first pixel is the average brightness of the pixels.

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

[0106] Sub-step S21, according to the chroma and saturation of each pixel, divide each pixel into the chroma interval and saturation interval corresponding to the pixel, to obtain at least one chroma interval and at least one saturation interval, the interval length of at least one chroma interval is the same, and the interval length of at least one saturation interval is the same.

[0107] At least one chroma interval and at least one saturation interval are pre-set, the interval length of at least one chroma interval is the same, and the interval length of at least one saturation interval is the same, and the present application does not limit the interval length of the chroma interval and the interval length of the saturation interval. Exemplarily, if the value range of chroma is 0 to 255, the interval length of the chroma interval can be set to 5, and the chroma intervals are 0-5, 5-10, ..., 250-255 in sequence. If the value range of saturation is 0 to 255, the interval length of the saturation interval can be set to 5, and the saturation intervals are 0-5, 5-10, ..., 250-255 in sequence.

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

[0109] Sub-step S22, obtaining at least one pixel that is in the chroma interval with the largest number of pixels and in the saturation interval with the largest number of pixels.

[0110] The number of pixels respectively included in at least one chromaticity interval and the number of pixels respectively included in at least one saturation interval are obtained to obtain the chromaticity interval with the largest number of pixels and the saturation interval with the largest number of pixels. According to the chromaticity interval with the largest number of pixels and the saturation interval with the largest number of pixels, at least one pixel in the chromaticity interval with the largest number of pixels and in the saturation interval with the largest number of pixels is obtained.

[0111] In some embodiments, according to the chroma, saturation and brightness of each pixel, each pixel is divided into the chroma interval, saturation interval and brightness interval corresponding to the pixel, and at least one chroma interval, at least one saturation interval and at least one brightness interval are obtained, and the interval length of at least one chroma interval is the same, and the interval length of at least one saturation interval is the same, and the interval length of at least one brightness interval is the same. At least one pixel is obtained that is in the chroma interval with the largest number of pixels, in the saturation interval with the largest number of pixels, and in the brightness interval with the largest number of pixels.

[0112] Sub-step S23, determining a first pixel according to at least one pixel.

[0113] A first pixel is determined from the at least one pixel.

[0114] By dividing each pixel into the chroma interval and saturation interval corresponding to the pixel, the first pixel is screened out according to the chroma interval and saturation interval with the largest number of pixels, thereby providing more possibilities for pixel selection and avoiding the situation where some pixels belong to the colors with significant display effects in the song cover image but do not meet the screening conditions of the first pixel. This enriches the method of determining the first pixel and allows the first pixel to belong to the pixels with more chroma and saturation appearances in the song cover image, which is in line with the user's appreciation habits.

[0115] In some embodiments, the pixel with the highest brightness among the at least one pixel is determined as the first pixel. Then the first pixel belongs to the pixel with the highest brightness among the at least one pixel with a large number of occurrences of chroma and saturation in the song cover image.

[0116] In some embodiments, the pixel with the largest 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 there are 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 among at least one pixel, and the number of identical color attributes corresponding to pixel a is 6, and 6 is the largest number of identical color attributes among at least one pixel, then pixel a is determined as the first pixel.

[0117] By selecting the highlight color or the most colorful color in at least one pixel through the above method, the first pixel can more accurately represent the color of the song cover image, conform to the musical meaning of the song, and enhance the atmosphere of the song playback interface.

[0118] In some embodiments, the first pixel is not a pixel in at least one pixel, but a pixel determined by the color attribute of at least one pixel. Optionally, the chromaticity of the first pixel is the chromaticity with the largest number of the same number in at least one pixel, the saturation of the first pixel is the saturation with the largest number of the same number in at least one pixel, and the brightness of the first pixel is the brightness with the largest number of the same number in at least one pixel. Optionally, the chromaticity of the first pixel is the average chromaticity of at least one pixel, the saturation of the first pixel is the average saturation of at least one pixel, and the brightness of the first pixel is the average brightness of at least one pixel.

[0119] Step S3, determining a first display color and a second display color according to the color attribute of the first pixel, the first display color is the display color of the basic information of the song and the song function control, and the second display color is the display color of the song background image.

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

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

[0122] Sub-step S31, determining the chromaticity of the first pixel as the chromaticity of the first display color and the chromaticity of the second display color.

[0123] Sub-step S32, determining the preset first brightness as the brightness of the first display color, and determining the preset second brightness as the brightness of the second display color.

[0124] The brightness of the first display color and the brightness of the second display color are not determined according to the color attribute of the first pixel, but are pre-set brightnesses, which are used to make the first display color and the second display color conform to the user's eye habits when displayed, avoid glare caused by excessive brightness or unclear display content caused by too low brightness, and improve eye protection performance.

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

[0126] Sub-step S33, determining the saturation of the first display color and the saturation of the second display color according to the saturation of the first pixel.

[0127] In some embodiments, when the saturation of the first pixel is in the first saturation interval, 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 value of the first saturation interval, the lower limit value of the first saturation interval is determined as the saturation of the first display color; when the saturation of the first pixel is greater than the upper limit value of the first saturation interval, the upper limit value of the first saturation interval is determined as the saturation of the first display color.

[0128] The interval setting of the first saturation interval is set by the technicians according to the color sensitivity of the human eye, and this application does not limit it.

[0129] Exemplarily, the first saturation interval is 40 to 85, and when the saturation of the first pixel is in the first saturation interval, 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 example, if the saturation of the first pixel is 60, the saturation of the first display color is 60, if the saturation of the first pixel is 30, the saturation of the first display color is 40, and if the saturation of the first pixel is 90, the saturation of the first display color is 85.

[0130] In some embodiments, when the saturation of the first pixel is in the second saturation interval, 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 a lower limit value of the second saturation interval, the lower limit value of the second saturation interval is determined as the saturation of the second display color; when the saturation of the first pixel is greater than an upper limit value of the second saturation interval, the upper limit value of the second saturation interval is determined as the saturation of the second display color.

[0131] The interval setting of the second saturation interval is set by the technician according to the color sensitivity of the human eye, and this application does not limit it.

[0132] Exemplarily, the second saturation interval is 40 to 100, and when the saturation of the first pixel is in the second saturation interval, 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 40, 40 is determined as the saturation of the second display color; when the saturation of the first pixel is greater than 100, 100 is determined as the saturation of the second display color. For example, if the saturation of the first pixel is 60, the saturation of the second display color is 60, if the saturation of the first pixel is 30, the saturation of the first display color is 40, and if the saturation of the first pixel is 120, the saturation of the first display color is 100.

[0133] The saturation of the first display color and the second display color is determined by setting a saturation range, so that the depth of the first display color and the second display color can meet the user's eye habits, avoid excessive saturation causing the color to be too bright or too low saturation causing the color to be too dim, and improve the coordination of color display.

[0134] In some embodiments, when the chroma of the first pixel is in the first chroma interval, if the saturation of the first pixel is in the third saturation interval, 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 a lower limit value of the third saturation interval, the lower limit value of the third saturation interval is determined as the saturation of the first display color; if the saturation of the first pixel is greater than an upper limit value of the third saturation interval, the upper limit value of the third saturation interval is determined as the saturation of the first display color.

[0135] The interval settings of the first chromaticity interval and the third saturation interval are set by technicians according to the color sensitivity of the human eye, and this application does not limit them.

[0136] Exemplarily, the first chromaticity interval is 0 to 5, and the third saturation interval is 40 to 70. If the chromaticity of the first pixel is in the first chromaticity interval, if the saturation of the first pixel is in the third saturation interval, 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, 40 is determined as the saturation of the first display color; if the saturation of the first pixel is greater than 70, 70 is determined as the saturation of the first display color. For example, if the chromaticity of the first pixel is 2, if the saturation of the first pixel is 60, the saturation of the first display color is 60, if the saturation of the first pixel is 30, the saturation of the first display color is 40, and if the saturation of the first pixel is 90, the saturation of the first display color is 70.

[0137] When the chromaticity of the first pixel is outside the first chromaticity interval, the first display color is determined according to the first saturation interval.

[0138] In some embodiments, when the chroma of the first pixel is in the second chroma interval, if the saturation of the first pixel is in the fourth saturation interval, 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 a lower limit value of the fourth saturation interval, the lower limit value of the fourth saturation interval is determined as the saturation of the second display color; if the saturation of the first pixel is greater than an upper limit value of the fourth saturation interval, the upper limit value of the fourth saturation interval is determined as the saturation of the second display color.

[0139] The interval settings of the second chromaticity interval and the fourth saturation interval are set by technicians according to the color sensitivity of the human eye, and this application does not limit them.

[0140] Exemplarily, the second chromaticity interval is 215 to 250, and the fourth saturation interval is 40 to 80. If the chromaticity of the first pixel is in the first chromaticity interval, if the saturation of the first pixel is in the fourth saturation interval, 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 80, 80 is determined as the saturation of the second display color. For example, if the chromaticity of the first pixel is 220, if the saturation of the first pixel is 60, the saturation of the second display color is 60, if the saturation of the first pixel is 30, the saturation of the second display color is 40, and if the saturation of the first pixel is 90, the saturation of the second display color is 80.

[0141] When the chromaticity of the first pixel is outside the second chromaticity interval, the second display color is determined according to the second saturation interval.

[0142] By determining the saturation of the first display color and the second display color when the chromaticity of the first pixel is in the first chromaticity interval or the second chromaticity interval, the saturation of the first display color and the second display color can be coordinated with the chromaticity of the first display color and the second display color, thereby improving the coordination of color settings and satisfying the user's visual habits for colors.

[0143] Sub-step S34, obtaining the first display color according to the saturation of the first display color, the chromaticity of the first display color and the brightness of the first display color, and obtaining the second display color according to the saturation of the second display color, the chromaticity of the second display color and the brightness of the second display color.

[0144] The first display color and the second display color are determined respectively through the above steps, so that the color attributes of the first display color and the second display color are coordinated with each other, thereby satisfying the user's visual habit of color.

[0145] Step S4, displaying the basic song information and the song function control respectively according to the preset corresponding transparency of the basic song information and the song function control, and the first display color.

[0146] The basic information of the song is displayed according to the preset transparency and the first display color of the basic information of the song, and the function control of the song is displayed according to the preset transparency and the first display color of the function control of the song.

[0147] The transparency of the basic information of the song and the transparency of the song function controls can be the same or different. The transparency corresponding to the basic information of the song and the song function controls can be set by the technicians according to the color sensitivity of the human eye, and this application does not limit it.

[0148] Step S5, obtaining the song background image according to the second display color and the song spectrum dynamic effect in the song background image.

[0149] According to the second display color, the base color of the song background image is obtained, and the song spectrum dynamic effect is displayed on the song background image of the second display color to obtain the song background image.

[0150] In some embodiments, the display color of the song spectrum animation can be set to another display color different from the second display color, then the song spectrum animation in the song background image is rendered as the display color of the song spectrum animation, combined with the song background image of the second display color, to obtain the final displayed song background image. Exemplarily, 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 as the first display color, combined with the song background image of the second display color, to obtain the final displayed song background image.

[0151] The basic information of the song, the function controls of the song and the background image of the song are obtained through the above steps, so that the color display of the song playback interface is adapted to the color of the song cover image, thereby enhancing the user's sense of immersion when listening to music, thereby improving the effectiveness and conversion efficiency of song playback.

[0152] The second type of layout style: The first type of layout style is a pre-configured typesetting style based on the song style, and the song style is determined based on the basic information of the song. The first type of layout style includes the pre-configured basic song information and the display color of the song function controls, the display font of the basic song information, the display effects of the lyrics, and the display effects contained in the song background image.

[0153] The layout style of the song playback information in the first layout style is a layout style pre-set by the technical staff, the display color of the song basic information and the song function control is the display color that matches the song style, the display font of the song basic information is the display font that matches the song style, the display effect of the lyrics is the display effect that matches the song style, and the display effect contained in the song background image is the display effect that matches the song style. The display color can be any color in the color library, the display font can be any font in the font library, the display effect of the lyrics includes at least one of the following: the display effect that appears word by word, the display effect that appears sentence by sentence, the display effect of the lyrics flashing, the display effect of the lyrics swimming, and the display effect contained in the song background image includes at least one of the following: the display effect of the background flowing, the display effect of the background playing video clips, and the display effect of the background changing image.

[0154] For example, if the style of the first song is a relaxed and natural song style, the display color of the basic information of the song and the song function controls can be set to white, the display font of the basic information of the song can be set to Songti, the display animation of the lyrics can be set to a display animation that appears word by word, and the display animation contained in the song background image can be set to a display animation of a flowing background.

[0155] In the second typesetting style, the first typesetting style includes: the song cover image, song title and singer name are located in the left area at the bottom of the song playback interface in horizontal screen format; the lyrics are located in the middle area of ​​the song playback interface in horizontal screen format; the song function controls are located in the right area at the bottom of the song playback interface in horizontal screen format; the song background image serves as the background of the song playback interface in horizontal screen format.

[0156] The present application does not limit the above-mentioned division ratio of the left area and the right area, and the division ratio of the middle area and the bottom area. For example, the division ratio of the left area and the right area is 1:1, and the division ratio of the middle area and the bottom area is 3:1.

[0157] The arrangement position of the song playing information indicated by the second type of layout style in the song playing interface can be referred to Fig.10 As shown, in the horizontal screen song playing interface 1000, the horizontal screen song cover image, song basic information, song function controls and song background image of the first song are displayed. The song cover image 1002, the song name and the singer name 1003 are located in the left area at the bottom of the horizontal screen song playing interface 1000, the lyrics 1001 are located in the middle area of ​​the horizontal screen song playing interface 1000, the song function controls 1004 are located in the right area at the bottom of the horizontal screen song playing interface 1000, and the song background image 1005 serves as the background of the horizontal screen song playing interface 1000. Fig.10 Schematic diagrams showing three display effects, Fig.10 The display effect of lyrics 1001 in (1) of the figure is similar to Fig.10 The display effect of lyrics 1006 in (2) of FIG. 1 , and Fig.10 The display effect of lyrics 1008 in (3) is different, and Fig.10 The display effect included in the song background image 1005 of Figure (1) is Fig.10 The display effects included in the song background image 1007 of FIG. (2), and Fig.10 The display effects included in the song background image 1009 in Figure (3) are different.

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

[0159] The third type of layout style: The first type of layout style is a pre-configured typesetting style based on the style of the song background image. The first type of layout style includes pre-configured display colors of song basic information and song function controls, display fonts of song basic information and display styles of song cover images. The display style of the song cover image includes a display style in the form of a record.

[0160] The layout style of the song playback information in the first layout style is a layout style pre-set by a technician, the display color of the song basic information and the song function control is a display color that matches the style of the song background image, the display font of the song basic information is a display font that matches the style of the song background image, and the display style of the song cover image is a display style that matches the style of the song background image. The display color can be any color in the color library, the display font can be any font in the font library, and the display style of the song cover image can be any form of display style, exemplarily including a display style in the form of a record.

[0161] Exemplarily, if the song style of the first song is a relaxed and natural song style, the display color of the song basic information and the song function control can be set to white, the display font of the song basic information can be set to Songti, and the display style of the song cover image can be set to a record-style display style.

[0162] In the third typesetting style, the first typesetting style includes: the song cover image is located on the left side of the song playing interface in landscape format; the song title and singer name are located in the top area on the right side of the song playing interface in landscape format; the lyrics are located in the middle area on the right side of the song playing interface in landscape format; the song function controls are located in the bottom area on the right side of the song playing interface in landscape format; the song background image serves as the background of the song playing interface in landscape format.

[0163] The arrangement position of the song playing information indicated by the third type of layout style in the song playing interface can be referred to Fig.11 As shown, in the horizontal screen song playing interface 1100, the horizontal screen song cover image, song basic information, song function controls and song background image of the first song are displayed. The arrangement position of the song playing information in the song playing interface is the same as the arrangement position of the song playing information in the song playing interface in the first type of layout style. Fig.11 A schematic diagram showing two display styles of song cover images, Fig.11 The display style 1101 of the song cover image in FIG. (1) is different from Fig.11 The display style 1102 of the song cover image in Figure (2) is different.

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

[0165] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0166] Please refer to Fig.12 , which shows a block diagram of an interface display device in a music application provided by an embodiment of the present application. The device has the function of implementing the interface display method in the above-mentioned music application, and the 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 set in the terminal device. Fig.12 As shown, the device 1200 may include: a play display module 1210 , an interface switching module 1220 and an information display module 1230 .

[0167] The play display module 1210 is used to display a song play interface in a vertical screen format, in which the song play information of the first song in a vertical screen format is displayed.

[0168] The interface switching module 1220 is used to switch the vertical screen song playing interface to the horizontal screen song playing interface in response to the switching operation on the song playing interface.

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

[0170] In some embodiments, the information display module 1230 is used to:

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

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

[0173] In some embodiments, the song function control includes a style switching control; the device 1200 also includes a style switching module, the style switching module is used to:

[0174] In response to an operation on the style switching control, displaying at least one candidate layout style of the song playing information;

[0175] In response to an operation of selecting a second layout style from the at least one candidate layout style, in the horizontal song playback interface, the horizontal song playback information of the first song is displayed in the second layout style.

[0176] In some embodiments, the basic song information includes: song title, singer name and lyrics; the first layout style is a layout style pre-configured 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 display color of the basic song information and the song function control, the display font of the basic song information, the display animation of the lyrics and the display animation included in the song background image;

[0177] The first layout style includes: the song cover image, the song title and the singer name are located in the left area at the bottom of the song playback interface in the horizontal screen format; the lyrics are located in the middle area of ​​the song playback interface in the horizontal screen format; the song function controls are located in the right area at the bottom of the song playback interface in the horizontal screen format; the song background image serves as the background of the song playback interface in the horizontal screen format.

[0178] In some embodiments, the basic song information includes: song title, singer 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 color of the basic song information and the song function control, the display font of the basic song information and the display style of the song cover image, and the display style of the song cover image includes a display style in the form of a record;

[0179] The first layout style includes: the song cover image is located on the left side of the song playback interface in the horizontal screen format; the song title and the singer name are located in the top area on the right side of the song playback interface in the horizontal screen format; the lyrics are located in the middle area on the right side of the song playback interface in the horizontal screen format; the song function controls are located in the bottom area on the right side of the song playback interface in the horizontal screen format; the song background image serves as the background of the song playback interface in the horizontal screen format.

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

[0181] In response to an operation on a first cover image, displaying a song selection interface in a horizontal screen format, wherein the first cover image is a song cover image of the first song, and the song selection interface displays a song cover image of at least one candidate song;

[0182] In response to the operation of selecting the second cover image among the song cover images of the at least one candidate song, the song playback information of the second song is displayed in the horizontal screen song playback interface, and the second cover image is the song cover image of the second song.

[0183] In some embodiments, a song spectrum animation is displayed in the song background image, and the song spectrum animation is used to display the music rhythm of the first song in a graphical form.

[0184] In some embodiments, the apparatus further comprises a pattern generation module, wherein the pattern generation module is configured to:

[0185] Performing a fast Fourier transform on the audio data of the first song to obtain frequency domain data of the audio data;

[0186] Acquire frequency band data in a first frequency band from the frequency domain data;

[0187] Performing filtering and smoothing processing on the frequency band data of the first frequency band to obtain processed frequency band data;

[0188] The processed frequency band data is rendered to obtain the song spectrum dynamic effect.

[0189] In some embodiments, the style generation module is used to:

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

[0191] Determine a first pixel among the pixels according to the color attributes of the pixels, wherein the first pixel is a color having a significant display effect in the song cover image;

[0192] Determine a first display color and a second display color according to the color attribute of the first pixel, wherein the first display color is the display color of the basic information of the song and the song function control, and the second display color is the display color of the song background image;

[0193] Displaying the basic song information and the song function control respectively according to the preset transparency corresponding to the basic song information and the song function control, and the first display color;

[0194] The song background image is obtained according to the second display color and the song spectrum dynamic effect in the song background image.

[0195] In some embodiments, the style generation module is used to:

[0196] According to the chroma and saturation of each pixel, each pixel is divided into a chroma interval and a saturation interval corresponding to the pixel, so as to obtain at least one chroma interval and at least one saturation interval, wherein the at least one chroma interval has the same interval length, and the at least one saturation interval has the same interval length;

[0197] Acquire at least one pixel that is in the chroma interval with the largest number of pixels and in the saturation interval with the largest number of pixels;

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

[0199] In some embodiments, the style generation module is used to:

[0200] Determine a pixel with the highest brightness among the at least one pixel as the first pixel;

[0201] or,

[0202] The pixel having the largest number of the same color attributes among the at least one pixel is determined as the first pixel.

[0203] In some embodiments, the style generation module is used to:

[0204] determining the chromaticity of the first pixel as the chromaticity of the first display color and the chromaticity of the second display color;

[0205] Determining a preset first brightness as the brightness of the first display color, and determining a preset second brightness as the brightness of the second display color;

[0206] determining the saturation of the first display color and the saturation of the second display color according to the saturation of the first pixel;

[0207] The first display color is obtained according to the saturation of the first display color, the chroma of the first display color, and the brightness of the first display color, and the second display color is obtained according to the saturation of the second display color, the chroma of the second display color, and the brightness of the second display color.

[0208] In some embodiments, the style generation module is used to:

[0209] When the saturation of the first pixel is within a first saturation interval, 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 a lower limit value of the first saturation interval, the lower limit value of the first saturation interval is determined as the saturation of the first display color; when the saturation of the first pixel is greater than an upper limit value of the first saturation interval, the upper limit value of the first saturation interval is determined as the saturation of the first display color;

[0210] When the saturation of the first pixel is in the second saturation interval, 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 value of the second saturation interval, the lower limit value of the second saturation interval is determined as the saturation of the second display color; when the saturation of the first pixel is greater than the upper limit value of the second saturation interval, the upper limit value of the second saturation interval is determined as the saturation of the second display color.

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

[0212] In the case where the chroma of the first pixel is in the first chroma interval, if the saturation of the first pixel is in the third saturation interval, 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 a lower limit value of the third saturation interval, the lower limit value of the third saturation interval is determined as the saturation of the first display color; if the saturation of the first pixel is greater than an upper limit value of the third saturation interval, the upper limit value of the third saturation interval is determined as the saturation of the first display color;

[0213] When the chroma of the first pixel is in the second chroma interval, if the saturation of the first pixel is in the fourth saturation interval, 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 value of the fourth saturation interval, the lower limit value of the fourth saturation interval is determined as the saturation of the second display color; if the saturation of the first pixel is greater than the upper limit value of the fourth saturation interval, the upper limit value of the fourth saturation interval is determined as the saturation of the second display color.

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

[0215] When one of the rotation angles of the deflection angles reaches a first threshold, the step of switching the vertical screen song playing interface to a horizontal screen song playing interface is executed.

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

[0217] Please refer to Fig.13 , which shows a block diagram of a terminal device 1300 provided in one embodiment of the present application. The terminal device 1300 may be any electronic device with data calculation, processing and storage functions. The terminal device 1300 may be used to implement the interface display method in the music application provided in the above embodiment.

[0218] Typically, the terminal device 1300 includes: a processor 1301 and a memory 1302 .

[0219] The processor 1301 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1301 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), and PLA (Programmable Logic Array). The processor 1301 may also include a main processor and a coprocessor. The main processor is a processor for processing data in an awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in a standby state. In some embodiments, the processor 1301 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1301 may also include an AI processor, which is used to process computing operations related to machine learning.

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

[0221] Those skilled in the art will understand that Fig.13 The structure shown in the figure does not constitute a limitation on the terminal device 1300, and may include more or fewer components than shown in the figure, or combine certain components, or adopt a different component arrangement.

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

[0223] In an exemplary embodiment, a computer program product is also provided, the computer program product includes a computer program, the computer program is stored in a computer-readable storage medium. The processor of the terminal device reads the computer program from the computer-readable storage medium, and the processor executes the computer program, so that the terminal device executes the interface display method in the above-mentioned music application.

[0224] It should be understood that the "multiple" mentioned in this article refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. In addition, the step numbers described in this article only illustrate a possible execution sequence between the steps. In some other embodiments, the above steps may not be executed in the order of the numbers, such as two steps with different numbers are executed at the same time, or two steps with different numbers are executed in the opposite order to the diagram. The embodiments of the present application are not limited to this.

[0225] The above description is only an exemplary embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. A method for displaying an interface in a music application, characterized in that: The method comprises: Displaying a song playing interface in a vertical screen format, wherein the song playing interface in the vertical screen format displays song playing information of the first song in a vertical screen format; In response to a switching operation on the song playing interface, the song playing interface in the vertical screen format is switched to a song playing interface in the horizontal screen format; In the horizontal screen song playing interface, the horizontal screen song playing information of the first song is displayed, and the song playing information includes at least one of the following: song cover image, song basic information, song function control, and song background image.

2. The method according to claim 1, characterized in that The displaying of the song playing information of the first song in the horizontal screen format in the song playing interface includes: In the horizontal song playback interface, the horizontal song 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, characterized in that The basic information of the song includes: song title, singer name and lyrics; The first typesetting style includes: The song cover image is located on the left side of the song playing interface in the horizontal screen format; The song title and the singer name are located in the top area on the right side of the song playing interface in the horizontal screen format; The lyrics are located in the middle area on the right side of the song playing interface in the horizontal screen format; The song function control is located in the bottom area on the right side of the song playing interface in the horizontal screen format; The song background image serves as the background of the song playing interface in the horizontal screen format.

4. The method according to claim 2, characterized in that: The song function control includes a style switching control; the method further includes: In response to an operation on the style switching control, displaying at least one candidate layout style of the song playing information; In response to an operation of selecting a second layout style from the at least one candidate layout style, in the horizontal song playback interface, the horizontal song playback information of the first song is displayed in the second layout style.

5. The method according to claim 2, characterized in that: The basic information of the song includes: song title, singer name and lyrics; The first layout style is a layout style pre-configured based on a song style, the song style is determined based on the song basic information, and the first layout style includes the pre-configured song basic information and display color of the song function control, the display font of the song basic information, the display animation of the lyrics, and the display animation included in the song background image; The first typesetting style includes: The song cover image, the song title and the singer name are located in the left area at the bottom of the song playing interface in the horizontal screen format; The lyrics are located in the middle area of ​​the song playing interface in the horizontal screen format; The song function control is located in the right area at the bottom of the song playing interface in the horizontal screen format; The song background image serves as the background of the song playing interface in the horizontal screen format.

6. The method according to claim 2, characterized in that The basic information of the song includes: song title, singer 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 pre-configured display colors of the song basic information and the song function controls, display fonts of the song basic information and display styles of the song cover image, and the display style of the song cover image includes a display style in the form of a record; The first typesetting style includes: The song cover image is located on the left side of the song playing interface in the horizontal screen format; The song title and the singer name are located in the top area on the right side of the song playing interface in the horizontal screen format; The lyrics are located in the middle area on the right side of the song playing interface in the horizontal screen format; The song function control is located in the bottom area on the right side of the song playing interface in the horizontal screen format; The song background image serves as the background of the song playing interface in the horizontal screen format.

7. The method according to claim 1, characterized in that The method further comprises: In response to an operation on a first cover image, displaying a song selection interface in a horizontal screen format, wherein the first cover image is a song cover image of the first song, and the song selection interface displays a song cover image of at least one candidate song; In response to the operation of selecting the second cover image among the song cover images of the at least one candidate song, the song playback information of the second song is displayed in the horizontal screen song playback interface, and the second cover image is the song cover image of the second song.

8. The method according to claim 1, characterized in that The song background image displays a song spectrum dynamic effect, and the song spectrum dynamic effect is used to display the music rhythm of the first song in a graphical form.

9. The method according to claim 8, characterized in that The method further comprises: Performing a fast Fourier transform on the audio data of the first song to obtain frequency domain data of the audio data; Acquire frequency band data in a first frequency band from the frequency domain data; Performing filtering and smoothing processing on the frequency band data of the first frequency band to obtain processed frequency band data; The processed frequency band data is rendered to obtain the song spectrum dynamic effect.

10. The method according to claim 1, characterized in that The method further comprises: Acquire color attributes of each pixel in the song cover image, wherein the color attributes include at least one of the following: hue, saturation, and brightness; Determine a first pixel among the pixels according to the color attributes of the pixels, wherein the first pixel is a color having a significant display effect in the song cover image; Determine a first display color and a second display color according to the color attribute of the first pixel, wherein the first display color is the display color of the basic information of the song and the song function control, and the second display color is the display color of the song background image; Displaying the basic song information and the song function control respectively according to the preset transparency corresponding to the basic song information and the song function control, and the first display color; The song background image is obtained according to the second display color and the song spectrum dynamic effect in the song background image.

11. The method according to claim 10, characterized in that The step of determining a first pixel among the pixels according to the color attributes of the pixels includes: According to the chroma and saturation of each pixel, each pixel is divided into a chroma interval and a saturation interval corresponding to the pixel, so as to obtain at least one chroma interval and at least one saturation interval, wherein the at least one chroma interval has the same interval length, and the at least one saturation interval has the same interval length; Acquire at least one pixel that is in the chroma interval with the largest number of pixels and in the saturation interval with the largest number of pixels; The first pixel is determined based on the at least one pixel.

12. The method according to claim 11, characterized in that The determining the first pixel according to the at least one pixel comprises: Determine a pixel with the highest brightness among the at least one pixel as the first pixel; or, The pixel having the largest number of the same color attributes among the at least one pixel is determined as the first pixel.

13. The method according to claim 10, characterized in that The determining the first display color and the second display color according to the color attribute of the first pixel includes: determining the chromaticity of the first pixel as the chromaticity of the first display color and the chromaticity of the second display color; Determining a preset first brightness as the brightness of the first display color, and determining a preset second brightness as the brightness of the second display color; determining the saturation of the first display color and the saturation of the second display color according to the saturation of the first pixel; The first display color is obtained according to the saturation of the first display color, the chroma of the first display color, and the brightness of the first display color, and the second display color is obtained according to the saturation of the second display color, the chroma of the second display color, and the brightness of the second display color.

14. The method according to claim 13, characterized in that The determining the saturation of the first display color and the saturation of the second display color according to the saturation of the first pixel includes: When the saturation of the first pixel is within a first saturation interval, 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 a lower limit value of the first saturation interval, the lower limit value of the first saturation interval is determined as the saturation of the first display color; when the saturation of the first pixel is greater than an upper limit value of the first saturation interval, the upper limit value of the first saturation interval is determined as the saturation of the first display color; When the saturation of the first pixel is in the second saturation interval, 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 value of the second saturation interval, the lower limit value of the second saturation interval is determined as the saturation of the second display color; when the saturation of the first pixel is greater than the upper limit value of the second saturation interval, the upper limit value of the second saturation interval is determined as the saturation of the second display color.

15. The method according to claim 13, characterized in that The method further comprises: In the case where the chroma of the first pixel is in the first chroma interval, if the saturation of the first pixel is in the third saturation interval, 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 a lower limit value of the third saturation interval, the lower limit value of the third saturation interval is determined as the saturation of the first display color; if the saturation of the first pixel is greater than an upper limit value of the third saturation interval, the upper limit value of the third saturation interval is determined as the saturation of the first display color; When the chroma of the first pixel is in the second chroma interval, if the saturation of the first pixel is in the fourth saturation interval, 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 value of the fourth saturation interval, the lower limit value of the fourth saturation interval is determined as the saturation of the second display color; if the saturation of the first pixel is greater than the upper limit value of the fourth saturation interval, the upper limit value of the fourth saturation interval is determined as the saturation of the second display color.

16. The method according to any one of claims 1 to 15, characterized in that The switching operation is an operation of rotating the terminal device, and the switching operation is used to control the deflection angle of the gyroscope of the terminal device to change, and the deflection angle includes the rotation angles corresponding to the three axes; the method also includes: When one of the rotation angles of the deflection angles reaches a first threshold, the step of switching the vertical screen song playing interface to a horizontal screen song playing interface is executed.

17. An interface display device in a music application, characterized in that: The device comprises: A playback display module, used to display a song playback interface in a vertical screen format, wherein the song playback interface in the vertical screen format displays song playback information of the first song in a vertical screen format; An interface switching module, for switching the song playing interface in the vertical screen format to the song playing interface in the horizontal screen format in response to a switching operation on the song playing interface; An information display module is used to display the song playback information of the first song in the horizontal screen format in the song playback interface, 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.

18. A terminal device, characterized in that: The terminal device includes a processor and a memory, wherein a computer program is stored in the memory, and the computer program is loaded and executed by the processor to implement the interface display method in the music application as described in any one of claims 1 to 16.

19. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which is 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 16.

20. A computer program product, characterized in that The computer program product includes a computer program, which is loaded and executed by a processor to implement the interface display method in the music application as described in any one of claims 1 to 16.

Images