Code Monkey home page Code Monkey logo

audiovisualizer's Introduction

Build status

Build status

Target Branch Status Recommended Nuget packages version
Current Release master Build status NuGet

Introduction

Image

The AudioAnalyzer UWP extension DLL contains a MF component and companion XAML controls that can provide realtime audio analysis information for visualization and other purposes. The library contains prebuilt controls implementing VU meters, a spectrum analyzer as well as a control that has a custom draw capability. This project is a continuation of the work here and originally here.

What's new

A large refactor has just made it's way to Master. This moves the native library from WRL onto C++/WinRT resulting in a drastic simplification of the COM boilerplate. Compared to the initial beta release there are also some further improvements.

Version 1.0.7

(click image to play video)

  • You can now insert analyzer both into MediaPlayer and AudioGraph pipeline
  • AudioAnalyzer itself is exposed so you can use it to generate data on audio frames from file as an example
  • There is a new data source SourceConverter that helps reshaping the visualization data and applying physics (combine channels, convert spectrum to logarithmic scale, apply rise and fall times)
  • There are 4 customizable built-in controls to display visualization
    • AnalogVUMeter mimics an analog VU meter with a scale and dial and takes input from RMS
    • DiscreteVUBar is a stacked bar of elements that lit up based on RMS and Peak data
    • SpectrumVisualizer is a multicolumn stacked bar of elements that take input from the spectrum data
    • CustomVisualizer is a Win2D custom draw control that allows to draw the visualization frame by frame

To learn more browse the documentation

Getting started

Installing the library

Download and install the AudioAnalyzer nuget package. Note this will also add a reference to Win2D to your project.

Install-Package UWPAudioVisualizer

for convenient use add namespace statement to your C# code as:

using AudioVisualizer;

add namespace statement and built in controls to your XAML code as:

<Page
    x:Class="App4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:visualizer="using:AudioVisualizer"
    mc:Ignorable="d">

    <Grid>
        <StackPanel>
            <visualizer:DiscreteVUBar />
            <visualizer:CustomVisualizer />
        </StackPanel>
    </Grid>
</Page>

Initializing the source

First you need to create the analyzer object, that implements IVisualizationSource interface which is basis to retrieve audio data.

To create visualization source you need to create PlaybackSource, you can create this from MediaPlayer or from AudioNode or MediaPlayer. With AudioNode the source will be available immediately however for MediaPlayer it will be created only when MediaPlayer will open source and start playing. When opening a new file a new source will be created - this means that if you use PlaybackSource with MediaPlayer you will need to monitor the SourceChanged event and assign the new source to the controls you are using.

partial class VisualizationPage : Page
{
    MediaPlayer _player;
    AudioVisualizer.PlaybackSource _source;

    public VisualizationPage()
    {
        _player = new MediaPlayer();
        _source = new PlaybackSource.CreateFromMediaPlayer(_player);
        _source.SourceChanged += Playback_SourceChanged;
	}

	private void Playback_SourceChanged(object sender, IVisualizationSource source)
    {
		vuMeter.Source = source;
		spectrumDisplay.Source = source;
		playPositionDisplay.Source = source;
    }

	private void Page_Loaded(object sender, RoutedEventArgs e)
    {
		vuMeter.Source = _source.VisualizationSource;
		spectrumDisplay.Source = _source.VisualizationSource;
		playPositionDisplay.Source = _source.VisualizationSource;
    }

}

Getting the data

Once you have a properly initialized IVisualizationSource you get the visualization data by calling GetData(). This method will return VisualizationDataFrame for the current audio being played or null if the current state of stream is stopped or if the analyzer is catching up processing for example due to seek operation. All controls have a source property, once you assign the source to the controls, they will pull and display data automatically.

audiovisualizer's People

Contributors

azure-pipelines[bot] avatar clarkezone avatar tonuv avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.