lvgl/demos/music
2024-05-27 06:46:48 +02:00
..
assets chore: update some code and docs to use v9 API (#5876) 2024-04-10 15:17:44 +08:00
lv_demo_music_list.c refactor(event): add _cb postfix to lv_obj_add_event() 2023-11-28 15:36:51 +01:00
lv_demo_music_list.h refactor(btn, img): rename btn to button and img to image 2023-09-14 20:12:31 +02:00
lv_demo_music_main.c fix(demo_music): fix the previous button in the music demo is not clickable (#5808) 2024-03-07 22:53:31 +08:00
lv_demo_music_main.h fix(grid,flex): fix compile errors when grid or flex is disabled (#5289) 2024-01-12 10:41:14 +08:00
lv_demo_music.c fix(benchmark): use the correct subject for performance data (#6237) 2024-05-27 06:46:48 +02:00
lv_demo_music.h arch merge lv_demos 2021-12-16 20:49:41 +01:00
README.md fix: fix typos (#4451) 2023-08-14 16:49:30 +02:00
screenshot1.gif arch merge lv_demos 2021-12-16 20:49:41 +01:00

Music player demo

Overview

The music player demo shows what kind of modern, smartphone-like user interfaces can be created on LVGL. It works the best with display with 480x272 or 272x480 resolution.

Music player demo with LVGL embedded GUI library

Run the demo

  • In lv_conf.h or equivalent places set LV_USE_DEMO_MUSIC 1
  • With LV_DEMO_MUSIC_AUTO_PLAY enabled a ~60 sec demo will be played.
  • After lv_init() and initializing the drivers call lv_demo_music()

How the spectrum animation works

  • assets/spectrum.py creates an array of spectrum values from a music. 4 band are created with 33 samples/sec: bass, bass-mid, mid, mid-treble.
  • The spectrum meter UI does the following:
    • Zoom the album cover proportionality to the current bass value
    • Display the 4 bands on the left side of a circle by default at 0°, 45°, 90°, 135°
    • Add extra bars next to the "main bars" with a cosine shape. Add more bars for the lower bands.
    • If there is a large enough bass, add a random offset to the position of the bars. E.g. start from 63° instead of 0°. (bars greater than 180° start again from 0°)
    • If there is no bass, add 1 to the offset of the bars (it creates a "walking" effect)
    • Mirror the bars to the right side of the circle

Using spectrum.py

  • install librosa with pip3 install librosa
  • run python sectrum.py my_file.mp3
  • see the result in spectrum.h