We help IT Professionals succeed at work.

How to play small sound file continuously in Silverlight?

Hello,

I have two questions regarding Silverlight's SoundPlay action and properties. My scenario is like:

I have two story board:
The first story board has an image and a sound file; when the silverlight application gets loaded, the sound starts to play automatically, but if someone clicks the image,
the sound file will stop and the second storyboard will start with a new sound file.

1) My first question is how to stop the first sound file of first story board when the second story board starts with the second sound file.

2) My second question is how to play a sound file continuously; for example, in Silverlight we can play a story board continuously with RepeatBehavior="Forever"; but I cannot find a way to play my 10 second sound file forever or continuously.

Note: I have attached a small XAML file to show what I am talking about; I am also stating that if instead of an image file, if there were a button, then I can stop the first music file after I click the button and start my second story board with a new sound file, but I would like to use image file instead of a button. Is it possible? If it is, how to do it?

Therefore, please answer my following two questions or give big hint or website tutorial links on

1) How to stop the first sound file of first story board when the second story board starts with the second sound file ( When the clickable element is an image instead of a button)
2) How to play a 10 second sound file continuously?


 Silverlight Application with clickable button, but I want to use clickable image so that an event can be fired
XAML
................................
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="testPrj.MainPage"
	Width="640" Height="480">
	<UserControl.Resources>
		<Storyboard x:Name="Storyboard1" RepeatBehavior="Forever"/>
		<Storyboard x:Name="Storyboard2"/>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Background="Red">
		<Button HorizontalAlignment="Left" Margin="212,0,0,111" VerticalAlignment="Bottom" Width="75" Content="Button" Click="onClick"/>
		<MediaElement x:Name="sound2_mp3" Height="0" HorizontalAlignment="Left" Margin="105,230,0,0" VerticalAlignment="Top" Width="0" Source="/sound2.mp3" Stretch="Fill"/>
		<MediaElement x:Name="sound1_mp1" Height="0" HorizontalAlignment="Left" Margin="190,164,0,0" VerticalAlignment="Top" Width="0" Source="/sound1.mp3" Stretch="Fill" AutoPlay="False"/>
	</Grid>
</UserControl>
..............................................................................
Code Behind File
...................................................................
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace testPrj
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
		}

		private void onClick(object sender, System.Windows.RoutedEventArgs e)
		{
			Storyboard1.Stop();
			sound2_mp3.Stop();
			sound1_mp1.Play();
			
		}
	}
}
..................

Open in new window

Comment
Watch Question

Software Developer
Top Expert 2006
Commented:
Why not keep the button but put the image in as its content?
 

Author

Commented:
Hello,

I will try your approach as I never knew that that a button can have image content. I have to do some web research now.

However, I really want to know how to do the first problem, which is:

1) How to stop the first sound file of first story board when the second story board starts with the second sound file ( When the clickable element is an image instead of a button)

Author

Commented:
The second problem got solved, which is

2) My second question is how to play a sound file continuously; for example, in Silverlight we can play a story board continuously with RepeatBehavior="Forever"; but I cannot find a way to play my 10 second sound file forever or continuously.

The problem got solved after I have added MediaEnded event handler;

Now my changed XAML code is:
..
..
...
<MediaElement x:Name="sound2_mp3" Height="0" HorizontalAlignment="Left" Margin="105,230,0,0" VerticalAlignment="Top" Width="0" Source="/sound2.mp3" Stretch="Fill" DataContext="{Binding}" MediaEnded="start" AutoPlay="True" />
        <MediaElement x:Name="sound1_mp1" Height="0" HorizontalAlignment="Left" Margin="190,164,0,0" VerticalAlignment="Top" Width="0" Source="/sound1.mp3" Stretch="Fill" AutoPlay="False" MediaEnded="start1"/>
...
...
...      
 
And my Code behind file has:


 private void start(object sender, RoutedEventArgs e)
        {
            sound2_mp3.Position = TimeSpan.FromSeconds(0);
            sound2_mp3.Play();
        }
        private void start1(object sender, RoutedEventArgs e)
        {
            sound1_mp1.Position = TimeSpan.FromSeconds(0);
            sound1_mp1.Play();
        }

 
However, my first problem is still open, which is:

1) How to stop the first sound file of first story board when the second story board starts with the second sound file ( When the clickable element is an image instead of a button)? Is it possible? Is there a tutorial in web? Please give suggestions.

Author

Commented:
Hello anyoneis:

it seems that I can really put image content inside a button, and now I can have onclick event handler; thank you for this information, but I am going to keep this question open for next 2-3 hours so that someone might answer about:

1)How to stop the first sound file of first story board when the second story board starts with the second sound file ( When the clickable element is an image instead of a button)? Is it possible? Is there a tutorial in web? Please give suggestions.

anyoneisSoftware Developer
Top Expert 2006

Commented:
Yeah, I'm pretty new to this stuff and I would like to see an answer to that also. How does Storyboard1 get started? I don't see anything in your code to do that? If it is done in code, there's something about a second parameter needing to be set to true....
Also, found this resource which looks like it could be useful for you:
       http://msdn.microsoft.com/en-us/library/system.windows.media.animation.stopstoryboard.aspx
Cheers!
David
 
 

Author

Commented:
I will post a demo code, XAML and code behind C#, by tomorrow that will show basic storyboard action.

Author

Commented:
The storyboard1 get started by the invocation of Begin(); method:
Storyboard1.Begin();
in MainPage() methid:
public MainPage(){
                  InitializeComponent();Storyboard1.Begin();
            }

.......................................................................................................................................................

The revised code is at below:

Code Behind C#:
..................................
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace testPrj
{
      public partial class MainPage : UserControl
      {
            public MainPage(){
                  InitializeComponent();Storyboard1.Begin();
            }
            private void onClick(object sender, System.Windows.RoutedEventArgs e)
            {
            Storyboard1.Stop(); Storyboard2.Begin(); textBlock.Visibility = Visibility.Collapsed;
                  button1.Visibility=textBlock.Visibility = Visibility.Collapsed;
                  sound2_mp3.Stop();sound1_mp1.Play();
           
            }
        private void start(object sender, RoutedEventArgs e){
            sound2_mp3.Position = TimeSpan.FromSeconds(0);sound2_mp3.Play();
        }
        private void start1(object sender, RoutedEventArgs e){
            sound1_mp1.Position = TimeSpan.FromSeconds(0);sound1_mp1.Play();
        }
      }
}

XAML
......................
<UserControl
      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"
      x:Class="testPrj.MainPage"
      Width="640" Height="480" mc:Ignorable="d">
      <UserControl.Resources>
            <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="100"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="100"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="100"/>
                  </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="Storyboard2">
                  <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="00:00:01">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="00:00:02">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
                  </DoubleAnimationUsingKeyFrames>
            </Storyboard>
      </UserControl.Resources>

      <Grid x:Name="LayoutRoot" Background="Red">
            <MediaElement x:Name="sound2_mp3" Height="0" HorizontalAlignment="Left" Margin="105,230,0,0" VerticalAlignment="Top" Width="0" Source="/sound2.mp3" Stretch="Fill" DataContext="{Binding}" MediaEnded="start" AutoPlay="True" />
        <MediaElement x:Name="sound1_mp1" Height="0" HorizontalAlignment="Left" Margin="190,164,0,0" VerticalAlignment="Top" Width="0" Source="/sound1.mp3" Stretch="Fill" AutoPlay="False" MediaEnded="start1"/>
        <Button  HorizontalAlignment="Left" Margin="388,239,0,0" Name="button1" VerticalAlignment="Top" Click="onClick">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="button.png" Width="189" Height="66" Cursor="Hand"/>
                </StackPanel>
            </Button.Content>
        </Button>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="89,176,0,0" VerticalAlignment="Top" Text="This is Story Board 1" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5">
              <TextBlock.RenderTransform>
                    <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                    </TransformGroup>
              </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="124,146,0,0" VerticalAlignment="Top" Text="This Story Board 2" TextWrapping="Wrap" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
              <TextBlock.RenderTransform>
                    <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                    </TransformGroup>
              </TextBlock.RenderTransform>
        </TextBlock>        
    </Grid>
</UserControl>

Author

Commented:
I believe that it is very important to have image element in Silverlight that can have onclick, onhover, etc, event handlers. Think the following scenario:

An animation that is consisted of 2-3 human images; if user clicks or hover on an image, a person's picture or drawing, a specific story board starts or a new event get fired. Kind of like a cartoon. I will kepp this thread open; maybe there is a way ( it is a good idea to be aware of that).

Author

Commented:
Hello,

my first question was:

1) How to stop the first sound file of first story board when the second story board starts with the second sound file ( When the clickable element is an image instead of a button)

This is doable and got solved. I do not have any idea why I have not investigated and experimented with the event types of image element. So, the conclusion is:
If the click-able element were an image, an event can be fired; for example in the following code segment I am using MouseLeftButtonUp event.

XAML
....................
        <Image HorizontalAlignment="Left" Margin="88,239,0,118" Width="95" Source="me1.png" Stretch="Fill" MouseLeftButtonUp="imgGotClicked"/>    
..........................................................................................................................................................
Code  Behind File
.................................

 private void imgGotClicked(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
              MessageBox.Show("Hello World!");Storyboard1.Stop();Storyboard2.Begin();
        }


Therefore, problem # 1 and problem # 2 both got solved.

I am again pasting the whole completed demo XAML and C# code behind at below ( please note that these are demos and does not have any real meaning):

XAML
..............................
<UserControl
      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"
      x:Class="testPrj.MainPage"
      Width="640" Height="480" mc:Ignorable="d">
      <UserControl.Resources>
            <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="100"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="100"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="100"/>
                  </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="Storyboard2">
                  <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="00:00:01">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="00:00:02">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                              <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                              </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                  </ObjectAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
                  </DoubleAnimationUsingKeyFrames>
            </Storyboard>
      </UserControl.Resources>

      <Grid x:Name="LayoutRoot" Background="Red">
            <MediaElement x:Name="sound2_mp3" Height="0" HorizontalAlignment="Left" Margin="105,230,0,0" VerticalAlignment="Top" Width="0" Source="/sound2.mp3" Stretch="Fill" DataContext="{Binding}"
            MediaEnded="start" AutoPlay="True" />
        <MediaElement x:Name="sound1_mp1" Height="0" HorizontalAlignment="Left" Margin="190,164,0,0" VerticalAlignment="Top" Width="0" Source="/sound1.mp3" Stretch="Fill" AutoPlay="False" MediaEnded="start1"/>
        <Button  HorizontalAlignment="Left" Margin="388,239,0,0" Name="button1" VerticalAlignment="Top" Click="onClick">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="button.png" Width="189" Height="66" Cursor="Hand"/>
                </StackPanel>
            </Button.Content>
        </Button>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="89,176,0,0" VerticalAlignment="Top" Text="This is Story Board 1" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5">
              <TextBlock.RenderTransform>
                    <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                    </TransformGroup>
              </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="124,146,0,0" VerticalAlignment="Top" Text="This Story Board 2" TextWrapping="Wrap" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5">
              <TextBlock.RenderTransform>
                    <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                    </TransformGroup>
              </TextBlock.RenderTransform>
        </TextBlock>
        <Image HorizontalAlignment="Left" Margin="88,239,0,118" Width="95" Source="me1.png" Stretch="Fill" MouseLeftButtonUp="imgGotClicked"/>        
    </Grid>
</UserControl>



C# Code Behind
................................

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace testPrj
{
      public partial class MainPage : UserControl
      {
            public MainPage(){
                  InitializeComponent();Storyboard1.Begin();
            }
            private void onClick(object sender, System.Windows.RoutedEventArgs e)
            {
            Storyboard1.Stop(); Storyboard2.Begin(); textBlock.Visibility = Visibility.Collapsed;
                  button1.Visibility=textBlock.Visibility = Visibility.Collapsed;
                  sound2_mp3.Stop();sound1_mp1.Play();
           
            }
        private void start(object sender, RoutedEventArgs e){
            sound2_mp3.Position = TimeSpan.FromSeconds(0);sound2_mp3.Play();
        }
        private void start1(object sender, RoutedEventArgs e){
            sound1_mp1.Position = TimeSpan.FromSeconds(0);sound1_mp1.Play();
        }

        private void imgGotClicked(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
              MessageBox.Show("Hello World!");Storyboard1.Stop();Storyboard2.Begin();
        }
      }
}


This thread's problems got resolved completely, I believe, but I am going to keep it open for another 12 hours, in case anyoneis gives some comments or has a question from me.