[Windows Phone]Silverlightを使用したメディアプレイヤーアプリ作成

はじめに

今回はWindows PhoneにてXNAのメディア機能をSivlerlightから使用し、Windows Phone内に登録されているメディアの再生を行うアプリの作成を行います。

プロジェクトの作成

次の手順で、雛形となるプロジェクトを作成します。

  • windowsのスタートメニューのプログラムより、[Microsoft Visual Studio 2010]-[Visual Studio 2010 for Windows Phone]を起動します。
  • Visual Studio 2010 for Windows Phoneより[新しいプロジェクト]を選択します。
  • 新しいプロジェクトのページより、[Visual C#]-[Silverlight for Windows Phone]のテンプレートを選択し、[Windows Phone アプリケーション]を選択してプロジェクト名を入力します。
  • 新しいwindows Phone アプリケーションダイアログにて対象となるwindows Phone プラットフォームのバージョンを選択します。
    (今回はwindows Phone OS 7.1を対象とします)
  • 新しいプロジェクトが作成され、MainPage.xamlが表示されます。

 

参照の追加

Windows PhoneにおいてXNAの処理を行うには、Silverlightの DispatcherTimerを利用して、XNAのFramework.Updateメソッドを繰り返し呼び出す事で行うことができます。

そのため、まずはプロジェクトでそのメソッドが使用できるように参照の追加を行う必要があります。

次の手順で参照の追加及び確認を行います。

  • プロジェクトの参照設定より[参照の追加]を選択します。
  • 参照の追加ダイアログより今回使用する参照である「Microsoft.Xna.Framework」を選択します。
  • 参照設定に追加したMicrosoft.Xna.Frameworkが存在する事を確認します。

 

UIの作成(xaml)

アプリのUIを作成します。MainPage.xamlに次のように追加・変更を行います。

<!--LayoutRootとなるGridの設定-->
<Grid x:Name="LayoutRoot" Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <!--タイトルを表示するパネルの設定-->
  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Media Player" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  </StackPanel>

  <!--コンテンツを表示するグリッドの設定-->
  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.32*" />
      <ColumnDefinition Width="0.34*" />
      <ColumnDefinition Width="0.32*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="0.15*" />
      <RowDefinition Height="0.15*" />
      <RowDefinition Height="0.35*" />
      <RowDefinition Height="0.15*" />
      <RowDefinition Height="0.15*" />
    </Grid.RowDefinitions>
    <!--操作ボタン-->
    <Button Content="BEFORE" Grid.Row="4" Name="btnPreviousSong" Click="btnPreviousSong_Click" />
    <Button Content="START" Grid.Column="1" Grid.Row="4" Name="btnPauseResume" Click="btnPauseResume_Click" />
    <Button Content="NEXT" Grid.Column="2" Grid.Row="4" Name="btnNextSong" Click="btnNextSong_Click" />
    <!--情報表示及び再生-->
    <TextBlock Grid.ColumnSpan="3" Name="txtArtistName" Text="" FontSize="48" />
    <TextBlock FontSize="48" Grid.ColumnSpan="3" Name="txtAlbumName" Text="" Grid.Row="1" />
    <TextBlock FontSize="48" Grid.ColumnSpan="3" Name="txtSongName" Text="" Grid.Row="3" />
    <Image Grid.ColumnSpan="2" Grid.Row="2" Name="imgAlbumCover" Stretch="Uniform" />
    <MediaElement x:Name="VideoPlayer" Grid.ColumnSpan="2" Grid.Row="2"  Stretch="Fill" />
  </Grid>
</Grid>

 

コードの追加

上記xamlを作成を行ったら、今度はコードよりそれを有効化し、また各動作等の実装を行う必要があります。

MainPage.xaml.csより次のようにコードを追加・修正します。

using System;
using System.Windows;
using Microsoft.Phone.Controls;
using System.Collections.Generic;
using System.Windows.Threading;
using System.Windows.Media.Imaging;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Media;

namespace MediaPlayer
{
  public partial class MainPage : PhoneApplicationPage{
    private SongCollection mySongCollection;

    // コンストラクター
    public MainPage(){
       InitializeComponent();
       
       //以下はXNAのFramework.Updateメソッドを繰り返し呼び出す処理となります
       // XNA ゲームループをシミュレートするためのタイマーを設定
       DispatcherTimer XnaDispatchTimer = new DispatcherTimer();
       XnaDispatchTimer.Interval = TimeSpan.FromMilliseconds(50);

       // FrameworkDispatcher.Updateメソッドを呼び出し、XNA Frameworkの実行状態を更新
       XnaDispatchTimer.Tick += delegate{
         try{
           FrameworkDispatcher.Update();
         }
         catch { }
       };

       // XnaのUpdateメソッドを呼び出すためのタイマー開始
       XnaDispatchTimer.Start();
       this.Loaded += new RoutedEventHandler(MainPage_Loaded);
     }

     //メディアライブラリー取得及びメディアプレイヤー起動
     void MainPage_Loaded(object sender, RoutedEventArgs e){
       List<string> songlist = new List<string>();
       MediaLibrary library = new MediaLibrary();
       mySongCollection = library.Songs;
       MediaPlayer.ActiveSongChanged += new EventHandler<EventArgs>(MediaPlayer_ActiveSongChanged);
       MediaPlayer.MediaStateChanged += new EventHandler<EventArgs>(MediaPlayer_MediaStateChanged);

       UpdateCurrentSongInformation();
    }

    void MediaPlayer_MediaStateChanged(object sender, EventArgs e){
      switch (MediaPlayer.State){
        case MediaState.Stopped:
          btnPauseResume.Content = "START";
          break;
        case MediaState.Playing:
          btnPauseResume.Content = "PAUSE";
          break;
        case MediaState.Paused:
          btnPauseResume.Content = "START";
          break;
      }
    }

    // 情報表示
    void UpdateCurrentSongInformation(){
      try{
        txtAlbumName.Text = MediaPlayer.Queue.ActiveSong.Album.Name;
        txtArtistName.Text = MediaPlayer.Queue.ActiveSong.Artist.Name;
        txtSongName.Text = MediaPlayer.Queue.ActiveSong.Name;
        BitmapImage bmp = new BitmapImage();
        bmp.SetSource(MediaPlayer.Queue.ActiveSong.Album.GetAlbumArt());
        imgAlbumCover.Source = bmp;
      }catch{
        imgAlbumCover.Source = null;
      }
    }

    void MediaPlayer_ActiveSongChanged(object sender, EventArgs e){
      UpdateCurrentSongInformation();
    }

    // ボタン挙動
    // 前のメディア
    private void btnPreviousSong_Click(object sender, RoutedEventArgs e){
      MediaPlayer.MovePrevious();
    }

    // 次のメディア
    private void btnNextSong_Click(object sender, RoutedEventArgs e){
      MediaPlayer.MoveNext();
    }

    // 再生及び一時停止
    private void btnPauseResume_Click(object sender, RoutedEventArgs e){
      if (MediaPlayer.State == MediaState.Playing){
        MediaPlayer.Pause();
      }else if (MediaPlayer.State == MediaState.Paused){
        MediaPlayer.Resume();
      }else if (MediaPlayer.State == MediaState.Stopped){
        MediaPlayer.Play(mySongCollection);
      }
    }
  }
}

 

ビルド及びデバック実行

上記によりWindows Phoneアプリケーションができましたので、これをビルド及びデバック実行を行います。
(今回の場合はローカル上のエミュレーターでの動作のため、実際には録画・再生は行えませんので注意)

その際の手順は以下のようになります。

  • Visual Studio 2010 for Windows Phoneのメニューより[デバッグ]-[ソリューションのビルド]を選択し、ビルドを行います。
    (現時点では何も弄ってないためそのままビルドされますが、エラーが存在する場合ビルドされず、またそのエラーはメニューの[表示]-[その他のウィンドウ]-[エラー一覧]より表示されるエラー一覧ウィンドウに表示されます。)
  • ビルド成功後、ツールバーの[デバッグ開始]ボタンの隣にある[Windows Phoneプロジェクトターゲット]プルダウンリストより、[Windows Phone Emulator]または[Windows Phone Emulator(JA)]を選択し、
    メニューの[デバッグ]-[デバッグ開始]またはツールバーの[デバッグ開始]ボタンよりデバッグを実行します。
    (この時、開発環境にグラフィック処理装置等が存在していない、または構成していない場合はXNA Framework関係のグラフィックスは表示できませんとの警告が発生しますが、今回の場合は使用していないため、そのまま続行を行います)
  • アプリケーションがエミュレータ上で起動します。その際、横向きやズーム等はエミュレータの横にあるエミュレータのツールバーを利用します。
  • カテゴリー: C# タグ: , パーマリンク

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>