Beat_2_featured

in Tutorials, UE4

UE4 beat visualizer

With this tutorial we are going to add a beat tracking widget to our previous spectrum visualizer. We are going to improve this visualizer adding the average bars too and a song selector.

Part 1: Setting up project paths
Part 2: Using the library
Part 3: Frequency spectrum
Part 4: UE4 spectrum visualizer
Part 5: Beat tracking algorithm
Part 6: UE4 beat visualizer


We can start adding the function calls to our blueprint wrapper AudioManager. The initialization function of beat detector will calculate the limits of the beat bands using the sampling rate of the song, so we need to call this function after the PlaySound function. The GetBeat function will be called with the Tick Event.

AudioManager.h

1
2
3
4
5
6
7
public:
	...
	UFUNCTION(BlueprintCallable, Category = Init)
		void InitBeatDetector();		
	...
	UFUNCTION(BlueprintCallable, Category = Access)
		void GetBeat(TArray& frequencyValues, TArray& frequencyAverageValues, bool& isBass, bool& isLowM);

AudioManager.cpp

1
2
3
4
5
6
7
8
9
10
11
void UAudioManager::InitBeatDetector()
{
	return _soundManager->initializeBeatDetector();
}
 
void UAudioManager::GetBeat(TArray<float>& frequencyValues, TArray<float>& frequencyAverageValues, bool& isBass, bool& isLowM)
{
	frequencyValues.Init(0.0, 2);
	frequencyAverageValues.Init(0.0, 2);
	_soundManager->getBeat(frequencyValues.GetData(), frequencyAverageValues.GetData(), isBass, isLowM);
}

Blueprint

To visualize the beat detection we are going to add a new widget to our player
content_folder

Beat widget

This widget apply an animation in the background image opacity to be triggered with the beat onset.
UI_Beat_widget
UI_beat_wanim
UI_Beat_flash

The last step is to integrate the beat widget with the player.
UI_Display_beat

The initialization must be done each time that a new sound is played to update the sampling rate of our AudioManager
UI_Display_Play

When a beat is detected we need to call the flash function of the corresponding beat widget. We have added a 2-bar spectrum, just above the beat widgets, to track the average and current values of the beat ranges, we can update their values at this point too.
UI_Display_Update_beat

We can put the GetBeat call into the UpdateVisualizers function after the Update and GetSpectrum_ calls.
UI_Display_Update
UI_player_tickEvent

Now we have a player with the previous spectrum visualizers and two new beat components to track the bass range and low midrange.

youtube_beattracking

Tutorial files:

github

UE4 Project

Download

Download C++ Sources

Download

Download Blueprints


Support this blog!

For the past year I've been dedicating more of my time to the creation of tutorials, mainly about game development. If you think these posts have either helped or inspired you, please consider supporting this blog. Thank you so much for your contribution!


Write a Comment

Comment

nine + seventeen =