How do I add sound to UWP storyboard animation

Question

I am trying to play a sound with my animation. I already have a working animation using a StoryBoard and DoubleAnimation. Does anyone know how to add a sound to that?

Microsoft documentation suggests using a MediaTimeline class:

There are two ways to associate a Timeline to a MediaElement using a MediaTimeline:

Inside of a Storyboard, when a MediaTimeline is targets [sic] a MediaElement, a MediaClock will be created and assigned to the MediaElement’s associated player. See How to: Control a MediaElement by Using a Storyboard for an example;

By explicitly creating a MediaClock from a MediaTimeline and assigning it to a MediaElement.

Stack Overflow answers also suggest using MediaTimeline.

Problem is that MediaTimeline class does not exist in Windows.Media namespace for UWP.

My animation code looks like this:

DoubleAnimation animX = new DoubleAnimation();
DoubleAnimation animY = new DoubleAnimation();

animX.Duration = TimeSpan.FromMilliseconds(600);
animY.Duration = TimeSpan.FromMilliseconds(800);
animX.From = pStart.X;
animX.To = pEnd.X;
animY.From = pStart.Y;
animY.To = pEnd.Y;

Storyboard StarStoryboard = new Storyboard();

Storyboard.SetTarget(animX, this.MyImage);
Storyboard.SetTargetProperty(animX, "(Canvas.Left)");

Storyboard.SetTarget(animY, this.MyImage);
Storyboard.SetTargetProperty(animY, "(Canvas.Top)");

StarStoryboard.Children.Add(animX);
StarStoryboard.Children.Add(animY);

Sunteen Wu Sunteen Wu · Accepted Answer · 2017-05-17T02:15:07

Storyboard in uwp app is for controlling animations with a timeline. But there is no MediaTimeLine in uwp for Storyboard.

I am trying to play a sound with my animation

If you just want to play a sound with the animation, you can add a MediaElement. And play the sound by MediaElement when you beginning the Storyboard and pause the sound when the Storyboard completed. For example:

XAML code

<Button
    Canvas.Top="250"
    Margin="2"
    Click="Animation_Begin"
    Content="Begin" />
<Canvas>
    <Image
        x:Name="MyImage"
        Width="50"
        Height="50"
        Source="Assets/caffe1.jpg" />
</Canvas>
<MediaElement
    x:Name="mediaforanimation"
    AutoPlay="False"
    Source="Assets\2.mp3" />

Code behind

Storyboard StarStoryboard = new Storyboard();
public Storyboardbegin()
{
    this.InitializeComponent();
    StarStoryboard.Completed += StarStoryboard_Completed;
    DoubleAnimation animX = new DoubleAnimation();
    DoubleAnimation animY = new DoubleAnimation();
    animX.Duration = TimeSpan.FromMilliseconds(600);
    animY.Duration = TimeSpan.FromMilliseconds(800);
    animX.From = 0;
    animX.To = 200;
    animY.From = 0;
    animY.To = 200;     
    Storyboard.SetTarget(animX, this.MyImage);
    Storyboard.SetTargetProperty(animX, "(Canvas.Left)");
    Storyboard.SetTarget(animY, this.MyImage);
    Storyboard.SetTargetProperty(animY, "(Canvas.Top)");
    StarStoryboard.Children.Add(animX);
    StarStoryboard.Children.Add(animY);
}

private void StarStoryboard_Completed(object sender, object e)
{
    mediaforanimation.Pause();
}

private void Animation_Begin(object sender, RoutedEventArgs e)
{ 
    StarStoryboard.Begin();
    mediaforanimation.Play();          
}

If this cannot meet your requirements, you can detail what you actually want to do, we may try the APIs in uwp to do.

How do I add sound to UWP storyboard animation

1 Answers