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

public:
	...
	UFUNCTION(BlueprintCallable, Category = Init)
		void InitBeatDetector();		
	...
	UFUNCTION(BlueprintCallable, Category = Access)
		void GetBeat(TArray& frequencyValues, TArray& frequencyAverageValues, bool& isBass, bool& isLowM);

AudioManager.cpp

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

2020/06/22 – Updated to Unreal Engine 4.24

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!

Leave a Reply for normal guy Cancel Reply

Write a Comment

Comment

    • Yes. One of the reasons to use a thirdparty sound library is to avoid the limitation of the UE4 native audio classes with cooked builds.