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

Beat widget

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

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

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

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.

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

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

Tutorial files

2020/06/22 – Updated to Unreal Engine 4.24

You may also like:

UE4 spectrum visualizerOutline effect (Part 1)

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!