[Windows Phone] 簡單的 MP3 撥放 - MediaElement 控制項的使用 | charles : 從零開始，努力突破 - 點部落

2014-01-17

[Windows Phone] 簡單的 MP3 撥放 - MediaElement 控制項的使用

960
0
Windows Phone
2014-01-20

本文透過實例介紹 MediaElement 控制項的使用。

[前言]

在 Windows Phone 中我們可以直接將音樂的檔案放到專案中，通過 MediaElement 來撥放音樂。

[成品]

[範例實作]

首先準備幾首自己喜歡的MP3檔案。

Step1. 新增 Windows Phone 應用程式專案。

Step2. 將準備好的MP3檔案移至專案中。(直接將檔案拖曳到方案總管內)

Step3. 在MainPage.xaml中拉進MediaElement、TextBlock、RadioButton、Button的控制項並修改屬性。

XAML程式碼:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <MediaElement x:Name="sound" />
            <TextBlock FontSize="30" Height="59" HorizontalAlignment="Left" Margin="6,6,0,0" Name="textBlock1" Text="請選擇你要播放的歌曲" VerticalAlignment="Top" Width="409" />
            <RadioButton Content="羅志祥-Touch My Heart" Height="72" HorizontalAlignment="Left" Margin="0,71,0,0" Name="radioButton1" VerticalAlignment="Top" Width="394" IsChecked="True" />
            <RadioButton Content="陳小春-獨家記憶" Height="72" HorizontalAlignment="Left" Margin="0,149,0,0" Name="radioButton2" VerticalAlignment="Top" />
            <RadioButton Content="大燦-貝多芬的悲傷" Height="72" HorizontalAlignment="Left" Margin="0,227,0,0" Name="radioButton3" VerticalAlignment="Top" />
            <RadioButton Content="筷子兄弟-老男孩" Height="72" HorizontalAlignment="Left" Margin="0,305,0,0" Name="radioButton4" VerticalAlignment="Top" />
            <RadioButton Content="梁靜茹-比較愛" Height="72" HorizontalAlignment="Left" Margin="0,383,0,0" Name="radioButton5" VerticalAlignment="Top" />
            <Button Content="播放" Height="72" HorizontalAlignment="Left" Margin="0,476,0,0" Name="play" VerticalAlignment="Top" Width="160" Click="play_Click" />
            <Button Content="暂停" Height="72" HorizontalAlignment="Left" Margin="135,476,0,0" Name="pause" VerticalAlignment="Top" Width="160" Click="pause_Click" />
            <Button Content="停止" Height="72" HorizontalAlignment="Left" Margin="272,476,0,0" Name="stop" VerticalAlignment="Top" Width="160" Click="stop_Click" />     
        </Grid>

Step4. 產生點擊播放、暫停、停止 Button 的 Click 事件。(在框框內點擊2次即可產生Click事件)

Step5. MainPage.xaml.cs Button 的 Click 事件程式碼內容。

public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void play_Click(object sender, RoutedEventArgs e)
        {
            if (radioButton1.IsChecked==true)
            {
                sound.Source = new Uri("TouchMyHeart.mp3", UriKind.Relative);
            }
            else if (radioButton2.IsChecked == true)
            {
                sound.Source = new Uri("2.mp3", UriKind.Relative);
            }
            else if (radioButton3.IsChecked == true)
            {
                sound.Source = new Uri("3.mp3", UriKind.Relative);
            }
            else if (radioButton4.IsChecked == true)
            {
                sound.Source = new Uri("4.mp3", UriKind.Relative);
            }
            else if (radioButton5.IsChecked == true)
            {
                sound.Source = new Uri("5.mp3", UriKind.Relative);
            }
            else
            {
                sound.Source = new Uri("TouchMyHeart.mp3", UriKind.Relative);
            }
            sound.Play();
        }

        private void pause_Click(object sender, RoutedEventArgs e)
        {
            sound.Pause();
        }

        private void stop_Click(object sender, RoutedEventArgs e)
        {
            sound.Stop();
        }
    }

[參考引用]

MediaElement 類別

[範例下載]

MediaElement.rar

[提醒]

(範例中的音樂檔名設為2.MP3 / 3.MP3 / 4.MP3 / 5.MP3 ，因有音樂檔無法上船範例所以將音樂檔刪除了，請使用自己的音樂檔)

回首頁