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

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

まず、話す秒数を選択します。するとカウントダウンが開始されますので、カウントが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という名前の要素を配置します。

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