音声を録音してライブラリに保存するプログラムを作る

今回のサンプルは、録音した音声をライブラリに保存・再生するプログラムです。

まず、話す秒数を選択します。するとカウントダウンが開始されますので、カウントが0になるまで話すことができます（図1）。
話した内容はファイルとして、ビデオライブラリ内のSoundFileというサブフォルダに保存されます。
保存された音声ファイル（mp4）の一覧がリストボックスに表示されますので、任意のファイルを選択すると音声が再生されます（図2）。

図1：カウントダウンが0になるまで話すことができる（クリックで拡大）

図2：ファイルを選択して音声を再生している（クリックで拡大）

実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。
次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。
「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_VoiceRecording」という名前を付けています。

ソリューションエクスプローラー内にImagesというフォルダを作って、画像を2枚配置しておきます。

ダウンロードされたサンプルファイルには、画像ファイルは追加済みです。

コントロールの配置

ツールボックスからデザイン画面上に、ScrollViewerコントロールを1個配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して、水平スクロールバーを表示させます。
このScrollviewerの子要素として以下のコントロールを配置します。これはタブレットPCを縦にした場合に、水平スクロールを可能にするためです。

Imageコントロールを2個、WinRTXAML ToolkitのコントロールであるCounddownControlを1個、ComboBoxコントロールを1個、MediaElementコントロールを1個、TextBlockコントロールを4個、ProgressRingコントロールを1個、ButtonコントロールとListBoxコントロールを1個ずつ配置します。

書き出されるXAMLをリスト1のように編集します。レイアウトは図3のようになります。

リスト1　書き出されたXAMLコード(MainPage.xaml)

• （1）要素を配置し、HorizontalScrollBarVisibilityプロパティにVisibleを指定して水平スクロールを可能にしています。この要素の子要素として以下の要素を配置します。
• （2）要素を配置し、SourceプロパティにImageフォルダ内の画像を指定します。
• （3）WinRTXAML ToolkitのCountdownContorl1という名前の要素を配置しています。
• （4）ComboBox1という名前の要素を配置し、プロパティの[共通]パネルにあるItemsプロパティから「コレクションエディタ」を起動して、要素を追加し、Contentプロパティに録音の秒数となる値を指定しておきます。
• （5）名前がMediaElement1という要素を配置します。
• （6）項目名となる要素を配置します。
• （7）ProgressRing1という名前の要素を配置します。最初の状態ではIsEnabledにFalseを指定して、使用不可としておきます。
• （8）stopButtonという名前の要素を配置します。
• （9）fileNameListBoxという名前の、保存したmp4ファイルの一覧を表示する要素を配置します。
• （10）messageTextBlockという名前の要素を配置します。

<Page
  x:Class="Win8_VoiceRecording.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Win8_VoiceRecording"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Controls="using:WinRTXamlToolkit.Controls"
  mc:Ignorable="d">
  <Grid>
    <ScrollViewerHorizontalScrollBarVisibility="Visible" Margin="0,-10,0,10">■（1）
      <Grid>
        <Image HorizontalAlignment="Left" Height="256" Margin="384,140,0,0" VerticalAlignment="Top" Width="82" Source="Images/microphone.png"/>■（2）
        <Image HorizontalAlignment="Left" Height="219" Margin="845,145,0,0" VerticalAlignment="Top" Width="192" Source="Images/speaker.png"/>■（2）
        <Controls:CountdownControlx:Name="CountdownControl1"  Width="200" Height="200" Margin="28,71,1138,497"/>■（3）
        <ComboBoxx:Name="ComboBox1" HorizontalAlignment="Left" Height="56" Margin="365,70,0,0" VerticalAlignment="Top" Width="129" FontFamily="Meiryo UI" FontSize="36">■（4）
          <ComboBoxItem Content="5" FontSize="36" FontFamily="Meiryo UI" />■（4）
          <ComboBoxItem Content="10" FontSize="36" FontFamily="Meiryo UI"/>■（4）<ComboBoxItem Content="15" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="20" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="25" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="30" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="40" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="50" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="60" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="120" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="180" FontSize="36" FontFamily="Meiryo UI"/>■（4）
          <ComboBoxItem Content="300" FontSize="36" FontFamily="Meiryo UI"/>■（4）
        </ComboBox>■（4）
        <MediaElementx:Name="MediaElement1" HorizontalAlignment="Left" Height="46" Margin="806,183,0,0" VerticalAlignment="Top" Width="327"/>■（5）
        <TextBlockHorizontalAlignment="Left" Height="35" Margin="233,81,0,0" TextWrapping="Wrap" Text="録音秒数" VerticalAlignment="Top" Width="108" FontFamily="Meiryo UI" FontSize="24"/>■（６）
        <ProgressRingx:Name="ProgressRing1" HorizontalAlignment="Left" Height="168" Margin="839,165,0,0" VerticalAlignment="Top" Width="204" IsEnabled="False" Foreground="Crimson" FontSize="36"/>■（７）
        <Button x:Name="stopButton" Content="中止" HorizontalAlignment="Left" Height="76" Margin="316,498,0,0" VerticalAlignment="Top" Width="200" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■（8）
        <ListBoxx:Name="fileNameListBox" HorizontalAlignment="Left" Height="399" Margin="691,369,0,0" VerticalAlignment="Top" Width="527" FontFamily="Meiryo UI" FontSize="24"/>■（９）
        <TextBlockx:Name="messageTextBlock" HorizontalAlignment="Left" Height="84" Margin="203,568,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="483" Foreground="Crimson" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold"/>■（10）
        <TextBlockHorizontalAlignment="Left" Height="101" Margin="203,657,0,0" TextWrapping="Wrap" Text="音声ファイルはビデオライブラリ内のSoundFileというサブフォルダに保存されています。不要なファイルは手動で削除してください。" VerticalAlignment="Top" Width="394" FontFamily="Meiryo UI" FontSize="18"/>■（６）
        <TextBlockHorizontalAlignment="Left" Height="65" Margin="839,73,0,0" TextWrapping="Wrap" Text="スピーカー" VerticalAlignment="Top" Width="237" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold"/>■（６）
      </Grid>
      </ScrollViewer>
  </Grid>
</Page>

図3：各コントロールを配置した（クリックで拡大）