UWP簡單示例（一）：快速合成音樂MV

說明

　　本文發佈時間較早，最新動態請關注 TypeScript 版本。（2019 年 3 月 注）

在線演示： 音頻可視化（TypeScript）

準備

　　IDE：Visual Studio

　　Nuget包：SharpDx.XAudio2

　　Nuget包：Win2D.UWP

　　瞭解學習：Win2D 官方博客

　　瞭解學習：Win2D 官方示例

第一節 波形

　　獲取實時時域數據。

Imports SharpDX.Multimedia
Imports SharpDX.XAudio2
Public Class AudioPlayer
    Public Event WavePlaying(e As WavePlayingEventArgs)
    Public Property Device As XAudio2
    Public Property Voice As SourceVoice
    Private CurrentFormat As WaveFormat
    Private CurrentBuffer As AudioBuffer
    Private PacketsInfo As UInteger()
    Public Sub New()
        Device = New XAudio2()
        Device.StartEngine()
        Dim mv As New MasteringVoice(Device)
    End Sub
    Public Async Function LoadFile(fileName As String) As Task(Of Boolean)
        Try
            Voice = Await CreateVoiceFromFile(Device, fileName)
            LoadBuffer()
            Return True
        Catch
            Return False
        End Try
    End Function
    Public Sub Play(Optional volume As Single = 1.0F)
        Voice?.SetVolume(volume)
        Voice?.Start()
        ReadBuffer()
    End Sub
    Public Sub [Stop]()
        Voice?.Stop()
    End Sub
    Protected Async Function CreateVoiceFromFile(device As XAudio2, fileName As String) As Task(Of SourceVoice)
        Dim file = Await Package.Current.InstalledLocation.GetFileAsync(fileName)
        Dim streamWithContentType = Await file.OpenReadAsync()
        Dim st = streamWithContentType.AsStreamForRead()
        Using stream = New SoundStream(st)
            CurrentFormat = stream.Format
            CurrentBuffer = New AudioBuffer() With {
            .Stream = stream.ToDataStream(),
            .AudioBytes = CInt(stream.Length),
            .Flags = BufferFlags.EndOfStream
        }
            PacketsInfo = stream.DecodedPacketsInfo
        End Using
        Dim sourceVoice = New SourceVoice(device, CurrentFormat, True)
        Return sourceVoice
    End Function
    Protected Sub LoadBuffer()
        Voice?.FlushSourceBuffers()
        Voice?.SubmitSourceBuffer(CurrentBuffer, PacketsInfo)
    End Sub
    ''' <summary>
    ''' 從流中讀取當前播放的數據
    ''' </summary>
    Private Async Sub ReadBuffer()
        Try
            Dim count As Integer = CurrentFormat?.AverageBytesPerSecond / 10
            While Voice.State.BuffersQueued > 0
                If Voice.State.SamplesPlayed * CurrentFormat.BlockAlign > CurrentBuffer.Stream.Position + count Then
                    Dim byteArr(count - 1) As Byte
                    Await CurrentBuffer.Stream.ReadAsync(byteArr, 0, count)
                    RaiseEvent WavePlaying(New WavePlayingEventArgs(byteArr, CurrentFormat))
                Else
                    Await Task.Delay(10)
                End If
            End While
        Catch
            Return
        End Try
    End Sub
    Public Function Position() As Integer
        Return Voice.State.SamplesPlayed / CurrentFormat.SampleRate
    End Function
    Protected Overrides Sub Finalize()
        Try
            Dispose(False)
        Finally
            MyBase.Finalize()
        End Try
    End Sub
    Public Sub Dispose()
        Dispose(True)
        GC.SuppressFinalize(Me)
    End Sub
    Private Sub Dispose(isDisposing As Boolean)
        If Not isDisposing Then
            Return
        End If
        Voice.DestroyVoice()
        Voice.Dispose()
        CurrentBuffer.Stream.Dispose()
    End Sub
End Class

VB.NET

//因爲在線轉換工具對異步代碼段支持很差，該處代碼請參考VB.

C#

 

圖1-1 實時波譜

第二節 頻譜

　　經過快速傅里葉變換將時域信號轉換爲頻域信號。

    ''' <summary>
    ''' 快速傅里葉變換
    ''' </summary>
    ''' <param name="data">指定的數據</param>
    ''' <param name="count"></param>
    ''' <returns></returns>
    Public Shared Function FFT(ByVal data() As Single, ByVal count As Integer) As Single() '快速傅里葉變換
        Dim fftCount As Integer = count
        Dim j As Integer
        Dim k As Integer
        Dim NM1 As Integer
        Dim ND2 As Integer
        Dim M, L, LE, LE2, IP, JM1 As Integer
        Dim TR, TI, SR, SI, UR, UI As Double
        Dim IMX(fftCount - 1) As Double
        Dim REX(fftCount - 1) As Double
        Dim n As Integer = fftCount
        Array.Copy(data, REX, fftCount)
        NM1 = n - 1
        ND2 = n / 2
        M = CInt(Math.Log(n) / Math.Log(2))
        j = ND2

        For i = 1 To n - 2
            If i < j Then
                TR = REX(j)
                TI = IMX(j)
                REX(j) = REX(i)
                IMX(j) = IMX(i)
                REX(i) = TR
                IMX(i) = TI
            End If
            k = ND2
            While (k <= j)
                j = j - k
                k = k / 2
            End While
            j = j + k
        Next i

        For L = 1 To M
            LE = CInt(2 ^ L)
            LE2 = LE / 2
            UR = 1
            UI = 0
            SR = Math.Cos(Math.PI / LE2)
            SI = -Math.Sin(Math.PI / LE2)
            For j = 1 To LE2
                JM1 = j - 1
                For i = JM1 To NM1 Step LE
                    IP = i + LE2
                    TR = REX(IP) * UR - IMX(IP) * UI
                    TI = REX(IP) * UI + IMX(IP) * UR
                    REX(IP) = REX(i) - TR
                    IMX(IP) = IMX(i) - TI
                    REX(i) = REX(i) + TR
                    IMX(i) = IMX(i) + TI
                Next i
                TR = UR
                UR = TR * SR - UI * SI
                UI = TR * SI + UI * SR
            Next j
        Next L
        '
        Dim w() As Single
        ReDim w(fftCount / 2)    '取有效值
        ''公式:F=Kf/N F=頻率;k=位置;f=取樣頻率;N=樣本數;有效數據(N/2+1)個.
        For i = 0 To fftCount / 2
            w(i) = Math.Sqrt(REX(i) * REX(i) + IMX(i) * IMX(i))
        Next
        Return w
    End Function

VB.NET

/// <summary>
/// 快速傅里葉變換
/// </summary>
/// <param name="data">指定的數據</param>
/// <param name="count"></param>
/// <returns></returns>
public static float[] FFT(float[] data, int count)
{
    //快速傅里葉變換
    int fftCount = count;
    int j = 0;
    int k = 0;
    int NM1 = 0;
    int ND2 = 0;
    int M = 0;
    int L = 0;
    int LE = 0;
    int LE2 = 0;
    int IP = 0;
    int JM1 = 0;
    double TR = 0;
    double TI = 0;
    double SR = 0;
    double SI = 0;
    double UR = 0;
    double UI = 0;
    double[] IMX = new double[fftCount];
    double[] REX = new double[fftCount];
    int n = fftCount;
    Array.Copy(data, REX, fftCount);
    NM1 = n - 1;
    ND2 = n / 2;
    M = Convert.ToInt32(Math.Log(n) / Math.Log(2));
    j = ND2;

    for (i = 1; i <= n - 2; i++) {
        if (i < j) {
            TR = REX[j];
            TI = IMX[j];
            REX[j] = REX[i];
            IMX[j] = IMX[i];
            REX[i] = TR;
            IMX[i] = TI;
        }
        k = ND2;
        while ((k <= j)) {
            j = j - k;
            k = k / 2;
        }
        j = j + k;
    }

    for (L = 1; L <= M; L++) {
        LE = Convert.ToInt32(Math.Pow(2, L));
        LE2 = LE / 2;
        UR = 1;
        UI = 0;
        SR = Math.Cos(Math.PI / LE2);
        SI = -Math.Sin(Math.PI / LE2);
        for (j = 1; j <= LE2; j++) {
            JM1 = j - 1;
            for (i = JM1; i <= NM1; i += LE) {
                IP = i + LE2;
                TR = REX[IP] * UR - IMX[IP] * UI;
                TI = REX[IP] * UI + IMX[IP] * UR;
                REX[IP] = REX[i] - TR;
                IMX[IP] = IMX[i] - TI;
                REX[i] = REX[i] + TR;
                IMX[i] = IMX[i] + TI;
            }
            TR = UR;
            UR = TR * SR - UI * SI;
            UI = TR * SI + UI * SR;
        }
    }
    //
    float[] w = null;
    w = new float[fftCount / 2 + 1];
    //取有效值
    //'公式:F=Kf/N F=頻率;k=位置;f=取樣頻率;N=樣本數;有效數據(N/2+1)個.
    for (i = 0; i <= fftCount / 2; i++) {
        w[i] = Math.Sqrt(REX[i] * REX[i] + IMX[i] * IMX[i]);
    }
    return w;
}

C#

 

圖2-1 實時頻譜

第三節 簡化

　　簡化頻域數據，將相鄰的若干組值相加後取平均值。

　　頻譜也能夠繪製成圓環狀。

    Public DataWave As ConcurrentQueue(Of Single)
    Public DataFFT() As Single
    Public DataFFTExtra() As Single
    Private Sub CalcFFT()
        Dim count As Integer = 2048 '最小時域數據的長度
        If DataWave.Count < count Then Return
        Dim tempD(count - 1) As Single
        For i = 0 To count - 1
            tempD(i) = DataWave(DataWave.Count - count + i)
        Next
        DataFFT = SignalMath.FFT(tempD, count) '原始頻譜

        Dim extraCount As Integer = 64 '簡化的長度
        Dim TempList As New List(Of Single)
        Dim sCount As Integer = DataFFT.Count / extraCount
        TempList.Add(0)
        For i = 1 To extraCount - 1
            Dim TempSingle As Single = 0
            For j = 0 To sCount - 1
                TempSingle += DataFFT(i * sCount + j)
            Next
            TempSingle = TempSingle / sCount / 10
            TempList.Add(TempSingle)
        Next
        DataFFTExtra = TempList.ToArray '簡化後的頻譜
        WaveSignal.Energy = DataFFTExtra.ToList.IndexOf(DataFFTExtra.Max) '不精確的基音位置
    End Sub

VB.NET

public ConcurrentQueue<float> DataWave;
public float[] DataFFT;
public float[] DataFFTExtra;
private void CalcFFT()
{
    int count = 2048;
    //最小時域數據的長度
    if (DataWave.Count < count)
        return;
    float[] tempD = new float[count];
    for (i = 0; i <= count - 1; i++) {
        tempD[i] = DataWave(DataWave.Count - count + i);
    }
    DataFFT = SignalMath.FFT(tempD, count);
    //原始頻譜

    int extraCount = 64;
    //簡化的長度
    List<float> TempList = new List<float>();
    int sCount = DataFFT.Count / extraCount;
    TempList.Add(0);
    for (i = 1; i <= extraCount - 1; i++) {
        float TempSingle = 0;
        for (j = 0; j <= sCount - 1; j++) {
            TempSingle += DataFFT[i * sCount + j];
        }
        TempSingle = TempSingle / sCount / 10;
        TempList.Add(TempSingle);
    }
    DataFFTExtra = TempList.ToArray();//簡化後的頻譜
}

C#

 

圖3-1 頻譜變形

第四節 場景

　　粒子

　　加入飛舞的粒子。粒子運動速度與實時音頻的基音大小相關。

　　若用貼圖取代圓點，可生成效果逼真的煙霧或者飛雪等場景。

Imports System.Numerics
Imports Windows.UI
''' <summary>
''' 粒子類，表示一個擁有加速度、加速度和位置矢量的抽象粒子
''' </summary>
Public Class Partical
    Public Property Location As Vector2 '位置矢量
    Public Property Velocity As Vector2 '速度
    Public Property Acceleration As Vector2 '加速度
    Public Property Mass As Single = 10.0 '質量大小
    Public Property Age As Single = 0 '生命週期
    Public Property Alpha As Single = 255
    Public Property Size As Single = 1
    Public Property Radius As Single = 0
    Public Property RadiusX As Single = 0
    Public Property RadiusY As Single = 0
    Public Property ImageSize As Single = 1 '粒子圖像的大小
    Public Property Color As Color '粒子顏色
    Public Shared Rnd As New Random
    ''' <summary>
    ''' 初始化一個粒子
    ''' </summary>
    Public Sub New(loc As Vector2)
        Location = loc
        Velocity = New Vector2(0, 0)
        Acceleration = New Vector2(0, 0)
    End Sub
    ''' <summary>
    ''' 指定的力做用於當前對象
    ''' </summary>
    ''' <param name="forceVec">指定的力</param>
    Public Sub ApplyForce(forceVec As Vector2)
        Acceleration = Acceleration + forceVec / Mass
    End Sub
    ''' <summary>
    ''' 更新粒子位置，重繪每幀圖像前調用該方法
    ''' </summary>
    Public Sub Move()
        Velocity += Acceleration * WaveSignal.Energy
        'Velocity.LimitMag(20)
        Location += Velocity '更新位置
        Acceleration = Vector2.Zero
    End Sub
    Public Sub StartNew(Loc As Vector2)
        Location = Loc
        Velocity.SetMag(0)
    End Sub
End Class

VB.NET

using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Numerics;
using Windows.UI;
/// <summary>
/// 粒子類，表示一個擁有加速度、加速度和位置矢量的抽象粒子
/// </summary>
public class Partical
{
    public Vector2 Location { get; set; }
    //位置矢量
    public Vector2 Velocity { get; set; }
    //速度
    public Vector2 Acceleration { get; set; }
    //加速度
    public float Mass { get; set; }
    //質量大小
    public float Age { get; set; }
    //生命週期
    public float Alpha { get; set; }
    public float Size { get; set; }
    public float Radius { get; set; }
    public float RadiusX { get; set; }
    public float RadiusY { get; set; }
    public float ImageSize { get; set; }
    //粒子圖像的大小
    public Color Color { get; set; }
    //粒子顏色
    public static Random Rnd = new Random();
    /// <summary>
    /// 初始化一個粒子
    /// </summary>
    public Partical(Vector2 loc)
    {
        Location = loc;
        Velocity = new Vector2(0, 0);
        Acceleration = new Vector2(0, 0);
    }
    /// <summary>
    /// 指定的力做用於當前對象
    /// </summary>
    /// <param name="forceVec">指定的力</param>
    public void ApplyForce(Vector2 forceVec)
    {
        Acceleration = Acceleration + forceVec / Mass;
    }
    /// <summary>
    /// 更新粒子位置，重繪每幀圖像前調用該方法
    /// </summary>
    public void Move()
    {
        Velocity += Acceleration * WaveSignal.Energy;//與基音位置相關
        //Velocity.LimitMag(20)
        Location += Velocity;
        //更新位置
        Acceleration = Vector2.Zero;
    }
    public void StartNew(Vector2 Loc)
    {
        Location = Loc;
        Velocity.SetMag(0);
    }
}

C#

　　背景

　　加入背景圖片。背景高斯模糊與實時音頻的基音大小相關。

　　也可讓背景隨機抖動或者旋轉。

    Private Sub DrawBackGround(DrawingSession As CanvasDrawingSession)
        Using cmdList = New CanvasCommandList(DrawingSession)
            Using dl = cmdList.CreateDrawingSession
                dl.DrawImage(ImageManager.GetResource(ImageResourceID.back1))
            End Using
            Using blur1 = New Effects.GaussianBlurEffect With {.Source = cmdList, .BlurAmount = 1 + WaveSignal.Energy / 10}
                DrawingSession.DrawImage(blur1)
            End Using
        End Using
    End Sub

VB.NET

private void DrawBackGround(CanvasDrawingSession DrawingSession)
{
    using (cmdList == new CanvasCommandList(DrawingSession)) {
        using (dl == cmdList.CreateDrawingSession) {
            dl.DrawImage(ImageManager.GetResource(ImageResourceID.back1));
        }
        using (blur1 == new Effects.GaussianBlurEffect {Source = cmdList,BlurAmount = 1 + WaveSignal.Energy / 10}) {
            DrawingSession.DrawImage(blur1);
        }
    }
}

C#

　　文字

　　加入歌曲名稱信息。

　　具體的文字效果由你設置，請參考 Win2D 的 Microsoft.Graphics.Canvas.Effects 文檔。

Imports Microsoft.Graphics.Canvas
Imports Windows.UI
Public Class StaticStringView
    Inherits TypedGameView(Of StaticString)
    Public Sub New(Target As StaticString)
        MyBase.New(Target)
    End Sub
    Public Overrides Sub Draw(DrawingSession As CanvasDrawingSession)
        Using cmdList = New CanvasCommandList(DrawingSession)
            Using dl = cmdList.CreateDrawingSession
                DrawText(dl)
            End Using
            Using blur1 = New Effects.GaussianBlurEffect With {.Source = cmdList, .BlurAmount = 3}
                DrawingSession.DrawImage(blur1)
                DrawingSession.DrawImage(cmdList)
            End Using
        End Using
    End Sub
    Dim TextFormat = New Text.CanvasTextFormat() With {.FontFamily = "微軟雅黑",
                                              .FontSize = 12,
                                              .HorizontalAlignment = Microsoft.Graphics.Canvas.Text.CanvasHorizontalAlignment.Center,
                                              .VerticalAlignment = Microsoft.Graphics.Canvas.Text.CanvasVerticalAlignment.Center}
    Public Sub DrawText(Dl As CanvasDrawingSession)
        Dl.DrawText(Target.Str, Target.Location, Colors.White, TextFormat)
    End Sub
End Class

VB.NET

using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using Microsoft.Graphics.Canvas;
using Windows.UI;
public class StaticStringView : TypedGameView<StaticString>
{
    public StaticStringView(StaticString Target) : base(Target)
    {
    }
    public override void Draw(CanvasDrawingSession DrawingSession)
    {
        using (cmdList == new CanvasCommandList(DrawingSession)) {
            using (dl == cmdList.CreateDrawingSession) {
                DrawText(dl);
            }
            using (blur1 == new Effects.GaussianBlurEffect {Source = cmdList,BlurAmount = 3}) {
                DrawingSession.DrawImage(blur1);
                DrawingSession.DrawImage(cmdList);
            }
        }
    }
     TextFormat = new Text.CanvasTextFormat {
        FontFamily = "微軟雅黑",
        FontSize = 12,
        HorizontalAlignment = Microsoft.Graphics.Canvas.Text.CanvasHorizontalAlignment.Center,
        VerticalAlignment = Microsoft.Graphics.Canvas.Text.CanvasVerticalAlignment.Center
    };
    public void DrawText(CanvasDrawingSession Dl)
    {
        Dl.DrawText(Target.Str, Target.Location, Colors.White, TextFormat);
    }
}

C#

圖4-1 最終效果

 

附錄

　　開源：MusicVideoGenerator （已失效）

　　相同類型的MV：

　　Over The Horizon

　　Tuesdays

　　Supernova(Original Mix)

　　Lovers

　　Life