音声を録音してライブラリに保存するプログラムを作る
![](https://thinkit.co.jp/sites/default/files/styles/main_image_730x/public/main_images/4112_0_8.png?itok=VwL_mp3N)
今回のサンプルは、録音した音声をライブラリに保存・再生するプログラムです。
まず、話す秒数を選択します。するとカウントダウンが開始されますので、カウントが0になるまで話すことができます(図1)。
話した内容はファイルとして、ビデオライブラリ内のSoundFileというサブフォルダに保存されます。
保存された音声ファイル(mp4)の一覧がリストボックスに表示されますので、任意のファイルを選択すると音声が再生されます(図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"/>■(6) <ProgressRingx:Name="ProgressRing1" HorizontalAlignment="Left" Height="168" Margin="839,165,0,0" VerticalAlignment="Top" Width="204" IsEnabled="False" Foreground="Crimson" FontSize="36"/>■(7) <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"/>■(9) <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"/>■(6) <TextBlockHorizontalAlignment="Left" Height="65" Margin="839,73,0,0" TextWrapping="Wrap" Text="スピーカー" VerticalAlignment="Top" Width="237" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold"/>■(6) </Grid> </ScrollViewer> </Grid> </Page>
音声を録音してライブラリに保存するプログラム
連載バックナンバー
Think ITメルマガ会員登録受付中
全文検索エンジンによるおすすめ記事
- 指定した秒数で音声を録音して、その音声を再生するサンプルアプリ
- Webカメラで撮影した写真をセピア調に演出するアプリを作る
- 時刻とともに、その日の出来事をキャラクターが音声で教えてくれるアプリを作る
- お気に入りの写真に登場する、仲良しクラウディアちゃん
- ピクチャライブラリ内の画像を指定して表示する+1つのサンプル
- 場所と写真を記録するプログラムを作って思い出のシーンを保存しよう
- 画像に各種フィルタを適用して保存するWindowsアプリを作る
- 撮影した写真の管理ができるマイフォトアプリを作る
- CountDownControlを使ってカウントダウン後にカメラのシャッターを切る
- Webカメラを使ったアプリを作ろう